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.8k
Other Decks in Technology
See All in Technology
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
300
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
740
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
200
Wasm元年
askua
0
140
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
310
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
hiro_torii
0
130
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
210
Github Copilot エージェントモードで試してみた
ochtum
0
100
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Building Applications with DynamoDB
mza
95
6.5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Producing Creativity
orderedlist
PRO
346
40k
It's Worth the Effort
3n
185
28k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
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を駆使してサーバーサイドからフロント
エンドまで開発してみたいエンジニアを募集しています! まとめ