Network response does not update data in react useQuery hook #8486
Description
Intended outcome:
The latest data returned from the server ought to update the "data" as returned by the useQuery hook.
Actual outcome:
It doesn't replace the initial server response.
Note that you may be drawn initially to the "cache-first" policy which looks like the reason why, and may be it is, but I can't for the life of me get it to work without this. Moreover I use this "nextFetchPolicy" throughout my product to prevent another strange occurrence in Apollo where you get a duplicate network request with the original useQuery variables. "cache-first" fixes this so it's my default "nextFetchPolicy" always. See - #7307 (comment)
How to reproduce the issue:
Problem has been reproduced. See - https://github.com/rossm6/react-apollo-error-template
It's pretty self-explanatory in the reproduction. In short toggle the button. This changes the state of the react app which in turn makes a network request. Only it is produces the problem described above.
Versions
System:
OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
Binaries:
Node: 10.19.0 - /usr/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.4 - /usr/bin/npm
Browsers:
Chrome: 90.0.4430.93
Firefox: 89.0.2
npmPackages:
@apollo/client: ^3.4.0-rc.6 => 3.4.0-rc.6
Reason For Closing
This isn't a bug. I had forgotten to change my typepolicies after recently changing my schema.
This is how it now looks -
{
typePolicies: {
Clicks: {
fields: {
days: {
keyArgs: false,
merge(existing, incoming) {
console.log("merge clicks", incoming);
return incoming;
},
read(existing) {
console.log("existing clicks", existing);
return existing;
},
}
}
},
UserType: {
fields: {
clicks: {
keyArgs: false,
merge(existing, incoming) {
console.log("merge clicks", incoming);
return incoming;
},
read(existing) {
console.log("existing clicks", existing);
return existing;
},
},
}
},
}
}