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
GraphQL Serverをつくる・つなぐ / GraphQL Server: constr...
Search
LINE Developers
December 18, 2019
Technology
3
4.1k
GraphQL Serverをつくる・つなぐ / GraphQL Server: constructing and bonding API
12/18に開催されたFROKAN × UIT #2 「年忘れLTバトル」での発表資料です
https://uit.connpass.com/event/152518/
LINE Developers
December 18, 2019
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
LINEスタンプのSREing事例集:大きなスパイクアクセスを捌くためのSREing
line_developers
3
2.3k
Java 21 Overview
line_developers
6
1.2k
Code Review Challenge: An example of a solution
line_developers
1
1.3k
KARTEのAPIサーバ化
line_developers
1
550
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.1k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.6k
A/B Testing at LINE NEWS
line_developers
3
990
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Technology
See All in Technology
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
0
130
「AIと一緒にやる」が当たり前になるまでの奮闘記
kakehashi
PRO
3
140
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
27
13k
UDDのススメ - 拡張版 -
maguroalternative
1
530
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
770
AWS DDoS攻撃防御の最前線
ryutakondo
1
150
Rubyの国のPerlMonger
anatofuz
3
740
人に寄り添うAIエージェントとアーキテクチャ #BetAIDay
layerx
PRO
9
2.2k
OPENLOGI Company Profile for engineer
hr01
1
38k
Cloud WANの基礎から応用~少しだけDeep Dive~
masakiokuda
3
100
Instant Apps Eulogy
cyrilmottier
1
110
20250807_Kiroと私の反省会
riz3f7
0
230
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Applications with DynamoDB
mza
96
6.5k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How to Ace a Technical Interview
jacobian
278
23k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
760
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
301
51k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Transcript
GraphQL Serverをつくる・つなぐ 2019/12/18 FROKAN × UIT #2 @spring_raining
About Me • Tamada Akihiro • Twitter: spring_raining / GitHub:
spring-raining • フロントエンドエンジニア at LINE株式会社 UIT • 普段はLINE公式アカウントを担当 Follow me! >
Agenda • 新規社内サービス立ち上げとGraphQLに出会うまで • GraphQL Serverをつくる • GraphQL Serverをつなぐ
LINE Design System (LDS) • LINEファミリーアプリ横断で用いる次世代のデザインシステム • #linedevday でたくさん情報が出てます LINEのデザインシステム:一貫性を損なうことなくLINEのサービスの速度を上げる
https://linedevday.linecorp.com/jp/2019/sessions/A2-2 デザインシステムにおけるフロントエンド https://linedevday.linecorp.com/jp/2019/sessions/A2-3
https://linedevday.linecorp.com/jp/2019/sessions/A2-2
https://linedevday.linecorp.com/jp/2019/sessions/A2-2
アイコン管理ツール LAICON • LINE社内のアイコン資産を共有するFont Awesome的なやつ • LDSに合わせてトーンを統一したアイコンにリニューアル中
宣伝っぽい導入終了
現状の問題点 • LAICONのリリースにエンジニアが関与しなければならない • ValidなSVGかチェック • アイコンの命名 • アイコンフォントのビルド・デプロイ
LAICON CMS 作るぞ! • アイコンを登録・管理するための社内サービス • プランナー・デザイナー自身がアイコンを追加する • 追加されるアイコンのレビュー・承認作業を行うフォーラム •
サービス毎にアイコンフォントのサブセットを管理できるとなお良さそう
• データ取得/操作をクライアントサイドで制御する言語・実行環境 • GraqhQLサーバーにクエリを投げると、そのとおりのデータが返る GraphQLについて query { user(id: "123") {
id name } } { "data": { "user": { "id": “123", "name": “spring-raining" } } }
なぜGraphQLを使うのか • フロントエンド側にとって、REST APIにはないメリットがいっぱい • APIリクエスト数の削減 • 余分なレスポンスの削減 • 社内サービスではすでに採用事例もたくさん
• 普段業務でサーバサイドを触ることが無いので興味本位で
GraphQL Serverをつくる
• 別途APIサーバーなどのBackendを持つBFFの構造ではなく、DB接 続、Session管理、GraphQLエンドポイントが一体のシンプルな構成 LAICON Backend CLI CMS web page Backend
GraphQL API 社内認証基盤 Session (Redis) DB (MySQL)
DBと接続 • TypeORMを使い、DB (MySQL) と TypeScriptのclassとマッピング • DecoratorでColumn等を定義 • DB関連はTypeORMに全ておまかせ
@Entity('users') class User { @PrimaryColumn() id: string; @Column({ nullable: true }) name?: string; @OneToMany( type => Icon, icon => icon.user ) icons: Icon[]; } @Entity('icons') class Icon { @PrimaryColumn() id!: string; @ManyToOne( type => User, user => user.icons ) user: User; }
GraphQL SDLとTypeScriptの同期 • GraphQL SDL(APIで取得できるデータ構造の定義言語)と TypeScriptは互換性があり、(だいたい)相互変換できる GraphQL SDL TypeScript graphql-codegen
type-graphql
@Entity('users') class User { @PrimaryColumn() @Field() id: string; @Column({nullable: true})
@Field( type => String, {nullable: true} ) name?: string; @OneToMany( type => Icon, icon => icon.user ) @Field(type => [Icon]) icons: Icon[]; } Entityの定義 @Resolver(User) class UserResolver { @Query(() => User, {nullable: true}) async user( @Arg('id') id: string ): Promise<User | null> { // implement } @Mutation(() => User) async updateName( @Arg('id') id: string, @Arg('name') name: string ): Promise<User> { // implement } } Query/Mutationの定義 type Query { user(id: String!): User } type Mutation { updateName( id: String! string: String! ): User! } type User { id: String! name: String icons: [Icon!]! } できあがるSDL
フォーラム機能の実現は少し大変 ユーザーがアイコンを アップロードして申請 デザイナー・エンジニアが レビュー リテイク要求 LAICON アイコンを追加されると 自動でアイコンフォントを リリース
フォーラム機能の実現は少し大変 ユーザーがアイコンを アップロードして申請 デザイナー・エンジニアが レビュー リテイク要求 LAICON アイコンを追加されると 自動でアイコンフォントを リリース
このワークフロー どこかに見覚えはありませんか…?
Pull Request
GitHubのPull Requestと同じ! • 都合の良いことにGitHub API v4はGraphQLで提供されている • 社内のGitHub Enterprise APIをそのまま使ってしまえばいいので
は?? • GitHub上にあるコメント等の情報がそのまま利用できる
GraphQL Serverをつなぐ
Apollo Federation • Apollo Serverが用意する機能 • 複数のGraphQL APIをまとめあげ、APIの連合を作る • それぞれのSchemeのtypeを関連付けることができる
複数のGraphQL Schemeの関連付け • LAICONのユーザーとGitHubアカウントを相互に参照したい • GitHub v4 APIにはUserやBotを抽象化したActorという概念がある ので、Actorのアカウント名からユーザーのObject Typeを引けるよう
にする API Endpoint GitHub v4 API LAICON API
Federated schemaの作成 type User @key(fields: "name") { id: String! name:
String @external icons: [Icon!]! } extend type Actor { user: User @provides(fields: "name") } GitHub側のActor objectに @provides directiveを与える const schema = buildFederatedSchema({ typeDefs, resolvers: { ...resolvers, Actor: { user(parent, args, context, info) { return findUsersByGithubName(parent.login); }, }, }, }); Resolversに実際の取得処理を書く LAICON側のSDL
Apollo Gateway • 用意したApollo serverの立ち上がっ ているURLを指定 • Apollo Federationに対応していれ ば、勝手にQueryやMutationをマージ
してくれる const gateway = new ApolloGateway({ serviceList: [ { name: 'laicon', url: 'http://localhost:5001', }, { name: 'github', url: 'http://localhost:5002', }, ], });
None
まとめ • GitHub v4 APIの利用はいろいろ考えるべき点はあるが、すでにある GraphQL APIを拡張して利用するアイディアは便利 • 世の全てのAPIがGraphQLで提供されてほしい…