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.9k
社内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.9k
Other Decks in Technology
See All in Technology
Foundation Model × VisionKit で実現するローカル OCR
sansantech
PRO
0
280
LLM開発を支えるエヌビディアの生成AIエコシステム
acceleratedmu3n
0
370
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
Claude Codeから我々が学ぶべきこと
s4yuba
6
1.7k
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
0
150
データ基盤の管理者からGoogle Cloud全体の管理者になっていた話
zozotech
PRO
0
330
2時間で300+テーブルをデータ基盤に連携するためのAI活用 / FukuokaDataEngineer
sansan_randd
0
130
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
280
LLMでAI-OCR、実際どうなの? / llm_ai_ocr_layerx_bet_ai_day_lt
sbrf248
0
430
20250807_Kiroと私の反省会
riz3f7
0
130
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
120
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Rails Girls Zürich Keynote
gr2m
95
14k
Java REST API Framework Comparison - PWX 2021
mraible
32
8.8k
Fireside Chat
paigeccino
37
3.6k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Facilitating Awesome Meetings
lara
54
6.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
182
54k
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を駆使してサーバーサイドからフロント
エンドまで開発してみたいエンジニアを募集しています! まとめ