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]
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]
Share Improve this question edited Feb 18 at 4:08 Drew Reese 203k17 gold badges237 silver badges268 bronze badges asked Feb 17 at 23:26 lukasmaska98lukasmaska98 1015 bronze badges1 Answer
Reset to default 0in 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,
});