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
Nuxt で GraphQL のクエリを送信する方法
Search
SAW
February 29, 2024
Programming
2
240
Nuxt で GraphQL のクエリを送信する方法
v-kansai Meetup #15 の発表資料です。
SAW
February 29, 2024
Tweet
Share
More Decks by SAW
See All by SAW
PHP で学ぶ OAuth 入門
azuki
2
240
EditorConfig を使ってみよう
azuki
1
58
Symfony でサクッと作る REST API サーバー
azuki
1
98
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
azuki
1
130
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
240
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
120
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
330
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
280
Eloquent で relation を扱う基礎
azuki
0
140
Other Decks in Programming
See All in Programming
マイコンでもRustのtestがしたい/KernelVM Kansai 11
tnishinaga
1
890
VibeCoding時代のエンジニアリング
daisuketakeda
0
200
파급효과: From AI to Android Development
l2hyunwoo
0
160
カウシェで Four Keys の改善を試みた理由
ike002jp
1
140
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
140
複雑なフォームの jotai 設計 / Designing jotai(state) for Complex Forms #layerx_frontend
izumin5210
6
1.6k
プロダクトエンジニアのしごと 〜 受託 × 高難度を乗り越えるOptium開発 〜
algoartis
0
220
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
110
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
110
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
8
3.4k
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
chobishiba
1
120
AIコーディングの本質は“コード“ではなく“構造“だった / The essence of AI coding is not “code” but "structure
seike460
PRO
2
440
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
A better future with KSS
kneath
239
17k
Embracing the Ebb and Flow
colly
85
4.7k
KATA
mclloyd
29
14k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
The Cult of Friendly URLs
andyhume
78
6.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
How to Ace a Technical Interview
jacobian
276
23k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Transcript
/VYUͰ(SBQI2-ͷΫΤϦΛૹ৴͢Δํ๏ 3FCPPUWLBOTBJ.FFUVQ 4"8
$(whoami) ࢯ໊Ճ౻फҰ ࡀ ϋϯυϧωʔϜ4"8 ؔͷ*5ΤϯδχΞίϛϡχςΟͷ͔͠୲ ࣗশ େࡕࡏॅɾѪग़ 9
چ5XJUUFS !B[VLJ@FBUFS ಘҙ8FCΞϓϦέʔγϣϯ։ൃ 7VF -BSBWFM 2
ಈػ/VYU͔Β(SBQI2-ͷΫΤϦΛૹ৴͍ͨ͠ /VYUͰϑϩϯτΤϯυΛ։ൃ όοΫΤϯυ-BSBWFMͰ։ൃ "1*(SBQI2-Λར༻ /VYU͔Β(SBQI2-ͷΫΤϦΛૹ৴ͯ͠σʔλΛऔಘ͍ͨ͠ /VYU͚ͷ(SBQI2-$MJFOUΛར༻͍ͨ͠ 3 ϑϩϯτΤϯυ όοΫΤϯυ ϦΫΤετ
Ϩεϙϯε
/VYUͷͨΊͷ(SBQI2-ΫϥΠΞϯτ /VYUͷެࣜυΩϡϝϯτͷ/VYU.PEVMFT͔Βݕࡧ /VYU(SBQI2-$MJFOU /VYUͷͨΊͷHSBQIRMSFRVFTU (SBQI2-$PEF(FOFSBUPSͷ࠷খߏ /VYU"QPMMP /VYUͷͨΊͷ"QPMMP$MJFOU (SBQI2-3FRVFTU.PEVMF ࠷খͷ(SBQI2-ΫϥΠΞϯτͷͨΊͷαϙʔτΛ͢ΔͨΊͷ/VYUϞδϡʔϧ 4
/VYU(SBQI2-$MJFOUͷಛ (SBQI2-ͷΫΤϦΛผϑΝΠϧʹهड़ 7VFͷίʔυ͔Β(SBQI2-ͷΫΤϦΛՄೳ ݸਓతਪ͠ϙΠϯτ ΄΅ઃఆͳ͠Ͱར༻Մೳ nuxt.config.tsͷmodulesͱڥมͷઃఆͷΈ 5ZQF4DSJQUΛશαϙʔτ (SBQI2-ͷΫΤϦΛͱʹϨεϙϯεͷܕใΛࣗಈੜ 5
/VYU(SBQI2-$MJFOUͷجຊతͳ͍ํ (SBQI2-ͷΫΤϦΛهड़ ϑΝΠϧͷ֦ுࢠ.gql·ͨ.graphql useAsyncGql()Λݺͼग़͠ ΫΤϦoperation͔Βࢦఆ 6 query getCountries
{ countries { code name } } const { data } = await useAsyncGql({ operation: 'getCountries', }); (SBQI2-ͷΫΤϦ໊Λ VTF"TZOD(RM ͷ PQFSBUJPOʹࢦఆ
ඞཁ࠷খݶͷઃఆ nuxt.config.tsͷmodulesΛՃ (SBQI2-αʔόʔͷ63-Λ֨ೲ͢ΔڥมΛઃఆ (SBQI2-αʔόʔͷ63-Λ.envͷGQL_HOSTʹઃఆ 7 export default defineNuxtConfig({ modules: ['nuxt-graphql-client'],
}); nuxt.config.ts GQL_HOST='https://localhost/graphql' .env
5ZQF4DSJQUશαϙʔτͷڧΈ (SBQI2-ͷΫΤϦ͔Βฦ٫ܕͷใΛࣗಈੜ useAsyncGql()ͷฦΓͷ5ZQF)JOUJOHʹө 8 (SBQI2-$PEF(FOFSBUPSͰ ΫΤϦ͔ΒܕใΛࣗಈੜ
(SBQI2-ͷWBSJBCMFTͷࢦఆ useAsyncGql()ͷҾ͔ΒมΛࢦఆ ΫΤϦมvariables͔Βࢦఆ ΫΤϦͷม͕5ZQF)JOUJOHʹө 9 (SBQI2-$PEF(FOFSBUPSͰ ΫΤϦม͔ΒܕใΛࣗಈੜ
ࠔͬͨ ެࣜυΩϡϝϯτ͕ಡΈͮΒ͍ ެࣜυΩϡϝϯτҎ֎ͷใগͳΊ ϑΝΠϧͷΞοϓϩʔυ͕࣮Ͱ͖ͳͦ͞͏ ͦͦґଘύοέʔδͷHSBQIRMSFRVFTU͕ϑΝΠϧΞοϓϩʔυʹඇରԠ ϛυϧΣΞΛ࣮ͯ͠ΞοϓϩʔυΛ࣮ݱ͢Δ͜ͱՄೳ /YVU(SBQI2-$MJFOUʹHSBQIRMSFRVFTUͷϛυϧΣΞΛΈࠐΊͳͦ͞͏ 10
૯ׅ /VYU(SBQI2-$MJFOUʹ͍ͭͯհ (SBQI2-ͷΫΤϦΛ7VFϑΝΠϧ͔Βͯ͠هड़ ΄΅ઃఆͳ͠Ͱར༻Մೳ 5ZQF4DSJQUͷશαϙʔτͰ5ZQF)JOUJOH͕ར༻Մೳ /VYU(SBQI2-$MJFOUΛ͏্Ͱࠔͬͨ υΩϡϝϯτ͕ಡΈͮΒ͍ ϑΝΠϧΞοϓϩʔυʹະରԠͬΆ͍ 11
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠