🙌

【Apollo Client】readQueryとwriteQueryを使って、キャッシュ操作を行う。

2022/12/30に公開

GraphQL

今回の記事は前回の記事の続きになります。

今回は前回のプログラムに　リストのアイテム数を画面の表示して、削除のミューテーションが行われたときに、

refetchを使わないで正確なアイテム数を表示したいと思います。

アイテム数を表示するために、lighthouseの@paginateを使いました。
PaginatorInfoのtotalを画面に表示します。
以下詳細ドキュメント

画面

削除ミューテーションが行われたときに、キャッシュを操作してプレイヤー数を変更したいと思います。
refetchを使わない理由は前回の記事を見てください。

コード

前回記事からの代替の差分になります。

  const [deletePlayer] = useMutation(DELETE_PLAYER, {
    update(cache, { data }) {
      console.log(cache);
      const id = cache.identify(data.deletePlayer);
      cache.evict({ id });
      cache.gc();

+      const existFetchPlayers = cache.readQuery({
+        query: FETCH_PLAYERS,
+      });

+      const existFetchPlayersByDeepCopy = JSON.parse(
+        JSON.stringify(existFetchPlayers)
+      );
+      existFetchPlayersByDeepCopy.fetchPlayers.paginatorInfo.total =
+        existFetchPlayersByDeepCopy.fetchPlayers.paginatorInfo.total - 1;

+      cache.writeQuery({
+        query: FETCH_PLAYERS,
+        data: existFetchPlayersByDeepCopy,
+      });
    },
  });

同じplayerデータが、無限スクロールのキャッシュとしてマージされないように修正しました。
つまりincomingのデータが、existingに存在しない場合マージされます。
↑
また後ほど記述するwriteQueryでplayerデータがダブってしまうため

const equal = require("deep-equal");

const client = new ApolloClient({
  uri: "http://127.0.0.1:8000/graphql",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          fetchPlayers: {
            keyArgs: false,
            merge(existing, incoming) {
              if (!existing) return incoming;
              const data = [
                ...existing.data,
                ...incoming.data.filter((player: any) => {
+                  const isExistPlayer = existing.data.find(
+                    (existingPlayer: any) => equal(existingPlayer, player)
+                  );
+                  return !isExistPlayer === undefined ? true : false;
                }),
              ];
              const paginatorInfo = incoming.paginatorInfo;
              return {
                data,
                paginatorInfo,
              };
            },
          },
        },
      },
    },
  }),
});

readQuery

キャッシュに対してクエリを叩くことができます。
ミューテーションを叩く前に、FETCH_PLAYERSクエリを叩いているので、そのときに保存したキャッシュに対してクエリを叩くことになります。

const existFetchPlayers = cache.readQuery({
        query: FETCH_PLAYERS,
      });

今回行いたいのは
fetchPlayers.paginatorInfo.totalからマイナス１したキャッシュを保存することです。

この場合writeQueryを利用して、キャッシュを書き換えたいと思います。

writeQuery

writeQueryを使うことによって、キャッシュのデータを操作することできます。

const existFetchPlayersByDeepCopy = JSON.parse(
        JSON.stringify(existFetchPlayers)
      );
      existFetchPlayersByDeepCopy.fetchPlayers.paginatorInfo.total =
        existFetchPlayersByDeepCopy.fetchPlayers.paginatorInfo.total - 1;

      cache.writeQuery({
        query: FETCH_PLAYERS,
        data: existFetchPlayersByDeepCopy,
      });

readQueryで取得したオブジェクトを編集して、writeQueryのdataに指定してキャッシュを書き換えたいと思います。
まず以下の処理でreadQueryで取得したオブジェクトをdeep copyします。

const existFetchPlayersByDeepCopy = JSON.parse(
        JSON.stringify(existFetchPlayers)
      );

existFetchPlayersByDeepCopy.fetchPlayers.paginatorInfo.total - 1

を書けば良くない？と考える方もいるかもしれませんが、エラーが起こります。
原因は以下のgithubを見ればわかりますが、apolloのv3ではキャッシュは読み取り専用だからです。

deep mergeの部分が一番の躓くポイントなのかなと感じました。
あとは、以下のようにすることで
FETCH_PLAYERSのキャッシュを、existFetchPlayersByDeepCopyを取得した際に保存されるキャッシュの形式で設定できます。

 cache.writeQuery({
        query: FETCH_PLAYERS,
        data: existFetchPlayersByDeepCopy,
      });

最後に確認でlogを仕込んで、キャッシュを変更することでuseQueryが動作しているか、
new InMemoryCache内のmerge関数内にlogを仕込んでwriteQueryしたときに動作しているか確認して終わりにします。

  const { data, fetchMore } = useQuery(FETCH_PLAYERS, {
    onCompleted({ fetchPlayers }) {
+      console.log("こんにちは");
      const Arr: Player[] = [];
      fetchPlayers.data.map(
        (player: { __typename: "Player"; id: string; name: string }) =>
          Arr.push({
            id: player.id,
            name: player.name,
          })
      );
      setPlayers(Arr);
      setHasMorePages(fetchPlayers.paginatorInfo.hasMorePages);
      setCurrentPage(fetchPlayers.paginatorInfo.currentPage);
    },
  });

const client = new ApolloClient({
  uri: "http://127.0.0.1:8000/graphql",
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          fetchPlayers: {
            keyArgs: false,
            merge(existing, incoming) {
+              console.log("hello");
              if (!existing) return incoming;
              const data = [
                ...existing.data,
                ...incoming.data.filter((player: any) => {
                  const isExistPlayer = existing.data.find(
                    (existingPlayer: any) => equal(existingPlayer, player)
                  );
                  return !isExistPlayer === undefined ? true : false;
                }),
              ];
              const paginatorInfo = incoming.paginatorInfo;
              return {
                data,
                paginatorInfo,
              };
            },
          },
        },
      },
    },
  }),
});

動作してます！

では！

画面

コード

readQuery

writeQuery

Discussion