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

Transcript

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

   View Slide

2. 自己紹介
   所澤友大
   2018 一休.com
   2019 一休.com レストラン・管理画面リニューアル
   2021 Yahoo! トラベルリニューアル
   2022 新規事業: YADOLINK
   一休でさまざまなプロダクトを開発してきました！
   

   View Slide

3. 一休.com Apollo Client
   レストラン管理画面 なし（axios）
   YADOLINK（写真共有SNS） Apollo Client
   （新）EC① urql
   （新）EC② urql
   （新）予約管理画面 Relay
   一休での GraphQL クライアント採用状況
   

   View Slide

4. GraphQL クライアント、
   何を使っていますか？
   

   View Slide

5. よくわからないけど、無難に Apollo Client 入れとくか〜、ってなりがち
   Apollo Client が圧倒的に人気
   

   View Slide

6. あなたのプロダクトに
   Apollo Client は必要ないかもしれない
   Apollo Client は癖のある、複雑なライブラリです
   

   View Slide

7. ● IE でキャッシュの正規化がめちゃくちゃ遅い...
   ○ InMemoryCache をフォークして対応 = 正規化をOFFにしている
   ● @nuxtjs/apollo が Hydration Error を吐く...
   ● @nuxtjs/apollo の Nuxt3 対応が遅い
   大は小を兼ねる、とはならない。
   必要以上に高機能で複雑なライブラリを使っていると余計なコストを支払うことになる。
   Apollo のせいで思わぬトラブルに巻き込まれること
   も...
   

   View Slide

8. この差は何？ 🤔
   Apollo Client は高機能で複雑なライブラリ
   

   View Slide

9. Apollo Client is a state management library that simplifies managing remote and
   local data with GraphQL.
   ― Apollo Clientは、GraphQLを使用してリモートデータとローカルデータを簡単に管理できる状態管理ライブラリです。 

   

   Apollo Client は状態管理ライブラリ！😳
   Apollo Client の正体
   

   View Slide

10. 不必要な Global State は持たない
    何にでも Redux 入れるピテクス
    Flux の誕生
    状態管理ライブラリは、アプリケーションを複雑にする！
    人類と状態管理の歴史
    

    View Slide

11. そのプロダクトに状態管理ライブラリは
    必要ですか？
    Redux を入れるときと同じように、
    Apollo Client の導入にも慎重になるべきでは？
    

    View Slide

12. Fetch API でも GraphQL サーバーと通信はできる。
    じゃあ、我々はなぜ GraphQL クライアント
    を使うんだっけ？
    

    View Slide

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
    }
    }
    レスポンスの型が欲しいから？
    

    View Slide

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のレスポンスをキャッシュしたいから？
    

    View Slide

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 が向いていないケース
    

    View Slide

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 のキャッシュ機構 = 正規化されたキャッ
    シュ
    

    View Slide

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 の内容を反
    映
    

    View Slide

18. ● ほとんどが検索 Query
    ● ホテル一覧ページは無限スクロールしていない
    ● そもそも一覧ページに Mutation がない
    ● Mutation 後はまるっとデータを再取得してもOK
    ○ 予約
    ○ クーポン獲得、など
    Apollo Client は必要ないかもしれない？
    

    View Slide

19. Apollo Client is a state management library that simplifies managing remote and local
    data with GraphQL.
    ― Apollo Clientは、GraphQLを使用してリモートデータとローカルデータを簡単に管理できる状態管理ライブラリです。 

    

    あまり現実的ではない
    ところで、Apollo Client を Redux や Recoil の代わり
    に使うのは...？
    

    View Slide

20. データ変更の interface が使いづらくない？ 🤔
    素直に Recoil を使おう！
    GraphQL クライアントはシンプルな
    graphq-request がおすすめ
    Local State の変更APIがいまいちこなれていない
    

    View Slide

21. 初期データ
    Mutation を実行してサーバーと同期
    7/12 の席を増やす
    7/13 を販売停止
    7/14 の席を減らす
    例えば一休.com レストランの座席管理画面
    Local State の変更
    レストランの座席管理画面は Vuex + axios の組み合
    わせ
    

    View Slide

22. 状態管理
    が必要？
    いいえ
    graphql-request
    はい
    Mutation 後に
    refetch しても
    いい？
    graphql-request + swr
    urql
    はい
    いいえ
    サーバーと同
    期しない状態
    を持つ？
    graphql-request + Recoil
    はい
    いいえ
    Apollo Client
    urql with Graphqcache
    Relay
    プロダクトのタイプ別、GraphQLクライアントの選び方
    

    View Slide