Apollo Clientで画面を跨いだデータを持ち回るやり方（Next.js / React）

Apollo Clientで画面を跨いだデータを持ち回るやり方（Next.js / React）

画面を跨いだデータを持ち回るやり方がいろいろがある中で、今回はApolloの機能を利用し、Reduxなどを使わずに同様のことを実現しようとしたときのやり方を書いておく。

環境

• React v17
• Next.js v10
• Apollo Client v3

やり方

まず、makeVar関数を使って、キャッシュ用の箱を準備しておく

https://www.apollographql.com/docs/react/local-state/reactive-variables/#creating

// /lib/cache.ts
export const catCache: Partial<Record<
  'uuid' | 'name' | 'abbreviation' | 'country', string,
>>[] = makeVar([]);

これはただの箱なので、どういうデータが入るのか型はしっかり定義しておきたい。

次にそのキャッシュからデータを取得する処理を書く

hooksを使うことでReactiveに値を取得できる。
https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#storing

// /pages/index.tsx
const Index = () => {
  const cats = useReactiveVar(catCache);
  return (
    {cats?.map((cat) => {
      return(
      <div key={cat.uuid}>
        <h1>{cat.name}({cat.abbreviation})</h1>
	<p>{cat.country}</p>
      </div>)
    })}
  );
};
export default Index;

別ページからデータを追加する

これもmakeVarの機能としてデータを追加でき、Indexページに遷移したときにデータをReactiveVarから取得することができ、ページを跨いでデータを持ち回れる。

// /pages/add-cat.tsx
const AddCat = () => {
  const handleClick = () => {
    catCache([...catCache(), {
      uuid: 'B10F6410-973D-47E6-A098-28EFB4F17388',
      name: 'American Shorthair',
      abbreviation: 'AmeShor',
      country: 'Europe',
    }]);
  };
  return (
    <button type="button" onClick={handleClick}>Add Cat</button>
  );
};
export default AddCat;

コード自体は空で書いているので若干微妙かもしれないが、このような形で実現は可能である。