【ApolloClient】キャッシュからMutationにより設定されたデータを取得する方法を教えてください

Question

前提・実現したいこと

React+Typescript+ApolloClientでWebアプリケーションを作成しています。
GraphQLのデータ取得先はShopifyという外部サービスによって用意されたエンドポイントです。

ApolloClientを利用してmutationを発行するとレスポンスの内容がキャッシュに保存されますが、その取得方法がわかりません。

該当のソースコード

import React, { FC } from "react";
import { gql, useMutation } from "@apollo/client";

const createTodo = gql`
  mutation createTodo($todo: string!) {
    createTodo(input: $todo) {
      todo {
        id
        todo
      }
    }
  }
`;

const test: FC = () => {
  const [createTodo] = useMutation(createTodo);
}

上記のようなコードを実行した際、キャッシュにはmutationのレスポンスとして発行したtodoのid,設定したtodoの内容が保存されます。
その内容をキャッシュから取得する方法を知りたいです。

試したこと

以下のようなコードで取得を試みましたができませんでした。

import React, { FC } from "react";
import { gql, useApolloClient } from "@apollo/client";

const readChache = gql`
  {
    todo {
      id
      todo
    }
  }
`;

const client = useApolloClient();
console.log(client.readQuery({query: readChache}));

上記は全てサンプルのソースですが、実際に取り出したいデータをApolloClientDeveloperToolsから見た時の画像も添付しておきます。

日本語、英語問わずこれに関連しそうな記事を読み漁っていますが解決方法が未だわかりません。
どなたかご教示いただけると大変助かります。
宜しくお願い致します。

Answer 1

const test: FC = () => {
  const [createTodo] = useMutation(createTodo);
}

その前にここでエラーが出ていませんか？右側の createTodo は左側の const [createTodo] で宣言されたものであり中身が決まっていないため使用できないはずです。gql 側を CREATE_TODO などして

const test = () => {
  const [createTodo] = useMutation(CREATE_TODO);
}

としましょう。あと細かいですがこの関数の型は void => void です。

まずは Get started で感触を掴んでみることをおすすめします

Comments

[tanana_m]

回答が遅くなり大変失礼しました。
アドバイスいただきありがとうございました。