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
92
Nuxt で GraphQL のクエリを送信する方法
v-kansai Meetup #15 の発表資料です。
SAW
February 29, 2024
Tweet
Share
More Decks by SAW
See All by SAW
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
37
ブラウザでテキストを読み上げる
azuki
0
49
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
34
GraphQL 入門
azuki
1
54
JavaScript で音声認識を試してみよう
azuki
0
42
Voice Recognition in JavaScript
azuki
0
21
関西の IT 勉強会コミュニティをもっと盛り上げたい!!
azuki
0
64
Postman で GraphQL のクエリを送ってみよう
azuki
0
330
Laravel でモデルの ID を UUID/ULID にする方法
azuki
0
230
Other Decks in Programming
See All in Programming
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
2
280
Timeline エディター拡張入門
yucchiy
0
460
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
RaaP
ksss
0
160
Criando a Woovi em uma semana
daniloab
0
120
GoでParserを書く
karupanerura
3
440
Next.js App Router
quramy
14
2.3k
Namespace, What and Why
tagomoris
4
770
TypeScriptのパフォーマンス改善
yajihum
14
5.2k
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
620
slog登場に伴うloggerの取り回し手法の見直し / kamakura.go #6
arthur1
0
160
TypeScript 関数型スタイルでバックエンド開発のリアル
naoya
49
16k
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
A designer walks into a library…
pauljervisheath
201
23k
Documentation Writing (for coders)
carmenintech
60
4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Unsuck your backbone
ammeep
664
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Writing Fast Ruby
sferik
622
60k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠