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

Question

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

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


        

Answer 1

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 (
     ["ListQuery"]}>
      {(doStuff, { loading, error }) => {
        /* ... */
      }}
    
  );
}

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

Hope this helps.