Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドでの GraphQL(Mutation) の利用例と今後について / Usage...
Search
komaki
July 04, 2019
Programming
2
6k
フロントエンドでの GraphQL(Mutation) の利用例と今後について / Usage example of GraphQL (Mutation) in frontend
komaki
July 04, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
1.1k
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
1
200
Constant integer division faster than compiler-generated code
herumi
2
660
新世界の理解
koriym
0
140
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
170
Langfuseと歩む生成AI活用推進
licux
3
250
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
3
2.1k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
280
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
940
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
120
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
230
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Facilitating Awesome Meetings
lara
55
6.5k
For a Future-Friendly Web
brad_frost
179
9.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
Music & Morning Musume
bryan
46
6.7k
Navigating Team Friction
lara
188
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
Speed Design
sergeychernyshev
32
1.1k
KATA
mclloyd
32
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
Transcript
フロントエンドでのGraphQL(Mutation)の利用例と今後について SPACEMARKET Tech Meetup #2 2019/7/4 Shunsuke Komaki
2 自己紹介 • Shunsuke Komaki(@shun_komaki) • フロントエンドエンジニア • 開発、パフォーマンス改善してます
3 話すこと
4 話すこと • これまでの SPACEMARKET での GraphQL • フロントエンドでの GraphQL
実装 ◦ Apollo Client を使った Mutation 実装の話です • 今後やっていきたいこと • まとめ
5 これまでの SPACEMARKET での GraphQL
6 これまでの SPACEMARKET での GraphQL • React • Redux /
redux-saga • Apollo Client • Flow(徐々に TypeScript 移行中) 開発環境
7 これまでの SPACEMARKET での GraphQL • 参照は GraphQL • 更新は
REST API • 4月にリニューアルした SPACEMARKET EVENT で 更新も GraphQL に!! GraphQL
8 これまでの SPACEMARKET での GraphQL 今日は Mutation をメインに話をすすめていきます❗
9 これまでの SPACEMARKET での GraphQL 開発については前回のミートアップ記事でも紹介しています。 https://blog.spacemarket.com/news/first-tech-meetup/
10 クライアントでの GraphQL 実装
11 ライブラリ
12 ライブラリ GraphQL のバックエンドとフロントエンドのライブラリです。 フロントエンドでは Apollo Client を使いました。 Apollo のパッケージには開発に役立つ、様々な便利なものがあります。
Apollo
13 Apollo Apollo Client 2.0 以降で推奨のキャッシュ実装です。 Redux の Store のようなイメージで扱うことができます。
一度取得したデータを参照したいときは、ネットワーク通信せずにキャッシュを 参照することができます。(Direct Cache Access) apollo-cache-inmemory
14 イメージ server サーバーにリクエスト cache 取得済みのデータは ネットワーク通信なしで キャッシュから読み込 みできる Apollo
Client レスポンスはキャッシュに保存する
15 Error GraphQL エラーやネットワークエラーが発生したときにカスタムロジックを実 装することができます。 エラーログを処理したり、再リクエストしたり。 apollo-link-error
16 Error
17 • レスポンスフィールドに独自定義型である UserError 型を定義 • クライアントはクエリ内にエラーのフィールドに明示的に UserError を書く •
レスポンスに UserError があるときは UI に反映 参考:https://blog.spacemarket.com/code/graphql-ruby-concerns/ バリデーションエラー Error
18 エラーのフィールドを書く Error
19 Mutation
20 Mutation Component
21 Mutation Component react-apollo の Mutation Component <Mutation> コンポーネントの render
props で mutation の実行可能な関数を受 け取ることができます。
22 Mutation Component • UI コンポーネントは Atomic Design 準拠で別リポジトリで管理 •
Container からは Pages か Organisms で UI コンポーネントを呼ぶだけ • Molecules や Atoms は呼ばない • Organisms 以下で複数の Mutation を行いたいイベントハンドラがあるとネス トが深くなりコードが見にくい 課題
23 イメージ
24 イメージ Container では複数の mutation 関数だけを受け取るようにしたい
25 graphql 関数を使う
26 graphql 関数を使う react-apollo の graphql
27 react-apollo の graphql で関数を渡す • Component に mutate という関数を渡す
• mutate を実行すると graphql のパラメータに渡した mutation がリクエストさ れる
28 react-apollo の graphql で関数を渡す graphql の第二引数の config オブジェクトで名前の変更も可能 参考:https://www.apollographql.com/docs/react/api/react-apollo/#graphqlquery-configcomponent
29 複数の関数を扱いたい • react-apollo の compose で複数の graphql 関数をまとめることができる •
単体で使うときと同じように props として渡せる compose を使う
30 イメージ
31 Mutation のレスポンスでキャッシュを更新する
32 Direct Cache Access
33 更新後のデータを反映する • readQuery ◦ キャッシュからデータを取得する ◦ サーバーに通信しない • wirteQuery
◦ キャッシュにデータを書き込む
34 イメージ server リクエスト Apollo Client mutation に書いたフィールドを返す 今回なら id
と name をもつ addUser mutation addUser { addUser { id name } }
35 イメージ キャッシュからデータを取得(readQuery) cache Apollo Client id や name をマージしたオブジェクトをキャッ
シュに書き込み(writeQuery)
36 イメージ
37 課題
38 課題 • 状態管理は Redux まとめて行っていた • Apollo 導入によりサーバーから取得するデータを Apollo
のキャッシュで管理 するので Redux が不要になってきた(と思った) • React の local state に移していくが Redux のほうが扱いやすい部分もあり Redux も残した • 結果的に状態管理が散らばり扱いにくくなった
39 イメージ Redux Apollo 導入前 データストア Apollo Redux React Apollo
導入後 データストア
40 イメージ Redux Apollo 導入前 データストア Apollo Redux React Apollo
導入後 データストア 状態管理が複雑になった!
41 課題 • Redux で管理していた状態を Local State に移していってる • サーバーから取得したデータは
Apollo キャッシュ • 完全には Redux はなくなっていないが、今のところはこの構成に近づいてき ている Apollo + Local State
42 イメージ Apollo Redux React Apollo 導入後 データストア Apollo React
43 状態管理の解決案① • 状態が散らばるのはうれしくない • Apollo で local state の管理も行うこともありかもしれない
• クエリに @client を追加してローカルに向けることも可能 • クライアントで resolver を書くことになる 参考:https://www.apollographql.com/docs/react/essentials/local-state Local State も Apollo で
44 状態管理の解決案② • apollo-link-http を使ってデータの取得は GraphQL • 取得したデータはこれまでどおり Redux 管理
react-apollo を使わずにデータ取得だけを行う?
45 今後やっていきたいこと
46 今後やっていきたいこと① • query と mutation のフィールドが完全一致のときにキャッシュが自動で更新 される • readQuery,
writeQuery が必要ない • 全てのフィールドが一致している必要があるのでフラグメント推奨 参考 : https://www.apollographql.com/docs/react/advanced/caching/#automatic-cache-updates Automatic cache updates
47 今後やっていきたいこと② GraphQL に限った話ではないが、スキーマ定義が必要な GraphQLなら スキーマ定義後にフロントとサーバーが同時進行できて開発効率がよくなりそう。 こちらも詳しくは弊社のブログでも触れているのでよかったら見てください。 スキーマ駆動についてのブログ : https://blog.spacemarket.com/code/schema-driven/
スキーマ駆動開発していきたい
48 まとめ
49 まとめ • 学習コストは高くなかった ◦ ドキュメントが充実している ◦ 標準的な機能のみの使用 • 紹介した機能だけで十分に実装できた
• 参照と更新のどちらも GraphQL ならメリットは大きい • 開発の進め方などはまだまだ改善できる
None