GraphQLにおけるクライアントキャッシュ戦略

by KazukiHayase

Slide 1

Slide 1 text

GraphQLにおけるクライアントキャッシュ戦略 2023.03.15リクルート × BASE × バイセル【第1回フロントエンド勉強会】React & GraphQL 2023.03.15

Slide 2

Slide 2 text

自己紹介名前：早瀬和輝出身：愛知県名古屋市経歴：BuySell Technologiesに2021年に新卒入社趣味：開発、マンガ、アニメ、ベース、バスケ Twitter：@KazukiHayase

Slide 3

Slide 3 text

はじめに ● 今回話すのはクライアント側のキャッシュについて ● CDNなどのキャッシュについては触れないです

Slide 4

Slide 4 text

アジェンダキャッシュの仕組み 01 キャッシュにおける課題 02 課題解決へのアプローチ 03 まとめ 04

Slide 5

Slide 5 text

アジェンダキャッシュの仕組み 01 キャッシュにおける課題 02 課題解決へのアプローチ 03 まとめ 04

Slide 6

Slide 6 text

キャッシュの仕組み ● いくつかのGraphQL Clientにはキャッシュ機構が備わっている ○ Apollo Client, Relay, urql ● キャッシュを活用することで無駄なリクエストが減る ● そのためにはキャッシュ機構の正しい理解が必要

Slide 7

Slide 7 text

キャッシュ機構において重要な要素データの正規化 01 キャッシュの利用条件 02

Slide 8

Slide 8 text

データの正規化 ● レスポンスデータは正規化されてキャッシュに保存される ● 正規化することで ○ キャッシュへのアクセスが早くなる ○ データサイズを小さくすることができる

Slide 9

Slide 9 text

正規化の流れ 1. Queryの結果を個別のオブジェクトに分割 2. 分割したオブジェクトに一意な識別子を割り当て 3. フラットなデータ構造に格納

Slide 10

Slide 10 text

正規化の流れの例右図のような SchemaとQueryを考える ※ Apollo Clientを例に解説しますが、他のClientでも大枠の流れは同じです

Slide 11

Slide 11 text

正規化の流れの例 Queryの実行結果として右図のようなレスポンスを受け取る

Slide 12

Slide 12 text

正規化の流れの例 1. Queryの結果を個別のオブジェクトに分割 2. 分割したオブジェクトに一意な識別子を割り当て 3. フラットなデータ構造に格納

Slide 13

Slide 13 text

正規化の流れの例 1. Queryの結果を個別のオブジェクトに分割 2. 分割したオブジェクトに一意な識別子を割り当て 3. フラットなデータ構造に格納 Task:1 Task:2 Task:3

Slide 14

Slide 14 text

正規化の流れの例 1. Queryの結果を個別のオブジェクトに分割 2. 分割したオブジェクトに一意な識別子を割り当て 3. フラットなデータ構造に格納

Slide 15

Slide 15 text

キャッシュの利用条件 ● データが全てキャッシュにある場合はキャッシュを利用 ● 一部でもデータがキャッシュにない場合はリクエストを実行

Slide 16

Slide 16 text

キャッシュの利用条件 ● FetchTasks→FetchTasks2 ○ キャッシュが利用できない ○ リクエストは2回 ● FetchTasks2→FetchTasks ○ キャッシュが利用できる ○ リクエストは1回

Slide 17

Slide 17 text

アジェンダキャッシュの仕組み 01 キャッシュにおける課題 02 課題解決へのアプローチ 03 まとめ 04

Slide 18

Slide 18 text

キャッシュにおける課題一部でもデータがキャッシュにない場合はリクエストが実行される Queryの定義によっては全くキャッシュが利用されない

Slide 19

Slide 19 text

キャッシュにおける課題逆に常にキャッシュが利用されるようにしようとすると考慮するべきことが多い

Slide 20

Slide 20 text

キャッシュにおける課題仮に常にキャッシュが利用されるようにしようとすると ● Queryの実行順序を工夫する ● オブジェクト単位でQueryをまとめる ● アプリケーション全体でQueryを使い回す

Slide 21

Slide 21 text

できなくはないが、、

Slide 22

Slide 22 text

個人的にはデメリットの方が大きいと判断

Slide 23

Slide 23 text

キャッシュにおける課題 ● Queryの実行順序を工夫する ○ →実行順序まで考慮するのは現実的ではない ● オブジェクト単位でQueryをまとめる ○ →オーバーフェッチにつながる、RESTとほぼ変わらない ● アプリケーション全体でQueryを使い回す ○ →Query変更時の影響範囲が広い

Slide 24

Slide 24 text

アジェンダキャッシュの仕組み 01 キャッシュにおける課題 02 課題解決へのアプローチ 03 まとめ 04

Slide 25

Slide 25 text

課題解決へのアプローチページ単位でのキャッシュ最適化 01 データを 3種類に分類 02

Slide 26

Slide 26 text

ページ単位でのキャッシュ最適化 ● ページ単位でキャッシュ最適化を考える ● アプリケーション全体でのキャッシュの利用は考慮しない ○ Queryによってはキャッシュが利用される場合もある

Slide 27

Slide 27 text

ページ単位でのキャッシュ最適化ページを跨いだキャッシュの利用を考慮しないことで ● ページで使用するデータを宣言的に定義できる ○ GraphQLの良さを最大限活かす ● ページ同士が疎結合になる ○ Queryの変更の影響範囲が閉じる

Slide 28

Slide 28 text

データを3種類に分類データを3種類に分類して、分類ごとにQueryを定義することでキャッシュを利用しやすくする

Slide 29

Slide 29 text

データを3種類に分類コンテンツデータマスタデータ汎用マスタデータ 01 02 03

Slide 30

Slide 30 text

コンテンツデータ ● コンテンツ表示用のデータ ● アクションに応じてQueryを定義する ○ e.g. 初回表示、検索、モーダル ○ 1ページに複数のQueryが定義されていることもある ● 同じアクションであればキャッシュが利用される

Slide 31

Slide 31 text

マスタデータ ● マスタデータやメタデータなどのシステム的に必要なデータ ● 最初のレンダリング時のみリクエストが必要 ● 2回目以降はキャッシュを利用する

Slide 32

Slide 32 text

汎用マスタデータ ● 基本的には使用しない ○ コンテンツデータ・マスタデータのみの運用をまずは考える ● アプリケーション全体で利用するかつサイズの大きいデータ ● どうしてもアプリケーション全体でキャッシュしたい際に使用 ● オーバーフェッチを許容

Slide 33

Slide 33 text

データ分類フローユーザーのアクションによって取得データが変わるか？コンテンツデータマスタデータ汎用マスタデータ Yes ページごとで重複して取得する事にパフォーマンス上の懸念があるか？ No Yes No

Slide 34

Slide 34 text

全体像 PageComponentA PageComponentA ContentQuery PageComponentA MasterQuery GeneralMasterQuery PageComponentB PageComponentB ContentQuery PageComponentB MasterQuery ページコンポーネントごとにコンテンツ・マスタデータのQueryを定義汎用マスタデータのQueryはコンポーネントの外で定義

Slide 35

Slide 35 text

データ分類の例タスク検索画面

Slide 36

Slide 36 text

コンテンツデータ ● タスクの検索結果のデータ ● 検索の度に表示内容が変わる ● 同じ検索条件ならキャッシュを利用

Slide 37

Slide 37 text

マスタデータ ● 検索で利用する選択肢データ ● 検索結果に関係なくデータは同じ ● 初回以降はキャッシュを利用

Slide 38

Slide 38 text

汎用マスタデータ ● 検索で利用する選択肢データ ● 数千規模のデータかつ他の画面でも使うと仮定 ● この画面のみの利用であればマスタデータに含める

Slide 39

Slide 39 text

アジェンダキャッシュの仕組み 01 キャッシュにおける課題 02 課題解決へのアプローチ 03 まとめ 04

Slide 40

Slide 40 text

まとめ ● キャッシュの仕組みを踏まえた上での戦略 ○ ページ単位でのキャッシュ最適化 ○ データを3種類に分類 ● GraphQLの良さを生かしつつ、キャッシュも活用できる ● ただし懸念はある ○ 汎用データが増えすぎると今回紹介した課題が再度浮上する

Slide 41

Slide 41 text

THANK YOU