Open9

GraphQL クライアント周りで知っておくと良さそうなこと

ピン留めされたアイテム
seyaseya

🏗工事中なので生暖かい目で見てください

seyaseya

GraphQL クライアントの選び方について

現状大きく次のような選択肢があります。

  • Apollo Client
  • Relay
  • Urql

他に react-query や SWR などの GraphQL に特化していないものを使うこともできるらしいがあまりメリットがピンときていない

https://zenn.dev/seya/scraps/9d64f2e9cae500

seyaseya

GraphQL クライアントにやってもらいたいこと

上記は Web の GraphQL クライアントの比較しか書いておらず、他のプラットフォーム(Flutter とか)でも選定軸が持てるように、もう少し "GraphQL クライアント" と呼ばれるものに何を期待しているのかを書き出してみる。

graphql リクエストを送れる

最低限の機能です。
エンドポイント、認証トークン は共通のものとして準備して、あとはクエリをのっけたらリクエストが作れたらいいでしょう。

キャッシュを保ってくれる

キャッシュの正規化ってなに?

ざっくり言うと同じモデルのもの(GraphQL では id と typename が一緒)は別々のクエリで更新されてもキャッシュが更新されるような形に保つことです。
要するに id と typename から一意にアクセスできるようにすることを指します

graphql-codegen から関数を生成できる

毎回自分で書いたクエリを読み込ませるのはめんどくさいため

seyaseya

graphql-codegen

GraphQL を使っていて、このツールを導入しないのは人権侵害に等しいです。

https://www.graphql-code-generator.com/

graphql-codegen は GraphQL のスキーマ & クエリから色々なものを生成してくれるツールです。
よく生成の対象となるのは次のようなものです。

  • Query や Mutation を呼び出す関数
  • (React & Apollo の場合)上記関数を useQuery で使える hooks

かなり手間が減らせるため導入しない理由がありません!

seyaseya

エラーハンドリングについて

これに関しては色んな宗派があります。まず前提として、GraphQL では基本的にステータスコードは常に 200 です。なので中身のエラーオブジェクトをどう定義するか色んな可能性がある訳です。

普通に data と error オブジェクトを分けて詰める宗派。

Result 型を定義して Union にする

https://sachee.medium.com/200-ok-error-handling-in-graphql-7ec869aec9bc

seyaseya

スキーマが別レポジトリにある場合のパイプラインの構築