Pagination issue with Dynamic Data

[jrvaja]

We are making social media application.

Here, user can write post just like other social media.

We have below details:

Let,
total posts: 100
limit: 10 (default)
Offset: 0 (default)
page: 1 (default)

Intended outcome:
Once I am on the page#3 after two-times scroll. Now if I write a new post, I get the new data in GraphQL API response but it does note reflect in query cache.
Here, it should bring up new post inserted as well. But it does not visible as cache is not updated.

Create post Mutation

const response = await this.$apollo.mutate({
  mutation: CREATE_POST_MUTATION,
  variables,
  refetchQueries: [{
    query: POSTS_QUERY,
    fetchPolicy: 'network-only',
    variables: {
      offset: 0,
      limit: this.pagination.offset + this.pagination.limit
    }
  }]
})

Fetch post Query

const variables = {
  offset: 0,
  limit: 10
}

if (newMessage) {
  variables.offset = 0
  variables.limit = this.pagination.offset + this.pagination.limit
}

const result = await this.$apollo.query({
  query: POSTS_QUERY,
  variables,
  fetchPolicy: 'network-only'
})

Fetch More (On Scroll)

this.$apollo.queries.posts.fetchMore({
  variables,
  fetchPolicy: 'network-only',
  updateQuery: (previousResult, { fetchMoreResult }) => {
    const posts = [...previousResult.posts, ...fetchMoreResult.posts]
    return {
      posts: [...posts]
    }
  }
})

Version

• apollo-client@1.9.2
• vue-apollo@3.0.0-alpha.2

[Rahulkukadiya]

I also get same issue while i am use the fetchmore with refechQueries

[jpikora]

In your example the posts query has static variables, so the posts in component will always refer to result of the query for first page (initial variables). By calling fetchMore on a query you are updating result of that query with the result of another query, so for example after loading 3 pages (page = 10 items) it would look like in cache that the query for first page has loaded 30 posts.

Then in your refetchQueries you are using different variables, so this does not affect the result of the original query. Try to refetch with initial variables and you should see the cache updated and results propagated to you posts variable on component, however this will discard posts from all the other pages that were loaded.

Updating paginated results is a complex problem, usually the easiest way is to refetch the firstPage and let user reload the other pages again, if he needs them. This of course has serious impact on UX as the user could lose context. On the other hand you could optimistically update the cache by yourself after certain mutation types. For example if new post is always first, then you could put it to the the cache as first, or remove the post from cache if it gets deleted.

This depends on how many variables (pagination, filtering, sorting) are affecting the results. The more complex the query is the harder it is to update its results in cache, leaving you with the only option that is to refetch.

Hope it helps.