プロダクトのタイプ別 GraphQL クライアントの選び方

Transcript

1. プロダクトのタイプ別 GraphQLクライアントの選び方
2. 自己紹介 所澤友大 2018 一休.com 2019 一休.com レストラン・管理画面リニューアル 2021 Yahoo! トラベルリニューアル 2022 新規事業: YADOLINK 一休でさまざまなプロダクトを開発してきました！
3. 一休.com Apollo Client レストラン管理画面 なし（axios） YADOLINK（写真共有SNS） Apollo Client （新）EC① urql （新）EC② urql （新）予約管理画面 Relay 一休での GraphQL クライアント採用状況
4. GraphQL クライアント、 何を使っていますか？
5. よくわからないけど、無難に Apollo Client 入れとくか〜、ってなりがち Apollo Client が圧倒的に人気
6. あなたのプロダクトに Apollo Client は必要ないかもしれない Apollo Client は癖のある、複雑なライブラリです
7. • IE でキャッシュの正規化がめちゃくちゃ遅い... ◦ InMemoryCache をフォークして対応 = 正規化をOFFにしている • @nuxtjs/apollo が Hydration Error を吐く... • @nuxtjs/apollo の Nuxt3 対応が遅い 大は小を兼ねる、とはならない。 必要以上に高機能で複雑なライブラリを使っていると余計なコストを支払うことになる。 Apollo のせいで思わぬトラブルに巻き込まれること も...
8. この差は何？ 🤔 Apollo Client は高機能で複雑なライブラリ
9. Apollo Client is a state management library that simplifies managing remote and local data with GraphQL. ― Apollo Clientは、GraphQLを使用してリモートデータとローカルデータを簡単に管理できる状態管理ライブラリです。 
 
 Apollo Client は状態管理ライブラリ！😳 Apollo Client の正体
10. 不必要な Global State は持たない 何にでも Redux 入れるピテクス Flux の誕生 状態管理ライブラリは、アプリケーションを複雑にする！ 人類と状態管理の歴史
11. そのプロダクトに状態管理ライブラリは 必要ですか？ Redux を入れるときと同じように、 Apollo Client の導入にも慎重になるべきでは？
12. Fetch API でも GraphQL サーバーと通信はできる。 じゃあ、我々はなぜ GraphQL クライアント を使うんだっけ？
13. graphql-request + GraphQL Code Generator を使おう！😊 import { GraphQLClient } from 'graphql-request' // 自動生成されたファイル import { getSdk } from './__generated__/sdk' const client = new GraphQLClient ('/api/graphql' ) const sdk = getSdk(client) // 引数・戻り値にバッチリ型がついています！ const data = await sdk.GetNewsfeed ({ first: 20 }) query GetNewsfeed($first: Int!) { feed(first: $first) { id text } } レスポンスの型が欲しいから？
14. ‘/api/posts/1?keyword=夏’ { posts: [ { id: 1, text: ‘...’, … } ] } ‘query Search($keyword: String!) { … }’ + { keyword: ‘夏’ } ‘query Search($keyword: String!) { … }’ + { keyword: ‘海’ } { posts: [ { id: 1, text: ‘...’, … } ] } { posts: [ { id: 1, text: ‘...’, … } ] } • urql がデフォルトで提供するキャッシュ方式 • Query をキーにレスポンスをまるごとキャッシュする • swr + graphql-request を利用した場合も同様のキャッシュ方式になる • シンプル！😊 mutation がほとんどない or mutation 後にデータの再取得をしてOKなときにオススメ。 Document Cache 方式の GraphQL クライアントを使おう！ APIのレスポンスをキャッシュしたいから？
15. Page:1 Pos t Pos t Pos t Page:2 Pos t Pos t Pos t Page:10 Post Post Post … mutation 後に再取得ができないケース。 例えば、無限スクロール中の投稿に “いいね” をつ ける処理 Cache はどの要素が更新されたかを知らないの で、全ページが再取得される 😫 そんなときは Apollo の出番 🚀 Document Cache が向いていないケース
16. Post:1 { id: 1, text: “最初の投稿”, liked: false, … } Post:2 { id: 2, text: “...”, liked: false, … } Post:3 { id: 3, text: “...”, … } Post:4 { id: 4, text: “...”, … } Post:5 { id: 5, text: “...”, … } • レスポンスを正規化し、 type + id をキーにデータをキャッシュする { “posts”: [ { “id”: 1, “text”: “最初”, …}, { “id”: 2, “text”: “”, …}, { “id”: 3, “text”: “”, …}, { “id”: 4, “text”: “”, …}, { “id”: 5, “text”: “”, …} ] } Apollo Client のキャッシュ機構 = 正規化されたキャッ シュ
17. Post:1 { id: 1, text: “最初の投稿”, liked: false, … } Post:2 { id: 2, text: “...”, liked: false, … } Post:3 { id: 3, text: “...”, liked: true, … } Post:4 { id: 4, text: “...”, … } Post:5 { id: 5, text: “...”, … } mutation LikePost { likePost(id: 3) { id liked } } データの再取得なしに1RTTで Mutation の内容を反 映
18. • ほとんどが検索 Query • ホテル一覧ページは無限スクロールしていない • そもそも一覧ページに Mutation がない • Mutation 後はまるっとデータを再取得してもOK ◦ 予約 ◦ クーポン獲得、など Apollo Client は必要ないかもしれない？
19. Apollo Client is a state management library that simplifies managing remote and local data with GraphQL. ― Apollo Clientは、GraphQLを使用してリモートデータとローカルデータを簡単に管理できる状態管理ライブラリです。 
 
 あまり現実的ではない ところで、Apollo Client を Redux や Recoil の代わり に使うのは...？
20. データ変更の interface が使いづらくない？ 🤔 素直に Recoil を使おう！ GraphQL クライアントはシンプルな graphq-request がおすすめ Local State の変更APIがいまいちこなれていない
21. 初期データ Mutation を実行してサーバーと同期 7/12 の席を増やす 7/13 を販売停止 7/14 の席を減らす 例えば一休.com レストランの座席管理画面 Local State の変更 レストランの座席管理画面は Vuex + axios の組み合 わせ
22. 状態管理 が必要？ いいえ graphql-request はい Mutation 後に refetch しても いい？ graphql-request + swr urql はい いいえ サーバーと同 期しない状態 を持つ？ graphql-request + Recoil はい いいえ Apollo Client urql with Graphqcache Relay プロダクトのタイプ別、GraphQLクライアントの選び方