Apollo ClientのCache機構(fetch policy)を視覚的に理解する

この記事は GLOBIS Advent Calendar 2021 の12月9日の記事です。

まえがき

こんにちは、こんばんわ。GLOBISでフロントエンドエンジニア / エンジニアリングマネージャーをしている @shoota です。
GLOBISでは React/TypeScriptでのFull SPAをコア技術のひとつとしてWebサービスの開発を進めており、その中のひとつの知見を改めて記事にまとめました。
今回は弊チームが開発しているReactアプリケーション¹でも利用している、Apollo Clientについてです。

Apollo Clientは非常に強力なCache機構をもっており、fetch policyを中心に、サンプルを用いながらその挙動を視覚的に理解できるようにしてみました。

SPAの開発初期には、クライアント側のCacheをどう取り扱うか迷ったり議論することもしばしばあり、それらを適切に扱っていくための開発コストもかかりがちかと思います。弊チームも例にもれず、Cacheをどう運用してSPAを作っていくか悩んだこともあり、これからのSPA開発の判断の一助となれば嬉しいなと思います。

なおこちらの記事で動かしたサンプルはこちらにあります。

環境構築

まずはSPAを動かす環境をつくります。

SPA / Client

• TODOリストを表示するViewとContainerで構成する
• Apollo ClientのHook関数をGraphQL code generatorで自動生成しておく
• ボタンを押すとgraphqlを実行してデータがReact propsに流れる
• webpack-dev-serverからlocalhost:3035でHTMLとSPAをserveする

表示するページのComponentはこんな感じにしました

type Props = {
  isLoading?: boolean
  todos?: Todo[]
  getContent?: () => void
}

export const Todos: React.VFC<Props> = ({ todos, isLoading, getContent }) => {
  console.log(isLoading, new Date())
  return (
    <Card title="TODO List" style={{ margin: '5%' }}>
      <Button onClick={getContent}>データを取る</Button>
      <Divider />
      <List
        loading={isLoading}
        dataSource={todos}
        renderItem={({ id, contents, finished }) => (
          <List.Item key={id}>
            <Typography.Title level={3}>
              <Space>
                <CheckCircleTwoTone
                  twoToneColor={finished ? '#52c41a' : '#e3e3e3'}
                />
                {contents}
              </Space>
            </Typography.Title>
          </List.Item>
        )}
      />
    </Card>
  )
}

GraphQL Server

• Hasuraを使用
  • 今回は配布されているDockerファイルを利用してlocalhostで実行
  • CORSで動くため HASURA_GRAPHQL_CORS_DOMAIN: 'http://localhost:3035'を指定しておく
• TODOリストのテーブル定義
  • id: number (auto increment)
  • contents: text
  • finished: boolean

実行するクエリはこうなりました

query Todos {
  todos {
    id
    contents
    finished
  }
}

まずは単純なQueryで比較

ではまずQuery実行時のfetchPolicyオプションごとの挙動を見ていきます。
Queryに指定できる fetch policyはこちらのとおりです。

Cacheがどのように働いているかは、初回のデータフェッチがすんだ後に、再度取得したときにリクエストが飛んでいるか？とReactの再レンダーが何度起きているかを見ればわかります。
再レンダーの回数は、Presentational Componentの実行時にloading stateと現在時刻のログを仕込むことで測りました。
データ取得時には、loading状態を挟んでいるので、「Loading中」と「データ取得後」で2回のレンダーが起きます。

Apollo Client / fetch policy pic.twitter.com/dtEHurJbqJ

— 熱量 (@shoota) December 8, 2021

  /* データ取得の返却値は使わずにreadQueryでcacheからわざわざ取り出す */
  useTodosQuery({ fetchPolicy }) // network-only or no-cache
  const data = client.readQuery({ query: TodosDocument })

  return <Todos todos={data?.todos} />