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.4k
社内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.7k
Other Decks in Technology
See All in Technology
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
350
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
非同期推論システムによるコスト削減と信頼性向上
koki_nishihara
0
220
長期間TiDBを使ってきた話 @ 私たちはなぜNewSQLを使うのかTiDB選定5社が語る選定理由と活用LT / Experiences with TiDB Over Time
chibiegg
2
890
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
120
私が trocco を推す理由
__allllllllez__
1
210
NgRx Signal Store
rainerhahnekamp
0
150
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
Featured
See All Featured
Faster Mobile Websites
deanohume
299
30k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Scaling GitHub
holman
457
140k
Become a Pro
speakerdeck
PRO
11
4.5k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Optimizing for Happiness
mojombo
370
69k
GitHub's CSS Performance
jonrohan
1025
450k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
What's in a price? How to price your products and services
michaelherold
237
11k
Designing the Hi-DPI Web
ddemaree
276
33k
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を駆使してサーバーサイドからフロント
エンドまで開発してみたいエンジニアを募集しています! まとめ