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
77
GraphQLに取り組んだ新卒が ぶつかった壁を共有したい
GraphQLのタスクに取り掛かったときに詰まった部分の紹介です。
NearMeの技術発表資料です
PRO
November 24, 2023
Tweet
Share
More Decks by NearMeの技術発表資料です
See All by NearMeの技術発表資料です
2つの曲線を比較する方法ってあるの? 〜フレシェ距離を試してみた〜 with Python
nearme_tech
PRO
1
18
Constrained K-means Clustering (クラスタサイズの制限をしたK-means法) を調べてみた
nearme_tech
PRO
0
16
VRPの近傍操作SWAP*について調べてみた
nearme_tech
PRO
1
49
新人エンジニアが読んでためになった本
nearme_tech
PRO
2
21
Object–relational mapping and query builder battle 1: Intro to Prisma
nearme_tech
PRO
1
29
深層学習モデルの最適化 -Deep Learning Tuning Playbookを読む-
nearme_tech
PRO
1
52
機械学習を支える連続最適化
nearme_tech
PRO
1
44
サードパーティクッキーの終焉と Topics APIによる代替の可能性
nearme_tech
PRO
1
81
ONNXハンズオン
nearme_tech
PRO
2
28
Other Decks in Programming
See All in Programming
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 07
javiergs
PRO
0
220
小さな開発会社を作った理由
polidog
0
1.9k
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
Namespace on read
tagomoris
2
370
Jetpack for KMP
fornewid
1
290
CSC307 Lecture 12
javiergs
PRO
0
220
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
ピグパーティにおけるMongoDB CommunityバージョンからAtlasへの移行事例
10969hotaka
0
130
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
A Philosophy of Restraint
colly
200
16k
How to Ace a Technical Interview
jacobian
274
23k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Making Projects Easy
brettharned
111
5.7k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Rails Girls Zürich Keynote
gr2m
93
13k
Typedesign – Prime Four
hannesfritz
37
2.2k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Designing for Performance
lara
604
67k
How STYLIGHT went responsive
nonsquared
93
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