Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

tomohiro shozawa

July 01, 2022
Tweet

Other Decks in Programming

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