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の技術発表資料です
強化学習アルゴリズムPPOの改善案を考えてみた
nearme_tech
PRO
0
3
Apple Containerについて調べて触ってみた
nearme_tech
PRO
0
52
Rust 並列強化学習
nearme_tech
PRO
0
21
並列で⽣成AIにコーディングをやらせる
nearme_tech
PRO
1
130
希望休勤務を考慮したシフト作成
nearme_tech
PRO
0
34
Hub Labeling による高速経路探索
nearme_tech
PRO
0
91
Build an AI agent with Mastra
nearme_tech
PRO
0
77
Rustで強化学習アルゴリズムを実装する vol3
nearme_tech
PRO
0
43
Webアプリケーションにおけるクラスの設計再入門
nearme_tech
PRO
1
110
Other Decks in Programming
See All in Programming
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
ワープロって実は計算機で
pepepper
2
1.4k
AIコーディングAgentとの向き合い方
eycjur
0
240
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
AIエージェント開発、DevOps and LLMOps
ymd65536
1
350
🔨 小さなビルドシステムを作る
momeemt
2
550
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
Introduction to Git & GitHub
latte72
0
120
令和最新版手のひらコンピュータ
koba789
14
8k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
920
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.8k
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Done Done
chrislema
185
16k
GitHub's CSS Performance
jonrohan
1031
460k
Code Review Best Practice
trishagee
70
19k
Unsuck your backbone
ammeep
671
58k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Visualization
eitanlees
147
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Balancing Empowerment & Direction
lara
2
590
Facilitating Awesome Meetings
lara
55
6.5k
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