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

フロントエンドでの GraphQL(Mutation) の利用例と今後について / Usage example of GraphQL (Mutation) in frontend

komaki
July 04, 2019

フロントエンドでの GraphQL(Mutation) の利用例と今後について / Usage example of GraphQL (Mutation) in frontend

komaki

July 04, 2019
Tweet

Other Decks in Programming

Transcript

  1. フロントエンドでのGraphQL(Mutation)の利用例と今後について
    SPACEMARKET Tech Meetup #2
    2019/7/4 Shunsuke Komaki

    View Slide

  2. 2
    自己紹介
    ● Shunsuke Komaki(@shun_komaki)
    ● フロントエンドエンジニア
    ● 開発、パフォーマンス改善してます

    View Slide

  3. 3
    話すこと

    View Slide

  4. 4
    話すこと
    ● これまでの SPACEMARKET での GraphQL
    ● フロントエンドでの GraphQL 実装
    ○ Apollo Client を使った Mutation 実装の話です
    ● 今後やっていきたいこと
    ● まとめ

    View Slide

  5. 5
    これまでの SPACEMARKET での GraphQL

    View Slide

  6. 6
    これまでの SPACEMARKET での GraphQL
    ● React
    ● Redux / redux-saga
    ● Apollo Client
    ● Flow(徐々に TypeScript 移行中)
    開発環境

    View Slide

  7. 7
    これまでの SPACEMARKET での GraphQL
    ● 参照は GraphQL
    ● 更新は REST API
    ● 4月にリニューアルした
    SPACEMARKET EVENT で
    更新も GraphQL に!!
    GraphQL

    View Slide

  8. 8
    これまでの SPACEMARKET での GraphQL
    今日は Mutation をメインに話をすすめていきます❗

    View Slide

  9. 9
    これまでの SPACEMARKET での GraphQL
    開発については前回のミートアップ記事でも紹介しています。
    https://blog.spacemarket.com/news/first-tech-meetup/

    View Slide

  10. 10
    クライアントでの GraphQL 実装

    View Slide

  11. 11
    ライブラリ

    View Slide

  12. 12
    ライブラリ
    GraphQL のバックエンドとフロントエンドのライブラリです。
    フロントエンドでは Apollo Client を使いました。
    Apollo のパッケージには開発に役立つ、様々な便利なものがあります。
    Apollo

    View Slide

  13. 13
    Apollo
    Apollo Client 2.0 以降で推奨のキャッシュ実装です。
    Redux の Store のようなイメージで扱うことができます。
    一度取得したデータを参照したいときは、ネットワーク通信せずにキャッシュを
    参照することができます。(Direct Cache Access)
    apollo-cache-inmemory

    View Slide

  14. 14
    イメージ
    server
    サーバーにリクエスト
    cache
    取得済みのデータは
    ネットワーク通信なしで
    キャッシュから読み込
    みできる
    Apollo Client
    レスポンスはキャッシュに保存する

    View Slide

  15. 15
    Error
    GraphQL エラーやネットワークエラーが発生したときにカスタムロジックを実
    装することができます。
    エラーログを処理したり、再リクエストしたり。
    apollo-link-error

    View Slide

  16. 16
    Error

    View Slide

  17. 17
    ● レスポンスフィールドに独自定義型である UserError 型を定義
    ● クライアントはクエリ内にエラーのフィールドに明示的に UserError を書く
    ● レスポンスに UserError があるときは UI に反映
    参考:https://blog.spacemarket.com/code/graphql-ruby-concerns/
    バリデーションエラー
    Error

    View Slide

  18. 18
    エラーのフィールドを書く
    Error

    View Slide

  19. 19
    Mutation

    View Slide

  20. 20
    Mutation Component

    View Slide

  21. 21
    Mutation Component
    react-apollo の Mutation Component
    コンポーネントの render props で mutation の実行可能な関数を受
    け取ることができます。

    View Slide

  22. 22
    Mutation Component
    ● UI コンポーネントは Atomic Design 準拠で別リポジトリで管理
    ● Container からは Pages か Organisms で UI コンポーネントを呼ぶだけ
    ● Molecules や Atoms は呼ばない
    ● Organisms 以下で複数の Mutation を行いたいイベントハンドラがあるとネス
    トが深くなりコードが見にくい
    課題

    View Slide

  23. 23
    イメージ

    View Slide

  24. 24
    イメージ
    Container では複数の mutation 関数だけを受け取るようにしたい

    View Slide

  25. 25
    graphql 関数を使う

    View Slide

  26. 26
    graphql 関数を使う
    react-apollo の graphql

    View Slide

  27. 27
    react-apollo の graphql で関数を渡す
    ● Component に mutate という関数を渡す
    ● mutate を実行すると graphql のパラメータに渡した mutation がリクエストさ
    れる

    View Slide

  28. 28
    react-apollo の graphql で関数を渡す
    graphql の第二引数の config オブジェクトで名前の変更も可能
    参考:https://www.apollographql.com/docs/react/api/react-apollo/#graphqlquery-configcomponent

    View Slide

  29. 29
    複数の関数を扱いたい
    ● react-apollo の compose で複数の graphql 関数をまとめることができる
    ● 単体で使うときと同じように props として渡せる
    compose を使う

    View Slide

  30. 30
    イメージ

    View Slide

  31. 31
    Mutation のレスポンスでキャッシュを更新する

    View Slide

  32. 32
    Direct Cache Access

    View Slide

  33. 33
    更新後のデータを反映する
    ● readQuery
    ○ キャッシュからデータを取得する
    ○ サーバーに通信しない
    ● wirteQuery
    ○ キャッシュにデータを書き込む

    View Slide

  34. 34
    イメージ
    server
    リクエスト
    Apollo Client
    mutation に書いたフィールドを返す
    今回なら id と name をもつ addUser
    mutation addUser {
    addUser {
    id
    name
    }
    }

    View Slide

  35. 35
    イメージ
    キャッシュからデータを取得(readQuery)
    cache Apollo Client
    id や name をマージしたオブジェクトをキャッ
    シュに書き込み(writeQuery)

    View Slide

  36. 36
    イメージ

    View Slide

  37. 37
    課題

    View Slide

  38. 38
    課題
    ● 状態管理は Redux まとめて行っていた
    ● Apollo 導入によりサーバーから取得するデータを Apollo のキャッシュで管理
    するので Redux が不要になってきた(と思った)
    ● React の local state に移していくが Redux のほうが扱いやすい部分もあり
    Redux も残した
    ● 結果的に状態管理が散らばり扱いにくくなった

    View Slide

  39. 39
    イメージ
    Redux
    Apollo 導入前
    データストア
    Apollo
    Redux
    React
    Apollo 導入後
    データストア

    View Slide

  40. 40
    イメージ
    Redux
    Apollo 導入前
    データストア
    Apollo
    Redux
    React
    Apollo 導入後
    データストア
    状態管理が複雑になった!

    View Slide

  41. 41
    課題
    ● Redux で管理していた状態を Local State に移していってる
    ● サーバーから取得したデータは Apollo キャッシュ
    ● 完全には Redux はなくなっていないが、今のところはこの構成に近づいてき
    ている
    Apollo + Local State

    View Slide

  42. 42
    イメージ
    Apollo
    Redux
    React
    Apollo 導入後
    データストア
    Apollo React

    View Slide

  43. 43
    状態管理の解決案①
    ● 状態が散らばるのはうれしくない
    ● Apollo で local state の管理も行うこともありかもしれない
    ● クエリに @client を追加してローカルに向けることも可能
    ● クライアントで resolver を書くことになる
    参考:https://www.apollographql.com/docs/react/essentials/local-state
    Local State も Apollo で

    View Slide

  44. 44
    状態管理の解決案②
    ● apollo-link-http を使ってデータの取得は GraphQL
    ● 取得したデータはこれまでどおり Redux 管理
    react-apollo を使わずにデータ取得だけを行う?

    View Slide

  45. 45
    今後やっていきたいこと

    View Slide

  46. 46
    今後やっていきたいこと①
    ● query と mutation のフィールドが完全一致のときにキャッシュが自動で更新
    される
    ● readQuery, writeQuery が必要ない
    ● 全てのフィールドが一致している必要があるのでフラグメント推奨
    参考 : https://www.apollographql.com/docs/react/advanced/caching/#automatic-cache-updates
    Automatic cache updates

    View Slide

  47. 47
    今後やっていきたいこと②
    GraphQL に限った話ではないが、スキーマ定義が必要な GraphQLなら
    スキーマ定義後にフロントとサーバーが同時進行できて開発効率がよくなりそう。
    こちらも詳しくは弊社のブログでも触れているのでよかったら見てください。
    スキーマ駆動についてのブログ : https://blog.spacemarket.com/code/schema-driven/
    スキーマ駆動開発していきたい

    View Slide

  48. 48
    まとめ

    View Slide

  49. 49
    まとめ
    ● 学習コストは高くなかった
    ○ ドキュメントが充実している
    ○ 標準的な機能のみの使用
    ● 紹介した機能だけで十分に実装できた
    ● 参照と更新のどちらも GraphQL ならメリットは大きい
    ● 開発の進め方などはまだまだ改善できる

    View Slide

  50. View Slide