Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
GraphQL Serverをつくる・つなぐ / GraphQL Server: constructing and bonding API
LINE Developers
PRO
December 18, 2019
Technology
2
3.3k
GraphQL Serverをつくる・つなぐ / GraphQL Server: constructing and bonding API
12/18に開催されたFROKAN × UIT #2 「年忘れLTバトル」での発表資料です
https://uit.connpass.com/event/152518/
LINE Developers
PRO
December 18, 2019
Tweet
Share
More Decks by LINE Developers
See All by LINE Developers
SONiCをLINEのClosネットワークに導入した話 / A story to adopt SONiC in LINE’s Clos Network
line_developers
PRO
1
75
ML PM, DS PMってどんな仕事をしているの?
line_developers
PRO
1
250
LINE iOSエンジニアの日々 / LINE iOS Engineer Days
line_developers
PRO
1
150
“Do you have a virtual router?” Discuss how to use virtual routers
line_developers
PRO
0
580
LINEにおけるネットワーク自動化チーム / Network Automation Team in LINE
line_developers
PRO
0
310
ひとりで書ける! 日英文章作成のコツ / Do-it-yourself! - Tips for writing in Japanese-English
line_developers
PRO
1
430
UIT Survey 2022
line_developers
PRO
0
120
LINE’s Journey; Road to 4 Million Cores in the Private Cloud
line_developers
PRO
0
79
Investigating Kafka performance issue caused by lock contention in xfs
line_developers
PRO
0
250
Other Decks in Technology
See All in Technology
CUEとKubernetesカスタムオペレータを用いた新しいネットワークコントローラをつくってみた
hrk091
1
290
OCIコンテナサービス関連の技術詳細 /oke-ocir-details
oracle4engineer
PRO
0
770
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
760
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
CES_2023_FleetWise_demo.pdf
sparkgene
0
120
Multi-Cloud Gatewayでデータを統治せよ!/ Data Federation with MCG
tutsunom
1
310
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
110
イ良い日ンマを作る(USBストレージ容量偽装の手法) / USB Storage Capacity Faking Techniques
shutingrz
0
460
経営統合をきっかけに会社をエンジニアリングした話 / btconjp-2023
carta_engineering
0
150
Logbii(ログビー) 会社紹介
logbii
0
150
Deep Neural Networkの共同学習
hf149
0
320
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
320
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
117
15k
Debugging Ruby Performance
tmm1
67
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Why You Should Never Use an ORM
jnunemaker
PRO
49
7.9k
For a Future-Friendly Web
brad_frost
166
7.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Visualization
eitanlees
128
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
7
580
Making the Leap to Tech Lead
cromwellryan
117
7.7k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Agile that works and the tools we love
rasmusluckow
320
20k
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で提供されてほしい…