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
100
GraphQLに取り組んだ新卒が ぶつかった壁を共有したい
GraphQLのタスクに取り掛かったときに詰まった部分の紹介です。
NearMeの技術発表資料です
PRO
November 24, 2023
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
Box-Muller法
nearme_tech
PRO
1
9
Kiro触ってみた
nearme_tech
PRO
0
28
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
4
340
ReactNative のアップグレード作業が (意外に)楽しかった話
nearme_tech
PRO
2
92
強化学習アルゴリズムPPOの改善案を考えてみた
nearme_tech
PRO
0
26
Apple Containerについて調べて触ってみた
nearme_tech
PRO
0
330
Rust 並列強化学習
nearme_tech
PRO
0
28
並列で⽣成AIにコーディングをやらせる
nearme_tech
PRO
1
200
希望休勤務を考慮したシフト作成
nearme_tech
PRO
0
48
Other Decks in Programming
See All in Programming
明日から始めるリファクタリング
ryounasso
0
140
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
440
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
130
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
200
What's new in Spring Modulith?
olivergierke
1
140
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
190
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
110
Le côté obscur des IA génératives
pascallemerrer
0
140
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
380
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
150
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Scaling GitHub
holman
463
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Docker and Python
trallard
46
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
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