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
生成AI利用プログラミング:誰でもプログラムが書けると 世の中どうなる?/opencampus202508
okana2ki
0
190
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
260
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
290
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
2
4.4k
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
380
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
300
あとはAIに任せて人間は自由に生きる
kentaro
3
1.1k
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
rrreeeyyy
0
130
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
250
認知戦の理解と、市民としての対抗策
hogehuga
0
300
開発と脆弱性と脆弱性診断についての話
su3158
1
1.1k
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
Featured
See All Featured
Navigating Team Friction
lara
189
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Speed Design
sergeychernyshev
32
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
A designer walks into a library…
pauljervisheath
207
24k
Code Review Best Practice
trishagee
70
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Writing Fast Ruby
sferik
628
62k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
560
Statistics for Hackers
jakevdp
799
220k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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を駆使してサーバーサイドからフロント
エンドまで開発してみたいエンジニアを募集しています! まとめ