Use existing variables when using refetchQueries in react-apollo

Question

I am using postsConnection query for infinite scroll. It contains variables like after. After doing an upvote mutation, I want to refetchQueries... like this

const upvote = await client.mutate({
      mutation: UPVOTE_MUTATION,
      variables: {
        postId: this.props.post.id
      },
      refetchQueries: [
        { query: POST_AUTHOR_QUERY }
      ]
    })

Above code gives error because POST_AUTHOR_QUERY accepts few variables. Here's that query

export const POST_AUTHOR_QUERY = gql`
    query POST_AUTHOR_QUERY($authorUsername: String! $orderBy: PostOrderByInput $after: String){
        postsAuthorConnection(authorUsername: $authorUsername orderBy: $orderBy after: $after) {
                   ....
        }
    }

I do not want to add variables manually. Variables are already stored in the cache. How do I reuse them while using refetchQueries???

Here are a few resources I have read about this issue

https://github.com/apollographql/react-apollo/issues/817

https://github.com/apollographql/apollo-client/issues/1900

score 5 · Answer 1 · answered Apr 11 '19 at 18:46

As mentioned in the issue you linked, you should be able to do the following:

import { getOperationName } from 'apollo-link'

const upvote = await client.mutate({
  // other options
  refetchQueries={[getOperationName(POST_AUTHOR_QUERY)]}
})

From the docs:

Please note that if you call refetchQueries with an array of strings, then Apollo Client will look for any previously called queries that have the same names as the provided strings. It will then refetch those queries with their current variables.

getOperationName simply parses the document you pass it and extracts the operation name from it. You can, of course, provide the operation name yourself as a string instead, but this way avoids issues if the operation name changes in the future or you fat finger it.

That fills one variable `authorUsername` as needed. But `after` variable seem to be blank. — Kumar Abhirup, Apr 12 '19 at 09:01

score 5 · Answer 2 · answered Mar 21 '21 at 15:35

If you don't want to pull in apollo-link, you can also get this via the base graphql package (note that I use optional chaining for convenience:

import { getOperationAST } from 'graphql';


const operationName = getOperationAST(POST_AUTHOR_QUERY)?.name?.value;
// Note that this could technically return `undefined`

const upvote = await client.mutate({
  mutation: UPVOTE_MUTATION,
  variables: {
    postId: this.props.post.id
  },
  refetchQueries: [operationName]
})

Use existing variables when using refetchQueries in react-apollo

2 Answers2