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
社内CSサービスを支えるGraphQLについて.pdf
Search
Peranikov
May 18, 2021
Technology
0
2.7k
社内CSサービスを支えるGraphQLについて.pdf
Mercari CS/CRE Tech Talk #1
Peranikov
May 18, 2021
Tweet
Share
More Decks by Peranikov
See All by Peranikov
Replace to GraphQL with Go
peranikov
0
4.8k
Other Decks in Technology
See All in Technology
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
120
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
150
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
170
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
APIテスト自動化の勘所
yokawasa
7
4.1k
オニオンアーキテクチャで実現した 本質課題を解決する インフラ移行の実例
hryushm
14
3k
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
ガバメントクラウド先行事業中間報告を読み解く
sugiim
1
1.1k
Featured
See All Featured
Writing Fast Ruby
sferik
626
61k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Ruby is Unlike a Banana
tanoku
96
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Navigating Team Friction
lara
183
14k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
GraphQLとの向き合い方2022年版
quramy
43
13k
Transcript
1 社内CSサービスを支えるGraphQLについて Mercari CS/CRE Tech Talk #1 @Peranikov
2 @Peranikov 2018年11月にメルカリ、CSTool teamに入社 ~ 3月: CRE CSTool
Team Software Engineer/Tech Lead 4月~ : CRE Engineering Manager 松久保 敬人 / Yuto Matsukubo 自己紹介
3 本日話さないこと ❌ GraphQLの基礎的な知識
4 CRE CSTool Team について Agenda 社内CSサービスにおけるGraphQLの活用 GraphQLでの開発 02 03
01
5 CRE CSTool Team について
6 このチームの活動を一言で言うと... あんしん・あんぜんなメルカリのマーケット づくりを技術でサポートする CRE CSTool Team について
7 CRE CSTool Team について 現在このチームがサポートしているサービス - Moderation-tool(商品通報対応) - Authorization-tool(社内権限管理)
- admin-graphql(社内向けGraphQLサーバ) - CSTool(モノリシックな旧CSツール)
8 • 違反出品と思われる商品の 通報をCSメンバーが目視で 確認するサービス • 流入元の通報を徐々に移行 中(キーワード検知、 MachineLearning検知 など)
Moderation-tool
9 • 社内の情報・オペレーション を扱える権限を管理する サービス Authorization-tool
10 admin-graphql • 社内サービスから各マイクロ サービスにアクセスするため のハブとなるGraphQLサー バ • 既に2年以上運用している •
今回はここの話をします
11 社内CSサービスにおける GraphQLの活用
12 社内サービスはadmin-graphqlを通して 各microservicesにアクセスしている admin-graphql Other microservices mod backend contact backend
contact frontend mod frontend CSTool(一部API) Monolith API admin-gateway 認証とGraphQLへ のルーティング
13 なぜGraphQLか? 大きい理由として • フロントエンドのためのBFFとしての価値 • Schemaがそのままドキュメントとして活用できる
14 • フロントエンドが欲しいデータを統一されたエンドポイントでアクセスすることがで きる • どのデータがどのサービスにあるかということを意識する必要がない • 欲しいデータを単一のクエリにまとめることができる フロントエンドのためのBFFとしての価値
15 クエリに内包されるAPIの例
16 クエリに内包されるAPIの例 mod-service.GetItemCase item-service.Get user-service.Get mod-service.ListReports
17 • フロントエンドから各マイクロサービスへリクエストを送る際に必ず通過する admin-gatewayが存在する • 認証の他にも各マイクロサービスのgRPCエンドポイントにRESTでアクセスする 機能がある • ただしこの方法はフロントエンドに多段的なリクエストが必要になるため積極的 には使用していない
別のアプローチも存在している Admin-gateway (REST)
18 • 複数チーム跨いだ開発においてはGraphQLでどのデータを取得できるかを共 有する必要が出てくる • Schemaに説明となるコメントを残しそのままドキュメントとして活用する Schemaがそのままドキュメントとして活用できる
19 Playgroundの活用 Schemaをそのままド キュメントとして Playground上で確認 できる
20 GraphQLでの開発
21 • サーバーサイド ◦ Go ◦ gqlgen • フロントエンド ◦
TypeScript ◦ React ◦ @apollo/client ▪ GraphQL client ◦ graphql-codegen ▪ GraphQL Schemaから型定義を生成するツール ◦ Graphql-tag ▪ GraphQL queryをパースしてくれるリテラルを提供してくれる GraphQLでの開発
22 • 社内のmicroservice platform teamが提供してくれているmicroservice向 けのライブラリがほぼGoライブラリで提供されている • mercari tech conf
2018のイベント用アプリでgqlgenが採用されており、 gqlgenコミッターがいるなど社内にノウハウがあった ◦ https://github.com/mercari/mtc2018-web/tree/develop/server • 当時gqlgenはサポートされているGraphQLの機能が他のGoライブラリと比 較して多く、開発も活発だったので安心感があった なぜサーバーサイドでGoを選択したか?
23 チームを跨いだ開発体制 admin-graphql CStool team ・develop ・on-call ・code review other
teams ・開発依頼 CX-Platform team ・Pull Request
24 • CSTool teamがオーナーとしてCode Reviewを担っているため他チームの開 発のボトルネックとなる可能性がある • Schema設計はドメイン設計とも密接に関係してくるので、CSTool teamがレ ビューするために他チームのプロダクトのドメイン知識をある程度知っておく必
要があるがそれも限界がある • 各チームにGraphQLサーバーを設置するのはエンドポイントが分かれるので フロントエンド側の利便性が下がる 開発体制への課題感
25 ❗まだデザインフェーズで実装されていません • 複数のGraphQLサーバーを統括するGraphQLサーバーを立て、Schema情 報を集約する • フロントエンドからはあたかもひとつのGraphQLサーバーにアクセスしているよ うに見える • 参考:
https://www.graphql-tools.com/docs/schema-stitching/ IDEA: Schema Stitching
26 新しい開発体制 admin-graphql- gateway CStool team ・develop ・on-call CX-Platform team
cx-platform- graphql ・develop ・on-call ・code review admin-graphql ・develop ・on-call ・code review stitching stitching
27 • 複数のフロントエンドから各マイクロサービスへのアクセスを統合的に扱うため にGraphQLサーバーが存在する • 複数チームでの開発による課題と、Schema Stitchingによる解決の期待 • CSTool teamではGraphQLやReactを駆使してサーバーサイドからフロント
エンドまで開発してみたいエンジニアを募集しています! まとめ