Writing directly to cache does not synchronously update `useQuery` return values

Intended outcome: When I write directly to my InMemoryCache, I want the updated data to be used the next time my React component renders.

Actual outcome: When I write directly to my InMemoryCache, there is a short time period in which my React component uses old data.

This can cause bugs if you have code that assumes that writing to the cache immediately updates the relevant useQuery instances. Here’s a real world example: imagine the user has just joined an organization in a multi-tenant application. The code might do the following:

1. Write to the cache to add a new organization to currentUser.organizations.
2. Use React Router’s navigate function to go to the new organization’s URL.
3. (Now the code explodes because the URL specifies an organization which is not contained in currentUser.organizations.)

How to reproduce the issue:

1. View my CodeSandbox.
2. Open the console in the right pane.
3. Click “Add 1 to rates”.

You should get output similar to the following. Notice how “Direct read” and “useQuery” are out of sync in the first rerender.

Direct read: 4.673000143247005
useQuery: 3.6730001432470056 
------------------- 
Direct read: 4.673000143247005
useQuery: 4.673000143247005
------------------- 

Versions

[srmagura]

Are you just looking for a quick way to restore previous behavior, or do you foresee wanting cache updates to be applied synchronously in the longer term?

I can foresee wanting cache updates to be applied synchronously in the longer term. Synchronous updates are useful for situations like the one I described in the original post. There is also just less potential for bugs when things are synchronous. Though, I understand that batching updates can be more efficient.

I think the bigger issue is that a method like cache.modify appears to be synchronous since it does not return a Promise, but its actual behavior is asynchronous. modify updates the cache immediately, but the method is still asynchronous when viewed in the larger context of a React application.

This discrepancy between the method’s expected and actual behavior could be remedied in two ways:

A) Make cache.modify update all observers synchronously, OR B) Make cache.modify return a Promise that resolves once all observers have been updated.

Since Apollo Client is (more or less) a global state manager, it could be useful to look at what other global state management libraries do. For example, I am pretty sure that Redux + react-redux does not do any batching unless you explicitly use the batch function that they export.

[srmagura]

Our real code is using cache.modify, and there does not seem to be an equivalent method on client. Here’s a workaround:

client.cache.modify(...);

(client as any).queryManager.broadcastQueries();

The as any is necessary because ApolloClient.queryManager is a private property. But it’s only private from TypeScript’s point of view — the property is still accessible at runtime.