作って学ぶ GraphQL

by Kyo Sato

Slide 1

Slide 1 text

作って学ぶ GraphQL Go Conference mini 2022 Autumn IN SENDAI Kyo Sato

Slide 2

Slide 2 text

Shopify No-Code Mobile-App VIP Appify ってなに？

Slide 3

Slide 3 text

Contents - 自己紹介 - GraphQL について - 終わりに

Slide 4

Slide 4 text

Contents - 自己紹介 - GraphQL について - 終わりに

Slide 5

Slide 5 text

- GraphQL について理解を深めたかった - GraphQL を導入することで得られるメリットについて整理したかった - Appify で使用されている技術理由

Slide 6

Slide 6 text

自己紹介

Slide 7

Slide 7 text

自己紹介 Name: きょー。 HN: Keyl0ve Hobby: 温泉、旅行、食べ歩 Univ. : 会津大学 B3

Slide 8

Slide 8 text

GraphQLについて目標： - GraphQL という技術を広める - 実際にサーバを立てて試してもらう

Slide 9

Slide 9 text

GraphQL - Facebook - OSS - API のために作られたクエリ言語 - 既存のデータに対するクエリを実行するランタイム

Slide 10

Slide 10 text

GraphQL のメリット -クライアントはスキーマをもとに、欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで取得できる -スキーマをもとに開発するので型の不一致が起きない

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

REST vs GraphQL https://qiita.com/shunp/items/d85fc47b33e1b3a88167

Slide 14

Slide 14 text

REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET /api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” }

Slide 15

Slide 15 text

REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET /api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” } ２回 API を叩いてる！！

Slide 16

Slide 16 text

Slide 17

Slide 17 text

REST vs GraphQL HTTP requests HTTP responses POST /graphql query { user（id: 1）{ id } } { ”user” : { “id”: 1, } }

Slide 18

Slide 18 text

REST vs GraphQL HTTP requests HTTP responses POST /graphql query { user（id: 1）{ id name } } { ”user” : { “id”: 1, “name”: “user1” } }

Slide 19

Slide 19 text

REST vs GraphQL HTTP requests HTTP responses POST /graphql query { user（id: 1）{ id name address{ street city } { ”user” : { “id”: 1, “name”: “user1”, “address”: { “street”: “Aoba street”, “city”: “Sendai city” } } }

Slide 20

Slide 20 text

Slide 21

Slide 21 text

GitHub の repository を取ってくる REST https://api.github.com/users/Keyl0ve/repos GraphQL https://api.github.com/graphql

Slide 22

Slide 22 text

GitHub の repository を取ってくる REST https://api.github.com/users/Keyl0ve/repos GraphQL https://api.github.com/graphql 通信の効率は GraphQL の方が上

Slide 23

Slide 23 text

GraphQL のメリット -クライアントはスキーマをもとに、欲しいフィールドだけをリクエストできる -リレーションがある値は一度で取得できる -スキーマをもとに開発するので型の不一致が起きない

Slide 24

Slide 24 text

強い型付けが採用されている - パラメータの定義には、スキーマ定義言語（SDL）が使用されている - クライアントに公開されるすべてのAPIはSDLで記述されている

Slide 25

Slide 25 text

GraphQL のデメリット - クエリが複雑になる可能性 - クエリ伝播の問題につながるかもしれない - 学習の難しさ - 特にスキーマの設計

Slide 26

Slide 26 text

クエリ伝播の問題、スキーマ設計の難しさ query { user（id: 1）{ id name address{ street city history{ people awards{ year{ awardName personName } } sample{ sample sample sample } sample{ sample

Slide 27

Slide 27 text

クエリ伝播の問題、スキーマ設計の難しさ query { user（id: 1）{ id name address{ street city history{ people awards{ year{ awardName personName } } sample{ sample sample sample } sample{ sample スキーマを把握していないと、サーバーにとって非常に時間のかかる処理のクエリを送ってしまう可能性がある

Slide 28

Slide 28 text

GraphQL サーバを立てよう - gqlgen を使ってサーバ立ててみた - request から respons まで

Slide 29

Slide 29 text

https://qiita.com/Keyl0ve/items/e88b83c13fb86b7c9908 GraphQL、gqlgen を使ってサーバを立てる