Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

[Hooks] fetchMore option updateQuery triggers hook update but with previous data #3333

Closed
AlpacaGoesCrazy opened this issue Aug 9, 2019 · 12 comments · Fixed by #3433
Closed
Assignees

Comments

@AlpacaGoesCrazy
Copy link

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

react-apollo@3.0.0

@dylanwulf
Copy link
Contributor

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

@hwillson
Copy link
Member

hwillson commented Aug 9, 2019

@AlpacaGoesCrazy did #3333 (comment) help you with this? If not, would you mind providing a small runnable reproduction that shows this is a problem?

@AlpacaGoesCrazy
Copy link
Author

AlpacaGoesCrazy commented Aug 12, 2019

@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.

@AlpacaGoesCrazy
Copy link
Author

reproduction updated to react-apollo@3.0.1 apollo-client@2.6.4 problem is still here

@AlpacaGoesCrazy
Copy link
Author

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

@hwillson hwillson self-assigned this Aug 19, 2019
@sunstorymvp
Copy link

  • 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"

@hwillson
Copy link
Member

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

hwillson added a commit that referenced this issue Aug 30, 2019
Prior to this commit, when `notifyOnNetworkStatusChange` is true
calls to `fetchMore` do not wait for `updateQuery` to finish,
before triggering a re-render. This means that after a `fetchMore`
call, components will flip to `loading: true`, then
`loading: false`,  then un-necessarily re-render once more as
`loading: false` with the result from `updateQuery`. This commit
adds a check to see if `fetchMore` has been called and then holds
off on re-rendering the `loading: false` state, until `updateQuery`
has fully finished.

Fixes #3333
hwillson added a commit that referenced this issue Aug 30, 2019
Prior to this commit, when `notifyOnNetworkStatusChange` is true
calls to `fetchMore` do not wait for `updateQuery` to finish,
before triggering a re-render. This means that after a `fetchMore`
call, components will flip to `loading: true`, then
`loading: false`,  then un-necessarily re-render once more as
`loading: false` with the result from `updateQuery`. This commit
adds a check to see if `fetchMore` has been called and then holds
off on re-rendering the `loading: false` state, until `updateQuery`
has fully finished.

Fixes #3333
hwillson added a commit that referenced this issue Aug 30, 2019
Prior to this commit, when `notifyOnNetworkStatusChange` is true
calls to `fetchMore` do not wait for `updateQuery` to finish,
before triggering a re-render. This means that after a `fetchMore`
call, components will flip to `loading: true`, then
`loading: false`,  then un-necessarily re-render once more as
`loading: false` with the result from `updateQuery`. This commit
adds a check to see if `fetchMore` has been called and then holds
off on re-rendering the `loading: false` state, until `updateQuery`
has fully finished.

Fixes #3333
@AlpacaGoesCrazy
Copy link
Author

@hwillson react-apollo@3.1.2 breaks this again and further versions are broken as well :(
updated reproduction

@hwillson
Copy link
Member

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

@Kisepro
Copy link

Kisepro commented Feb 16, 2020

bug happening again :(

@perrosnk
Copy link

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

@johnnyoshika
Copy link

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?

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants