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の技術発表資料です
Rust 並列強化学習
nearme_tech
PRO
0
18
並列で⽣成AIにコーディングをやらせる
nearme_tech
PRO
1
78
希望休勤務を考慮したシフト作成
nearme_tech
PRO
0
25
Hub Labeling による高速経路探索
nearme_tech
PRO
0
80
Build an AI agent with Mastra
nearme_tech
PRO
0
73
Rustで強化学習アルゴリズムを実装する vol3
nearme_tech
PRO
0
38
Webアプリケーションにおけるクラスの設計再入門
nearme_tech
PRO
1
91
AIエージェント for 予約フォーム
nearme_tech
PRO
2
160
ULID生成速度を40倍にしたった
nearme_tech
PRO
2
58
Other Decks in Programming
See All in Programming
AIともっと楽するE2Eテスト
myohei
9
3.2k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
220
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
290
Jakarta EE Meets AI
ivargrimstad
0
380
リッチエディターを安全に開発・運用するために
unachang113
1
270
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
250
GPUを計算資源として使おう!
primenumber
1
290
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
React 使いじゃなくても知っておきたい教養としての React
oukayuka
13
1.6k
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Designing for humans not robots
tammielis
253
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Faster Mobile Websites
deanohume
308
31k
Making Projects Easy
brettharned
117
6.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Done Done
chrislema
184
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Reviewing Like a Champion
maltzj
524
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