GraphQLでAPI開発やってみよう！

GraphQL でAPI 開発やってみよう！あずにゃん TECH WOMAN KANSAI 3 周年〜GraphQL
ハンズオン勉強会〜

今日やること 1.GraphQL って何？ 2. もうちょっと細かく... ！ 3. やってみよう！～ハンズオンに挑戦！～

GraphQLって何？

GraphQLって何？ API 開発のためのクエリ言語クエリ＝リクエスト( データ取得・更新など) REST API の代替とも言われている

GraphQLって何？単一エンドポイント独自の型システムを持っている Query とMutation( とSubscription) がある欲しいデータだけを取得できる

RESTとの比較～REST API～複数のエンドポイントリソースごとに決められている HTTP メソッドを使う決められた構造でデータを返すいらないデータが含まれることも

もうちょっと細かく... ！

主な登場人物 Resolver Query やMutation の実装スキーマ定義どんなデータを返すのか？

主な登場人物～Resolver～ Query データ取得の処理で使う HTTP メソッドでいう、GET Mutation データ更新系の処理で使う HTTP メソッドでいう、POST 等のGET
以外

主な登場人物～スキーマ定義～データの型を定義する SDL(Schema Definition Language) を用いて記述

SDL(Schema Definition Language) スカラ型プリミティブな値オブジェクト型 Enum 型

SDL(Schema Definition Language) List 型配列型修飾子の1 つ Non-Null 型
null を許容しない、「! 」を付ける型修飾子の1 つ

SDL(Schema Definition Language) TypeScript で使う型とはちょっと違う数値型 Typescript ： number SDL
： Int 配列( 例えば文字列の配列) TypeScript ： string[] SDL ： [String]

スキーマの例

さっそくやってみよう！～ハンズオンに挑戦！～

ハンズオンでやること！ 1.Resolver の実装（API 実装） Mutation Query 2.API 実行（Query ）

作業の準備！ Repository をフォーク npm install して、必要なライブラリ等を導入 backend frontend

参考情報～使用技術(バックエンド)～ TypeScript( 言語) Express(FW) GraphQL Apollo Server Prisma Supabase(DB)

参考情報～使用技術(フロントエンド)～ TypeScript( 言語) React( ライブラリ・FW) GraphQL GraphQL Codegen Apollo Client
styled-components

まずはGraphQL見てみる！ GraphQL サーバを立ち上げてみよう！ backend のpackage.json のstart スクリプト

実装の手順バックエンド実装 Resolver 実装(Mutation/Query) フロントエンド実装 Query つなぎこみ ※ 今回は、Mutation のつなぎこみは省略。

ご参加ありがとうございました！

GraphQLでAPI開発やってみよう！

GraphQLでAPI開発やってみよう！

Azusa Okamoto

More Decks by Azusa Okamoto

Other Decks in Programming

Featured

Transcript