Apollo Graphql fetchMore, updateQuery does not update state

Question

I'm currently trying to implement pagination on my posts. Using Apollo graphql here is my useQuery

const { data: postsData, fetchMore } = useQuery(POSTS_BY_USER_DRAFT, {
fetchPolicy: 'network-only',
variables: {
  user: user.id,
  start: 0,
  limit: limit
},
onCompleted: () => {
  setTotal(postsData[model].meta.pagination.total)
}})

and here is my onClick handler for fetching more posts

const loadMorePosts = async () => {
const nextStart = start + limit
setStart(nextStart);
await fetchMore({
  variables: {
    user: user.id,
    offset: nextStart,
    limit: limit,
  },
  updateQuery: (prevResult, { fetchMoreResult }) => {
    if (!fetchMoreResult) {
      return prevResult
    }
    const prevData = prevResult[model].data
    const moreData = fetchMoreResult[model].data

    fetchMoreResult[model].data = [...prevData, ...moreData]
    // fetchMoreResult[model].data = [...moreData]
    return fetchMoreResult
  },
})}

My queries are successful as I do get correctly the data, however postsData does not get updated

[NOTICED]: If I switch fetchMoreResult[model].data = [...prevData, ...moreData] for fetchMoreResult[model].data = [...moreData] my postsData does get updated.

I have tried return { ...fetchMoreResult } and multiple ways of returning data fearing an immutability/comparaison issue but it does not seem to do the job.

Nizar Zizoune · Accepted Answer · 2022-03-29 07:08:51Z

5

I'm not sure why, but setting a fetchPolicy for Apollo will do the job

const client = new ApolloClient({


link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    typePolicies: {
      Publication: {
        merge: true,
      },
      Post: {
        merge: true,
      },
    },
  }),
  defaultOptions: defaultOptions,
})

answered Mar 29, 2022 at 7:08

Nizar Zizoune

5147 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mr. J Over a year ago

I had the same issue using MongoDB Realm and your answer helped me realize that I needed a typePolicy for each custom resolver that made use of fetchMore or refetch.

Kyle Over a year ago

This is a requirement of Apollo's InMemoryCache: apollographql.com/docs/react/caching/cache-configuration/… Just wanted to share the why :)

Collectives™ on Stack Overflow

Apollo Graphql fetchMore, updateQuery does not update state

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related