Как обработать удаление мутаций с оптимистичным пользовательским интерфейсом в Apollo? - PullRequest
Новая
       52

Как обработать удаление мутаций с оптимистичным пользовательским интерфейсом в Apollo?

0 голосов
/ 22 февраля 2019

https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-mutation-options-optimisticResponse

Существует множество документации и учебных пособий, показывающих использование свойств мутации update и optimisticResponse, связанных с добавлением объектов, но я не видел каких-либо связанных с удалениями.

Я не совсем уверен, как должен выглядеть этот код.С помощью мутации create вы хотите добавить новый элемент в кеш Apollo через update и добавить временную копию в пользовательский интерфейс, используя optimisticResponse.Но с удалением не имеет смысла «показывать» удаление, так как это отсутствие данных.

Это то, что я получил в методе в моем компоненте Vue, что отчасти правильно:

async handleDelete(trackId: number) {
  const result = await this.$apollo.mutate({
    mutation: require('@/graphql/delete-tracks.gql'),
    variables: {
      ids: [trackId],
    },
    update: store => {
      const data: { getTracks: TrackList } | null = store.readQuery({
        query: getTracksQuery,
        variables: this.queryVars,
      });

      if (data && data.getTracks) {
        data.getTracks.data = data.getTracks.data.filter(
          (track: Track) => track.id !== trackId
        );
        --data.getTracks.total;
      }

      store.writeQuery({
        query: getTracksQuery,
        variables: this.queryVars,
        data,
      });
    },
    optimisticResponse: {},
  });

  console.log('result:', result);
},

Я понял, что мне в основном нужно удалить удаленный элемент из кэша Apollo, и эта часть, кажется, прекрасно работает.Хотя визуальное удаление происходит не сразу, так как optimisticResponse нет.Это та часть, о которой я понятия не имею, как писать.

1 Ответ

0 голосов
/ 22 февраля 2019

Понял, это было намного проще, чем я думал.Я просто не совсем понял, как optimisticResponse вступил в игру с update. 

optimisticResponse: {
  __typename: 'Mutation',
  deleteTracks: [trackId],
},

Так что метод update возьмет этот результат из optimisticResponse и удалит этот идентификатор трека из кеша,update будет вызван во второй раз с ответом сервера GraphQL, и кеш Apollo будет согласован.

...