Components do not re-render after calling store.writeQuery() - reactjs

Question

So I am following the graphql + apollo tutorial at https://www.howtographql.com/react-apollo/6-more-mutations-and-updating-the-store/ and I have a bunch of "Link" components that when upvoted should show the new number of votes. So far it does not re-render when upvoted and I have to refresh the page.
I try to do this by calling store.writeQuery() with the updated data. I checked and the data object I passed in is indeed different from the old:
Here's my initial set-up:
import { ApolloProvider } from "react-apollo";
import { ApolloClient } from "apollo-client";
import { createHttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory"
import { setContext } from "apollo-link-context";
import App from './components/App';
import {AUTH_TOKEN} from "./constants.js";
const authLink = setContext((_, { headers }) =>
{
const token = localStorage.getItem(AUTH_TOKEN);
return {
headers: {
...headers,
authorization: (token ? "Bearer " + token : ""),
}
}
});
const httpLink = createHttpLink({
uri: "http://localhost:4000"
});
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
})
Here's the mutation component:
<Mutation
mutation={VOTE_MUTATION}
variables={{id: this.props.link.id}}
update={(store, { data: { upVote } }) =>
{
const data = store.readQuery({ query: FEED_QUERY });
const votedLink = data.feed.links.find(link => link.id === this.props.link.id);
votedLink.votes = upVote.link.votes;
console.log(data);
store.writeQuery({
query: FEED_QUERY,
data,
});
} }
>
{
mutationCallback =>
(<div className="ml1 gray f11" style={{cursor: "pointer"}} onClick={mutationCallback}>
▲
</div>)
}
</Mutation>
Here's the query that fetches all the links:
const FEED_QUERY = gql`
{
feed
{
links
{
id url description createdAt
createdBy{
name email
}
votes{
id
}
}
}
}
`;
And I call store.readQuery() and store.writeQuery() with the expectation that the upvoted link will rerender to show the new number of votes. I also log the passed in data object to ensure it has been updated, and it has. But no rerendering. What could be wrong?

Answer 1

add to the apolloClient dataIdFromObject for more info here the: documentation
const apolloClient = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
dataIdFromObject: o => o.id
})