In case of pagination, how can I refresh all pages?

I am using the latest version of react-apollo with meteor

Intended outcome: I have a paginated list. I would like to add a reload button to this list. On reloadig, the current data should be erased, and new data should be fetched from the server on all pages of that list.

Actual outcome: I have tried to trigger .refetch() with this button. But it refetches only the current page. If other pages were visited before the reloading button is triggered, the data of those pages is stored in the store and is not refetched.

Triggering .resetStore() resets the whole store and all queries on the page. Which is obviously an overkill…

My question is:

Am I using .refetch() wrong? What would be the right approach?

Or am I using .resetStore() wrong? Is it possible to reset the store of one specific query?

Thank you!

[dallonf]

Is fetchMore intended to be used for page-based pagination in the UI? It seems more designed for things like infinite scrolling… looking at the examples, it’s not clear how one might implement a more traditional paginated view. I’m talking about this sort of thing:

Note that it’s not guaranteed that a user will click “Next” - they might go from Page 1 to Page 5 and then to Page 3.

[allanesquina]

Hi @furkanDogu,

The workaround I found for that problem was to use an internal cache to control which type of query I want to refetch. E.g.

// Create a cache param in your gql schema
const { loading, error, data, refetch } = useQuery(GET_USERS, {
    variables: {
      number: page, 
      size: numPerPage,
      cache: internalCache('userListPagination').toString(), // Get the cache value each time
    },
    notifyOnNetworkStatusChange: true,
  })


// So when you change something, just renew the cache for that type of query.
// as soon as your query has a new value, the Apollo Client will automatically refetch
internalCache('userListPagination', Date.now())

It’s been working well here so far, if anyone has something better, I want to know too!