$30 off During Our Annual Pro Sale. View Details »

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

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

tomohiro shozawa

July 01, 2022
Tweet

More Decks by tomohiro shozawa

Other Decks in Programming

Transcript

  1. 自己紹介 所澤友大 2018 一休.com 2019 一休.com レストラン・管理画面リニューアル 2021 Yahoo! トラベルリニューアル

    2022 新規事業: YADOLINK 一休でさまざまなプロダクトを開発してきました!
  2. 一休.com Apollo Client レストラン管理画面 なし(axios) YADOLINK(写真共有SNS) Apollo Client (新)EC① urql

    (新)EC② urql (新)予約管理画面 Relay 一休での GraphQL クライアント採用状況
  3. • IE でキャッシュの正規化がめちゃくちゃ遅い... ◦ InMemoryCache をフォークして対応 = 正規化をOFFにしている • @nuxtjs/apollo

    が Hydration Error を吐く... • @nuxtjs/apollo の Nuxt3 対応が遅い 大は小を兼ねる、とはならない。 必要以上に高機能で複雑なライブラリを使っていると余計なコストを支払うことになる。 Apollo のせいで思わぬトラブルに巻き込まれること も...
  4. Apollo Client is a state management library that simplifies managing

    remote and local data with GraphQL. ― Apollo Clientは、GraphQLを使用してリモートデータとローカルデータを簡単に管理できる状態管理ライブラリです。 
 
 Apollo Client は状態管理ライブラリ!😳 Apollo Client の正体
  5. 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 } } レスポンスの型が欲しいから?
  6. ‘/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のレスポンスをキャッシュしたいから?
  7. 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 が向いていないケース
  8. 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 のキャッシュ機構 = 正規化されたキャッ シュ
  9. 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 の内容を反 映
  10. • ほとんどが検索 Query • ホテル一覧ページは無限スクロールしていない • そもそも一覧ページに Mutation がない •

    Mutation 後はまるっとデータを再取得してもOK ◦ 予約 ◦ クーポン獲得、など Apollo Client は必要ないかもしれない?
  11. Apollo Client is a state management library that simplifies managing

    remote and local data with GraphQL. ― Apollo Clientは、GraphQLを使用してリモートデータとローカルデータを簡単に管理できる状態管理ライブラリです。 
 
 あまり現実的ではない ところで、Apollo Client を Redux や Recoil の代わり に使うのは...?
  12. 初期データ Mutation を実行してサーバーと同期 7/12 の席を増やす 7/13 を販売停止 7/14 の席を減らす 例えば一休.com

    レストランの座席管理画面 Local State の変更 レストランの座席管理画面は Vuex + axios の組み合 わせ
  13. 状態管理 が必要? いいえ graphql-request はい Mutation 後に refetch しても いい?

    graphql-request + swr urql はい いいえ サーバーと同 期しない状態 を持つ? graphql-request + Recoil はい いいえ Apollo Client urql with Graphqcache Relay プロダクトのタイプ別、GraphQLクライアントの選び方