! { ( : ): ( : ): } { : : : } { : : } Query ID User ID Company User ID String ID Company ID String user id company id id name companyId id name query { ( : ) { } } user id companyId "yukukotani" # ubie query { ( : ) { } } company id name "ubie" # Ubie, Inc. リソースをグラフ構造にする MUST ID参照を用いた構造化では複数リクエストが必要になってしまう スキーマ定義 オペレーション 逐次に2回リクエストを送らないと 会社名に辿り着けない
( : ): } { : : : } { : : } Query ID User User ID String Company Company ID String user id id name company id name # Direct! query { ( : ) { { } } } user id company name "yukukotani" # Ubie, Inc. リソースをグラフ構造にする MUST 実体への直接参照でグラフ構造を作ると、一気に取れる スキーマ定義 オペレーション 一発で会社名まで辿り着ける
! ! ! ! interface ! type implements ! ! ! type implements ! ! { ( : ): ( : [ ] ): [ ] } { : } { : : : } { : : } Query ID Node ID Node Node ID User Node ID String Company Company Node ID String node id nodes ids id id name company id name スキーマ定義 GitHubの場合 `{version}:{__typename}{id}` の形式を base64 エンコードした値。 例: `04:User16265411` → `MDQ6VXNlcjE2MjY1NDExCg==` Shopifyの場合 `gid://shopify/{__typename}/{id}` の形式。 例: `gid://shopify/Product/123`
Buri” company=Company:ubie Company:ubie name=”Ubie, Inc.” query { ( : ) { { } } ( : ) { { } } } users user id id name company id name user id id name company id name "yukukotani" "buri" Query level cache Node level cache Apollo Client のキャッシュ構築 オペレーション クライアントキャッシュ クエリをルートとした グラフ構造に正規化 Node は `{__typename}:{id}` を キーとして参照グラフを形成
! { ( : : ): } { : : } Mutation ID String User User ID String updateUserName userId name id name スキーマ定義 オペレーション mutation { ( : , : , ) { } } updateUserName userId name id name "yukukotani" "Yuku Kotani" updateUserName が User を返す前提になっている。 後から User 以外に変更すると壊れる
{ ( : : ): } { : } Mutation ID String UpdateUserNamePayload UpdateUserNamePayload User updateUserName userId name user BAD GOOD type ! ! ! type ! ! { ( : : ): } { : : } Mutation ID String UpdateUserNamePayload UpdateUserNamePayload User String updateUserName userId name user previousName # ← NEW! 単にフィールドを追加するだけで 追加のリソースを返せる
{ ( : : ): } { : } Mutation ID String UpdateUserNamePayload UpdateUserNamePayload Boolean updateUserName userId name isSuccess BAD type ! ! ! type ! { ( : : ): } { : } Mutation ID String UpdateUserNamePayload UpdateUserNamePayload User updateUserName userId name user GOOD Apollo Client によって 新しい User がキャッシュに反映される