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
MLH State of the League: 2026 Season
theycallmeswift
0
230
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
240
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
720
Protocol Buffersの型を超えて拡張性を得る / Beyond Protocol Buffers Types Achieving Extensibility
linyows
0
110
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
450
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
260
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
290
AIエージェント開発、DevOps and LLMOps
ymd65536
1
380
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
250
TanStack DB ~状態管理の新しい考え方~
bmthd
2
490
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Producing Creativity
orderedlist
PRO
347
40k
Speed Design
sergeychernyshev
32
1.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Writing Fast Ruby
sferik
628
62k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Six Lessons from altMBA
skipperchong
28
4k
How GitHub (no longer) Works
holman
315
140k
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