Клиент Apollo GraphQL: как отличить оптимистичный ответ от реального ответа в watchQuery - PullRequest
Новая
       69

Клиент Apollo GraphQL: как отличить оптимистичный ответ от реального ответа в watchQuery

0 голосов
/ 16 мая 2018

Вопрос касается взаимодействия мутации, оптимистического ответа и watchQuery.

У меня есть мутация "myMutation", в которой есть "optimisticResponse" и реализованная функция "update".

Каждый раз, когда я делаю запрос на мутацию, функция «update» вызывается дважды, первый раз с данными оптимистического ответа, а второй с реальными данными. Все в порядке и все, как описано в документации.

В моей функции «update» я изменяю данные кеша «myQuery» с помощью методов readQuery / writeQuery.

Каждый раз, когда я изменяю данные кеша "myQuery", вызывается подписка watchQuery (на основе "myQuery"). Все в порядке и все, как описано в документации.

Но проблема в том, что я не могу различить в своем watchQuery, получаю ли я оптимистичные данные ответа или реальные данные ответа. Это очень важно для меня, потому что реакция должна быть другой, поскольку ценная часть данных может быть предоставлена ​​только сервером. Я должен показывать элемент графического интерфейса со специальным стилем, когда получаю оптимистичный ответ, и я должен запретить любое взаимодействие с ним, пока не получу реальный ответ.

К сожалению, я не могу решить этот вопрос. На первый взгляд, нет никакой разницы между оптимистическими и реальными ответами. Я много гуглил и не нашел решения. Единственная идея, которая у меня есть, - добавить специальное поле к моим данным GraphQL, которое будет показывать, получен ли ответ от сервера или нет. Но выглядит уродливо и плохо пахнет. Я уверен, что должен быть простой правильный способ преодоления проблемы.

1 Ответ

0 голосов
/ 16 мая 2018

Может быть, есть более простой способ или будет в будущем, но вот что я знаю.

Данные в optimisticResponse предоставляются только во время первого вызова для обновления.Здесь вы можете указать своей функции обновления, что она имеет дело с оптимистичными данными.Вы можете поместить любые данные, которые вы хотите там.Я ставлю isOptimistic: true,.

Чтобы справиться с проблемой watchQuery, я рекомендую вам использовать apollo-link-state, чтобы добавить поле или поля только для клиента в области вашей модели данных, где оптимистические аппсеты должныбыть известным на дисплее.Не включайте isOptimistic в свой запрос на мутацию, чтобы знать, что он получен с сервера, а не с оптимистичным ответом, и принудительно переводить его в false, если это не так.См. Этот пример: 

const SUBMIT_COMMENT_MUTATION = gql`
  mutation submitComment($repoFullName: String!, $commentContent: String!) {
    submitComment(
      repoFullName: $repoFullName
      commentContent: $commentContent
    ) {
      postedBy {
        login
        html_url
      }
      createdAt
      content
    }
  }
`;

const CommentsPageWithMutations = ({ currentUser }) => (
  <Mutation mutation={SUBMIT_COMMENT_MUTATION}>
    {mutate => (
      <CommentsPage
        submit={(repoFullName, commentContent) =>
          mutate({
            variables: { repoFullName, commentContent },
            optimisticResponse: {
              __typename: "Mutation",
              submitComment: {
                __typename: "Comment",
                postedBy: currentUser,
                createdAt: new Date(),
                content: commentContent,
                isOptimistic: true // Only provided to update on the optimistic call
              }
            },
            update: (proxy, { data: { submitComment } }) => {
              // Make sure CommentAppQuery includes isOptimistic for each comment added by apollo-link-state
              // submitComment.isOptimistic will be undefined here if it's from the server
              const newComment = { ...submitComment, isOptimistic: submitCommit.isOptimistic ? true : false }
              // Read the data from our cache for this query.
              const data = proxy.readQuery({ query: CommentAppQuery });
              // Add our comment from the mutation to the end.
              data.comments.push(newComment);
              // Write our data back to the cache.
              proxy.writeQuery({ query: CommentAppQuery, data });
            }
          })
        }
      />
    )}
  </Mutation>
);

См. https://www.apollographql.com/docs/link/links/state.html.

...