question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using pagination with fetchMore and fetchPolicy involving network together causes bug where next page data is cleared

See original GitHub issue

Intended outcome: fetchMore and updateQuery for pagination via useQuery should work well without a bug with fetchPolicy that involves network such as 'network-only', 'cache-and-network', etc.

Actual outcome: fetchMore and updateQuery works, but updateQuery immediately triggers apollo’s query observables to refetch query with old variables (with pagination cursor = null). Refetched data (where cursor = null) overwrites result from updateQuery causing new page data to be appended and then immediately removed because of the overwrite. This clearly seems like a bug of apollo client.

How to reproduce the issue: Implement useQuery pagination with cursor and updateQuery from official example and use fetchPolicy: "cache-and-network" or "network-only".

Versions System: OS: macOS 10.15.3 Binaries: Node: 13.13.0 - /usr/local/bin/node Yarn: 1.22.4 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/bin/npm Browsers: Chrome: 81.0.4044.138 Firefox: 75.0 Safari: 13.0.5 npmPackages: @apollo/client: ^3.0.0-beta.49 => 3.0.0-beta.49 @apollo/link-context: ^2.0.0-beta.3 => 2.0.0-beta.3 @apollo/link-error: ^2.0.0-beta.3 => 2.0.0-beta.3 @apollo/link-persisted-queries: ^1.0.0-beta.0 => 1.0.0-beta.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:16
  • Comments:21 (5 by maintainers)

github_iconTop GitHub Comments

30reactions
chrisbrookscommented, Sep 11, 2020

Maybe a good idea to actually add nextFetchPolicy into the docs next time instead of everyone spending hours working out why the initial query just fired again…like I just did. Also how many breaking changes can you possible introduce in a new version? Migration is basically just changing the entire application zzzzzzzz.

9reactions
robertsmitcommented, Aug 11, 2020

@benjamn Yes, that is the case. And I use as fetchPolicy ‘cache-and-network’. version 3.1.2

I currently circumvent this behaviour of the data of the original query being refetched, by using the current option values: { fetchPolicy: ‘cache-and-network’, nextFetchPolicy: ‘cache-first’, }

by using nextFetchPolicy ‘cache-first’ it wil not refetch the original query after calling fetchmore. But I hope that for the next releases this should not be necessary.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Advanced topics on caching in Apollo Client
Pagination utilities. Incremental loading: fetchMore. You can use the fetchMore function to update a query's cached result with data returned by a followup ......
Read more >
fetch more pagination or network-only policy in apollo-react ...
I can not display fixed number of results on the page. Data from query is different because of cache and bigger by fixed...
Read more >
Pagination – Angular - GraphQL Code Generator
Apollo lets you do pagination with a method called fetchMore . You need to specify what query and variables to use for the...
Read more >
Pagination - Client (React) - Apollo GraphQL Docs
In Apollo, the easiest way to do pagination is with a function called fetchMore ... fetchPolicy: "cache-and-network" } ); return ( <Feed entries={data.feed ......
Read more >
usePaginationFragment - Relay
API reference for usePaginationFragment, a React hook used to paginate a connection. ... You can use usePaginationFragment to render a fragment that uses...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found