Using fetchPolicy='cache-and-network' in useQuery in apollo-client not updating cache on fetchMore

Viewed 1002

I am using the apollo-client for my graphql setup. I have a paginated call for which i use the fetchMore function returned by the useQuery hook. In the fetchMore function i was using its updateQuery param to append the new fetched data to the results in the cache.

fetchMore({
  variables: {
    request: fetchMorerequest,
  },
  updateQuery: (previousResult, { fetchMoreResult }) => {
   const updatedResults = update(previousResult, {
      list: {
        data: { $push: fetchMoreResult.list.data },
        hasMore: { $set: fetchMoreResult.list.hasMore },
      },
    });

  return updatedResults;
  },
});

This was working fine for me.

Now, i have changed my fetchPolicy from the default cache-first to cache-and-network. After that change the updatedResults that i am returning from my updateQuery function are being reflected in my cache, but not being returned in my component. i can see the updated items in my cache in the apollo extension in chrome. But not getting them in my component.

Any idea what can be an issue here? Am i missing something? Please help.

1 Answers

Set nextFetchPolicy: 'cache-first' in your defaultOptions or current query options.

read more here

Related