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
1
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
540
著作権とは何か?〜初歩的概念から権利利用法、侵害要件まで
line_developers
5
2.2k
生成AIと著作権 〜生成AIによって生じる著作権関連の課題と対処
line_developers
3
2.1k
マイクロサービスにおけるBFFアーキテクチャでのモジュラモノリスの導入
line_developers
9
3.5k
A/B Testing at LINE NEWS
line_developers
3
980
LINEのサポートバージョンの考え方
line_developers
2
1.3k
Other Decks in Technology
See All in Technology
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
450
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4.1k
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
話題の MCP と巡る OCI RAG ソリューションの旅 - Select AI with RAG と Generative AI Agents ディープダイブ
oracle4engineer
PRO
5
110
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
280
CDKコード品質UP!ナイスな自作コンストラクタを作るための便利インターフェース
harukasakihara
2
190
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
340
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
140
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
260
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
150
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
220
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
280
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
A better future with KSS
kneath
238
17k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
BBQ
matthewcrist
89
9.7k
Being A Developer After 40
akosma
90
590k
Making Projects Easy
brettharned
116
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How to Ace a Technical Interview
jacobian
278
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
330
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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で提供されてほしい…