2

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

update物を追加することを伴うミューテーションとプロパティの使用を示すドキュメントとチュートリアルはたくさんありますが、optimisticResponse削除を伴うものは見たことがありません。

そのコードがどのように見えるべきか正確にはわかりません。create ミューテーションでは、新しいアイテムを 経由updateで Apollo キャッシュに追加し、 を使用して UI に一時コピーを追加し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。それは、どう書けばいいのか全く分からない部分です。

4

1 に答える 1