Блог

Я использую postsConnection запрос для бесконечной прокрутки. Он содержит переменные, подобные after . После выполнения мутации с повышением голоса я хочу refetchQueries … вот так 👇

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

Приведенный выше код выдает ошибку, поскольку POST_AUTHOR_QUERY принимает несколько переменных. Вот этот запрос 👇

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

Я не хочу добавлять переменные вручную. Переменные уже сохранены в кэше. Как мне повторно использовать их при использовании refetchQueries ???

Вот несколько ресурсов, которые я прочитал об этой проблеме 👇

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

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

Как упоминалось в проблеме, на которую вы ссылались, вы должны быть в состоянии выполнить следующее:

 import { getOperationName } from 'apollo-link'

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

Из документации:

Пожалуйста, обратите внимание, что если вы вызываете запросы повторной выборки с массивом строк, то клиент Apollo будет искать любые ранее вызванные запросы, которые имеют те же имена, что и предоставленные строки. Затем он повторно выберет эти запросы с их текущими переменными.

getOperationName просто анализирует документ, который вы ему передаете, и извлекает из него имя операции. Вы можете, конечно, указать имя операции самостоятельно в виде строки, но таким образом можно избежать проблем, если имя операции изменится в будущем или вы жирным пальцем.

Если вы не хотите подключаться apollo-link , вы также можете получить это через базовый graphql пакет (обратите внимание, что я использую необязательную цепочку для удобства:

 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]
})