Apollo client writeQuery updates stores, but UI componens only updates after the second function call - apollo

Question

"apollo-cache-inmemory": "^1.6.2",
"apollo-client": "^2.6.3",
I setup a simple subscription with the client.subscribe method and try to update the store with the client.writeQuery method
export default class App extends Component<Props> {
componentDidMount() {
this.purchaseSubscription = client.subscribe({
query: PURCHASE_ASSIGNED_SUBSCRIPTION,
variables: { status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] },
}).subscribe({
next: (subscriptionData) => {
const { cache } = client;
const prev = cache.readQuery({
query: MY_PURCHASES,
variables: { status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] },
});
const newPurchase = subscriptionData.data.purchaseAssignedToMe;
const data = { myPurchases: [...prev.myPurchases, newPurchase] };
cache.writeQuery({
query: MY_PURCHASES,
variables: { status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] },
data,
});
},
error: (err) => { console.error('err', err) },
});
}
render() {
return (
<ApolloProvider client={client}>
<AppContainer />
</ApolloProvider>
);
}
}
The store gets updated after the call, however the UI component is only re-rendered only on the second publish event.
The UI components is setup the following way:
<Query
query={MY_PURCHASES}
variables={{ status: ['INPREPARATION', 'PROCESSED', 'READYFORCOLLECTION', 'ONTHEWAY', 'ATLOCATION'] }}
>
...
<Query />
By reading the cache after the writeQuery is called I was able to validate that the store reflect the proper state, however the UI component only gets updated at every second call.
What am I missing here?

Answer 1

ApolloClient.subscribe's next function is very similar to how updateQueries works in Apollo Client’s mutate function, but with the exception that cache.writeQuery does not broadcast the changes if it is not called from the the Mutation's update function.
SOLUTION: use client.writeQuery(...) instead of cache.writeQuery(...)
Note: The update function receives cache rather than client as its
first parameter. This cache is typically an instance of InMemoryCache,
as supplied to the ApolloClient constructor when the client was
created. In case of the update function, when you call
cache.writeQuery, the update internally calls broadcastQueries, so
queries listening to the changes will update. However, this behavior
of broadcasting changes after cache.writeQuery happens only with the
update function. Anywhere else, cache.writeQuery would just write to
the cache, and the changes would not be immediately broadcast to the
view layer. To avoid this confusion, prefer client.writeQuery when
writing to cache.
Source: https://www.apollographql.com/docs/react/essentials/mutations/#updating-the-cache