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に取り組んだ新卒が ぶつかった壁を共有したい
Search
NearMeの技術発表資料です
PRO
November 24, 2023
Programming
0
95
GraphQLに取り組んだ新卒が ぶつかった壁を共有したい
GraphQLのタスクに取り掛かったときに詰まった部分の紹介です。
NearMeの技術発表資料です
PRO
November 24, 2023
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
ルートの質を評価する指標について
nearme_tech
PRO
0
11
Rustで作る強化学習エージェント
nearme_tech
PRO
0
37
ビームサーチ
nearme_tech
PRO
0
34
WASM入門
nearme_tech
PRO
0
33
ESLintをもっと有効活用しよう
nearme_tech
PRO
0
25
リファクタリングのための第一歩
nearme_tech
PRO
0
68
ガウス過程回帰とベイズ最適化
nearme_tech
PRO
1
190
確率的プログラミング入門
nearme_tech
PRO
2
120
Observability and OpenTelemetry
nearme_tech
PRO
2
45
Other Decks in Programming
See All in Programming
GoとPHPのインターフェイスの違い
shimabox
2
210
バッチを作らなきゃとなったときに考えること
irof
2
520
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
160
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
950
Domain-Driven Transformation
hschwentner
2
1.9k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
150
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
PRレビューのお供にDanger
stoticdev
1
230
color-scheme: light dark; を完全に理解する
uhyo
7
490
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
What's in a price? How to price your products and services
michaelherold
244
12k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing Experiences People Love
moore
140
23k
A Philosophy of Restraint
colly
203
16k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Practical Orchestrator
shlominoach
186
10k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Docker and Python
trallard
44
3.3k
Producing Creativity
orderedlist
PRO
344
40k
Transcript
0 GraphQLに取り組んだ新卒が ぶつかった壁を共有したい 2023-11-24 第69回NearMe技術勉強会 Kaito Asahi
1 このスライドはこんな⽅におすすめ🥁 • GraphQLってなんぞやと思っていらっしゃる⽅ ◦ 「Query, Mutationってなんや?」 • バックエンドのタスクに取り組み始めた⽅ ◦
「なんか、GraphQLをうちで使うらしいわ〜」 • 新しい技術に興味ある⽅ ※注意 • Mutationのハンズオンは含みません(queryだけ) • typeDefs, resolversの実装は含みません ※過去の勉強会にて、GraphQL、その統合ツールのApolloに関してはこちらにあります! https://speakerdeck.com/nearme_tech/rustzhi-graphqltong-he-turu-apollo-routerwoshi-tutemita-hanzuon
2 何で詰んだのか?
3 何で詰んだのか? → カスタムの型を利⽤したときに、 subfieldsのselectionを明⽰していなかった
4 GraphQLのクイックチェック • GraphQLとは? ◦ APIのための問い合わせ⾔語 ◦ クライアント/サーバー通信のための⾔語仕様 • GraphQLの特徴
◦ 階層構造のクエリ ▪ クエリと、レスポンスの構造が⼀致 ◦ 強い型付け
5 GraphQLのクイックチェック • RESTと何が異なるの? ◦ REST ▪ 各エンドポイントに対して、固有のレスポンスを返す • オーバーフェッチ、アンダーフェッチ
▪ エンドポイントの管理が⼤変 • ~/posts, ~/users ◦ GraphQL ▪ リソース数に関わらず、エンドポイントは1つ ▪ クライアントからの固有の型に適したレスポンスを返す ※参考:https://aws.amazon.com/jp/compare/the-difference-between-graphql-and-rest/
6 GraphQLのクイックチェック • QueryとMutation ◦ Query ▪ いわゆる、GETメソッド ◦ Mutation
▪ いわゆる、POST, PUT, DELETEメソッド • 何かしらデータベースに変化を起こす
7 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • https://studio.apollographql.com/ ◦ ここから、sign in(もしくはsign up)してください
8 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Connect your API”を選択
9 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • オープンなエンドポイントを今回は利⽤ ◦ https://countries.trevorblades.com
10 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • そのまま”Continue”
11 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “current”を選択
12 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Run in Explorer”をクリック
13 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • これで準備完了
14 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • これで準備完了
15 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Operation”部分に、以下のクエリを書く query ExampleQuery { countries
{ code name } }
16 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Operation”部分に、以下のクエリを書く ◦ “countries”の中の、”code”, “name”値を取得 query
ExampleQuery { countries { code name } }
17 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Response”を確認してみましょう
18 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “emoji”を追加する query ExampleQuery { countries
{ code name emoji } }
19 GraphQLのクイックチェック • 簡単にGraphQLを触ってみる • “Response”を確認してみましょう
20 それで、結論の詰んだポイントはどういうの?
21 GraphQLのクイックチェック • カスタムな型 • countriesは、カスタムな型である”Country”型の配列を返す ◦ ⻑いので⼀部省略
22 GraphQLのクイックチェック • カスタムな型 • countriesは、カスタムな型である”Country”型の配列を返す ◦ StringやIDなどは、スカラー型
23 GraphQLのクイックチェック • カスタムな型 • countriesは、カスタムな型である”Country”型の配列を返す ◦ StringやIDなどは、スカラー型
24 GraphQLのクイックチェック • カスタムな型 • continentも、カスタムの型”Continent” → 何を返すのかは明⽰しなければいけない(これ指定しないで詰んだことあり...) query ExampleQuery
{ countries { code name continent } } query ExampleQuery { countries { code name continent { code name } } }
25 Thank you