CODEWITHSUNDEEP
cachingreact-apollo
Andy Hansen
Andy Hansen

Reputation: 451

Apollo GraphQl react. How to clear query cache for all variable combinations?

I am using apollo graphql in my react application. Say I have the following query:

query ListQuery($filter: String!) {
   items(filter: $filter) {
     id
     name
   }
}

This query lets me query a list of items using a filter. Say I used filter string A, and then used filter string B. The cache would now contain two entries: ListQuery(A) and ListQuery(B).

Now let's say I use a mutation to add a new item. How can I remove all the cached queries from the cache? So in this case, I want to remove both ListQuery(A) and ListQuery(B) from the cache.

How can I accomplish this?

Upvotes: 38

Views: 38123

Answers (6)

imakethesites
imakethesites

Reputation: 1

I was able to solve this problem by first changing a value in my schema from required to not required, which resulted in values being queried again! After that, I reverted the change and have had no problems!

Upvotes: 0

n1stre
n1stre

Reputation: 6086

Seems like what you need is refetchQueries option/prop to be set to array of query names strings. The documentation states that:

If options.refetchQueries is an array of strings then Apollo Client will look for any queries with the same names as the provided strings and will refetch those queries with their current variables.

So as an example for using graphql HOC you could try to do:

function SomeComponent(props) {

  const performMutation = () => {
    props.doStuff({ refetchQueries: ["ListQuery"] })
      .then(/* ... */)
      .catch(/* ... */)
  }

  return (/* ... */)
}

export default graphql(DO_STUFF, { name: "doStuff" })(SomeComponent)

Or with the Mutation component:

function SomeComponent(props) {
  return (
    <Mutation
      mutation={DO_STUFF}
      refetchQueries={mutationResult => ["ListQuery"]}>
      {(doStuff, { loading, error }) => {
        /* ... */
      }}
    </Mutation>
  );
}

If this is somehow doesn't do what you need, there is also a workaround using update option.

Upvotes: 1

Danoz
Danoz

Reputation: 1087

Try evicting the particular query object from the cache...

cache.evict({ id: "ROOT_QUERY", fieldName: "listQuery" });
cache.gc();

I got this working after reading this: https://danreynolds.ca/tech/2020/05/04/Apollo-3-Client-Cache/

Upvotes: 3

Giang Van
Giang Van

Reputation: 41

Try this: 

 query ListQuery($filter: String!) {
       items(filter: $filter) {
         id
         name
       }
    },
    fetchPolicy: 'no-cache'

More here: https://www.apollographql.com/docs/react/caching/cache-interaction/#bypassing-the-cache

Upvotes: 4

basil
basil

Reputation: 3612

Read about fetch policies options.fetchPolicy

--Edit:--

But it is only as a trick if you want reset only one query. To reset all store see answer by @Nitin : Set fetchPolicy to network-only. Refresh query. Return it to option of your choice.

Upvotes: -5

Nitin
Nitin

Reputation: 129

In your case, you can use the apollo's method client.resetStore();

It will clear the previous cache and then load the active queries.

Upvotes: 12

Related Questions