React-apollo: [Hooks] fetchMore option updateQuery triggers hook update but with previous data

Created on 9 Aug 2019  路  12Comments  路  Source: apollographql/react-apollo

While implementing pagination with fetchMore and it's options updateQuery where I merge new list data with what I initially queried, I noticed that after fetchMore is called useQuery hook updates my component with the previous data without the update I provided in updateQuery, however the next fetchMore call results in the data I should have received in the previous fetchMore update (and so on)

Intended outcome:
To get in data object of useQuery hook result of updateQuery function which was provided as option in fetchMore call.

Actual outcome:
Getting in data object in useQuery hook PREVIOUS result of updateQuery function which was provided as option in fetchMore call or original result of a query (if it was the first call to fetchMore) .

Version

[email protected]

bug confirmed

Most helpful comment

bug happening again :(

All 12 comments

Are you sure you're using the correct argument? The first argument passed to updateQuery is the previous data, the second argument has the new data

@AlpacaGoesCrazy did https://github.com/apollographql/react-apollo/issues/3333#issuecomment-520011927 help you with this? If not, would you mind providing a small runnable reproduction that shows this is a problem?

@hwillson it did not help, but after some research I determined the source of the problem and made a reproduction.
So basically my use case is to preload data(first page of items list) on the application start and then use it in a component when I can paginate thru it.
Here is the reproduction. When I use notifyOnNetworkStatusChange = true option and provide the same variables as in my initial query(this is required to get data from cache), then fetchMore will not update my cache on the first call. It seems to work fine with renderProps components.
I am not sure if my use case is correct or this is the expected behavior.

reproduction updated to [email protected] [email protected] problem is still here

I figured out a workaround for this issue, here we use separate useQuery to specifically fetch data from cache and use it until we start pagination

  • having the exact same issue here, BUT with higher order components (withQuery), not hooks.
  • only reproducible in StrictMode
  • if notifyOnNetworkStatusChange is set to false then it works as expected returning new data, but of course loading state is not updated on fetchMore call

"@apollo/react-hoc@^3.0.0"

Thanks for the great reproduction @AlpacaGoesCrazy. We've found the issue and will have a fix ready shortly.

@hwillson [email protected] breaks this again and further versions are broken as well :(
updated reproduction

Just a quick note here - this is fixed in the @apollo/client@beta: https://codesandbox.io/s/competent-lalande-7lm1n

bug happening again :(

It's happening when usingfetchPolicy: 'cache-and-network'.
I am running on the latest v.3 beta.48

I'm noticing the same problem with @apollo/react-hooks ^3.1.5 when setting either notifyOnNetworkStatusChange: true or fetchPolicy: 'cache-and-network'.

In what version has this been fixed?

Was this page helpful?
0 / 5 - 0 ratings