Apollo-client: UseQuery has old data

[woutFrusch]

After updating the local cache the related query fires but seems to use the previous data, yet if a 1ms delay (at the *) is introduced this problem does not exists.

The code involved:

In the resolver:
await context.client.mutate({ ... }).then((_: any) => {
context.client.writeData({ { ...* } });
});

In the component:
const { data: ... } = useQuery(...);

I would expect that the 1ms delay is not required.

[hwillson]

@woutFrusch Would you be able to provide a small runnable reproduction that shows this?

[woutFrusch]

@hwillson I tried to create a small program in which the problem reproduces, this was without success, the small program works perfectly.

But I found some additional information which might be helpful.

In the component which uses the useQuery I also retrieved the client with useApolloClient() and when I use the readQuery() with the same query this contains the correct data even if I log both the results, the readQuery is correct the useQuery not.

Should readQuery and useQuery with the same query not generate the same results for the local state?

[maamounapprise]

Same issue here! suddenly readQuery is reading data fine but the watchQuery or useQuery it would return old data

[chaunceyau]

@maamounapprise are you able to reproduce with a small codesandbox example? It would really help debugging.

[Connor-Y]

I seem to be having the same problem. I don't have a sample right now (code sandbox is giving me cors errors) but I was able to reproduce it in my application using the following code snippet

// Write false and true to testField in quick succession
setInterval(async () => {
    const GET_TEST_FIELD = gql`
        {
            testField @client
        }
    `;
    console.log('======================== Interval trigger');
    this.client.writeData({ data: { testField: false } });
    // await sleep(1); // Sleep for 1 ms
    this.client.writeData({ data: { testField: true } });
    const afterWrite = this.client.readQuery({ query: GET_TEST_FIELD });
    console.log('After write', afterWrite.testField);
}, 5000);

When using useQuery(GET_TEST_FIELD) in another component to render the value it flip-flops between displaying true and false when it should almost always be displaying true. Reading the cache in the interval always returns the correct value ("true").

I'm not to sure on this, but what I think is happening React/React-Native is only triggering the re-render once for each iteration of the intervals. Something like:

First interval:
Write false to cache, cause component to render with "false".
Write true to cache: Skips render for “true” (my guess is due to a re-render limit)
Second interval:
Write false to cache, component does not re-render because it already has this value
Write true to cache, component re-renders with "true"
...

I was able to fix this by introducing the sleep(1) which causes the component to correctly render "false" for a short period and then "true" for a long period as this causes the component to render twice for each call instead of once previously. This seems to be inline with what the OP was experiencing.

I was testing this in React-native but I think it should hold for regular react as well. Maybe this will help you find the issue @chaunceyau

Edit: Fix code formatting

[ericksonc]

I think I'm experiencing the same issue in #7067

The watchQuery returns stale cache results, while readQuery with the exact same options returns fresh cache results.