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サーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
Search
Masayuki Izumi
April 19, 2024
Programming
4
900
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
tsukiji.graphql x ハッカー鮨
https://tsukiji-graphql.connpass.com/event/314173/
Masayuki Izumi
April 19, 2024
Tweet
Share
More Decks by Masayuki Izumi
See All by Masayuki Izumi
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
izumin5210
13
5.1k
雑なコード生成のすすめ #nihonbashijs 8 / zatsu-code-generation
izumin5210
0
45
React Server Components で複雑さに立ち向かう #コンポーネント_findy / findy 2023-10-04
izumin5210
10
2.8k
みんなで育てる GraphQL スキーマ, それを支える Protobuf / GraphQL and Protobuf #tech_stand
izumin5210
7
3.4k
GraphQL 導入の反省と再挑戦 / jsconf jp 2021
izumin5210
11
7.9k
HTTP クライアントを作ろうとして学ぶ、使いやすいインタフェース / #GoCon_Sendai 2020
izumin5210
7
4.9k
個人の・組織の Go 筋を強化する / Gophers Code Reading Party
izumin5210
1
300
今あらためて読み直したい Go 基礎知識 その2 / golang.tokyo #25
izumin5210
10
9k
CLI ツール開発を支える技術 2019春 / Techniques that support building CLI tools, 2019 Spring
izumin5210
8
3.4k
Other Decks in Programming
See All in Programming
Deep Dive into React Stream/Serialize
mugi_uno
3
560
新宿ダンジョンを可視化してみた
satoshi7190
3
370
Git Rebase
bkuhlmann
11
1.6k
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
440
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
420
ゆるい個人開発のススメ
kuroppe1819
10
1k
Going beyond Apache Parquet's default settings
xhochy
0
120
Fragment Composition of GraphQL
quramy
13
1.4k
Fast JSX: Don't clone props object #28768
yossydev
1
160
Node.js v22 で変わること
yosuke_furukawa
PRO
11
3.9k
2 週間で Twitter Bot を作ってみた
contour_gara
0
760
Featured
See All Featured
Building an army of robots
kneath
300
41k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Language of Interfaces
destraynor
151
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Building Your Own Lightsaber
phodgson
100
5.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Designing for humans not robots
tammielis
248
25k
Teambox: Starting and Learning
jrom
128
8.4k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Writing Fast Ruby
sferik
622
60k
Transcript
tsukiji.graphql GraphQLサーバの構成要素を整理する 2024-04-18 @izumin5210 Photo by Zaini Izzuddin on Unsplash
@izumin5210 ▶ バックエンドや Web フロントエンドを書きます - Go, TypeScript, React, GraphQL,
Protobuf, Connect, … ▶ API スキーマが好き ▶ ISUCON に出るのが得意 ▶ eddeee888/gcg-typescript-resolver-files と github.com/99designs/gqlgen が好き LayerX, ex-Wantedly
GraphQL Server、 何で作ってますか? …って聞かれたら、なにを答えますか? ※ Node.js での例が中心となりますが、他の言語でも通じる話をします。多分。
GraphQL サーバ、何で作ってますか? ▶ TypeScript, Go, Ruby, … ▶ NestJS, Apollo
Server, gqlgen, … ▶ graphql-yoga, graphql-ruby, … ▶ スキーマファースト, コードファースト ▶ … GraphQL Server を構成する技術にもいろいろある
そもそも「GraphQL サーバを実装する」とは ▶ GraphQL の仕様はトランスポート層に依存しない - HTTP の上で GraphQL を扱う仕様は
GraphQL over HTTP - 仕様としてはまだ Draft だが、大体の実装がこれに従っているはず ▶ なので、技術選定としてもいくつかのレイヤに分けて考えることができる - 「HTTP リクエストを受けていい感じの処理を挟みつつ GraphQL に橋渡 しをする実装」 - 「GraphQL クエリ(Operation)を受けて結果を吐き出す実装」 - …
GraphQL サーバの構成要素をレイヤに分けてみた ※ @izumin5210 が独自に分類・命名したものです。 一般的な定義が存在していたら教えてください。
▶ Schema Definition - Code-First か Schema-First か - GraphQL
スキーマを定義するのがどういう開発者かな どで、相性がいい方法が変わる ▶ Resolver - スキーマ定義手法によって Resolver 実装手法は概ね定 まる - スキーマ上の型と TypeScript 上の型がちゃんと整合す るかも重要ポイント
▶ Dependency Container - graphql-js の contextValue が実質 Dependency container
として機能する - 独自の DI 機構を持つ場合もある ▶ Execution Engine - JavaScript では基本的に graphql-js が利用される - スキーマ定義・resolver 実装・Context から GraphQLSchema インスタンスを作り、それもとにクエリ を実行する というのがどのライブラリでも共通
▶ Execution Middlwware - Persisted Query など、GraphQL の仕様の外側での 追加処理 -
Envelop は Babel 的にパーサ等の挙動を上書きする ことも可能 ▶ Transport Adapter - Transport (HTTP Server) と GraphQLSchema の 橋渡し ▶ Transport - HTTP server
この構造を理解しておくことで… ▶ 適切な技術選定の助けになるかも - e.g. いま Apollo Server は必要なのか -
e.g. 僕らのアーキテクチャに NestJS は適してるのか ▶ より良いアーキテクチャを見つける助けになるかも - e.g. GraphQLSchema が処理の本体ってことは、 これを React Server Component から呼べる…? ここでは Node.js について取り上げたが、 他の言語でも似たような分類はできるはず。たぶん。
他にも GraphQL サーバ技術選定時に考えること ▶ BFF ▶ Gateway ▶ 普通にドメインロジックめっちゃ持ってるサーバ アーキテクチャ上の立ち位置は?
他にも GraphQL サーバ技術選定時に考えること ▶ 誰が・どうやってスキーマを定義する? - 特定の言語に縛られないほうが、みんなに開かれたスキーマになる(かも) - プログラムでスキーマにメタ情報を仕込めると便利(かも) -
どういうグラフを目指すのか ▶ 安全に resolver を実装できる? - スキーマと実装の型がズレないか 開発フローは?
他にも GraphQL サーバ技術選定時に考えること ▶ (そもそも GraphQL が適するか?) ▶ … 技術選定に影響を与える要素はたくさんある。
「なぜそれなのか」に答えられるようにしておく。
おまけ: @izumin5210 は何を選ぶ? ▶ Go なら gqlgen - Schema-First +
超優秀な scaffolding ▶ Node.js なら - The Guid スタックに乗りたいので、graphql-yoga - 最近は graphql-codegen の Server Preset がいい感じ - JS にも gqlgen に負けない scaffolding が来た!? - Transport はよしなに - プロダクト立ち上げタイミングなら Next.js から配信もアリ (アーキテクチャ・言語は適切に検討したうえで…)
みなさんの最強の GraphQL サーバ技術選定を教えてください