Apollo client cache returns a bad data

Question

First, I call useGetData with parameters that include filters for test1 and test2 (this is correct). The data is fetched and stored in the cache. Then, I disable the test2 filter and make a new request. New data is loaded, but after 1 second, the previous (old) data is returned.

I added getData to InMemoryCache and set a breakpoint on the line return existing. When checking the arguments, I noticed that the first request in the cache is made without the test2 filter, but the next request in the cache includes test2. However, useEffect is only called in one place, and I have verified that it is not being called with the test2 filter.

Why do I see two requests being made? Thanks!

params = { filters: [{ type: "test1"}, {type: "test2"}], offset: 0, limit: 9 }

const query = useGetData({ variables: params, notifyOnNetworkStatusChange: true, });

InMemoryCache just for debugging what arguments are used:

{ typePolicies: { Query: { fields: { getData: (existing, args) => { return existing }, } } }

Expected: Apollo Cache to return the correct data based on the arguments it is called with.

Resulted: For new arguments, old incorrect data is returned (data that was fetched with different arguments).

We use node, react, and nextjs for SSR. The data fetched during SSR is stored in the apollo cache, so on the FE, it is immediately retrieved from the cache.

Example:

With

params = { filters: [{ type: "test1"}, {type: "test2"}], offset: 0, limit: 9 }

I get: [val1, val2]

But with next request without the second filter:

params = { filters: [{ type: "test1"}], offset: 0, limit: 9 }

I get: [val1,val3], but immediately during 1s the cache returns the old data: [val1,val2]

MJepbarov · Accepted Answer · 2025-02-18 05:47:48Z

in your code:

params = { filters: [{ type: "test1"}, {type: "test2"}], ... }

if it changes Apollo might misinterpret it as the same request, try to use useMemo

const filters = useMemo(() => [{ type: "test1" }], []); const params = useMemo(() => ({ filters, offset: 0, limit: 9 }), [filters]); const query = useGetData({ variables: params, notifyOnNetworkStatusChange: true, });

It did not work. Interesting things is that when i trigger the function, then breakpoint is hit in cache many times with new arguments and then with old arguments. { typePolicies: { Query: { fields: { getData: (existing, args) => { return existing }, } } }

Collectives™ on Stack Overflow

Apollo client cache returns a bad data

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related