How should I update queried data after fetchMore is executed with new variables?

Help
,
1

Hi, for context, I have a bunch of posts in my application, and within each post, you can swipe through pages to view different comments on each page, and you can paginate through these comments by scrolling down on the respective post. So, I have a query as such:

getComments(postID: String!, pageIndex: Int!, offset: Int!, limit: Int!): [Comment]

The offset and limit are used for pagination on a comment within a page. So, on my client I have the following to tell it how to update the cache:

getComments: offsetLimitPagination(["postID", "pageIndex"])

I have the following query which is executed when each post is rendered:

const {
	data: commentData,
	fetchMore: fetchMoreComments,
	refetch: refetchComments
} = useQuery(GET_COMMENTS, {
	variables: { postID, pageIndex: index, offset: 0, limit: 20 }
})

To paginate the comments within each page:

// currentPage is just a state within the component
fetchMoreComments({ variables: { postID, pageIndex: currentPage, offset: commentData.comments.length, limit: 20 } })

When you swipe to a different page, I tried using both fetchMoreComments and refetchComments as such:

// Here currentPage is updated, so this is called on every page change
fetchMoreComments({ variables: { postID, pageIndex: currentPage, offset: 0, limit: 20 } })

I observe that my cache is updated with the following:
image
Initially only the first query was in the cache, and as I changed pages the other queries are cached.

But, the problem is commentData retains its original data on the first query. When I tried using refetchComments instead, the new queries are not run as I do not see them in my cache, and in my resolver I see that it’s the original query that’s being run, even though I passed in a new set of variables.

My thoughts are that I should be using refetch instead of fetchMore as I’m not paginating, but obtaining a new set of data altogether. But I’m not sure how I’m supposed to be refetching with new variables since it doesn’t seem to be triggering correctly.

How should I be remedying this?

Thanks!

2

I’m probably not understanding the issue correctly, but shouldn’t you be able to just not use refetch or fetchMore at all? When your pageIndex variable changes, the useQuery hook should automatically make a network request if that page’s data is not in the cache yet. It should just work out of the box. And then you’d use fetchMore solely for pagination.

1 Like
3

Oh yes, you are right!

I was using another state variable based on the route and this wasn’t updated as the actual index changed, and I guess that’s why refetch/fetchMore weren’t being triggered correctly.

I updated it to the actual index that changes as the pages are swiped and this works correctly.

Thank you for highlighting this, although I’m still curious - why is it that when I do a fetchMore, a separate query gets cached correctly but the local state of commentData doesn’t get updated?