Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Nuxt で GraphQL のクエリを送信する方法

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for SAW SAW
February 29, 2024
Programming
2
310

Nuxt で GraphQL のクエリを送信する方法

v-kansai Meetup #15 の発表資料です。

Avatar for SAW

SAW

February 29, 2024
Tweet

More Decks by SAW

See All by SAW
React Hook Form と Zod によるフォームバリデーション
Avatar for SAW azuki
0
31
PHP で form-data を POST 以外のメソッドで受け取るには?
Avatar for SAW azuki
0
52
PHP で学ぶ OAuth 入門
Avatar for SAW azuki
2
980
EditorConfig を使ってみよう
Avatar for SAW azuki
1
94
Symfony でサクッと作る REST API サーバー
Avatar for SAW azuki
1
220
Vite の Library Mode を使って Vue のコンポーネントをライブラリ化する
Avatar for SAW azuki
1
300
Laravel や Symfony で手っ取り早く
OpenAPI のドキュメントを作成する
Avatar for SAW azuki
2
370
Provide/Inject で TypeScript の恩恵を受ける方法
Avatar for SAW azuki
3
160
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
Avatar for SAW azuki
1
390

Other Decks in Programming

See All in Programming
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
2
500
AI Agent Dojo ＃4: watsonx Orchestrate ADK体験
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
140
Vibe codingでおすすめの言語と開発手法
Avatar for uyuki uyuki234
0
210
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
なぜSQLはAIぽく見えるのか/why does SQL look AI like
Avatar for florets1 florets1
0
410
SourceGeneratorのススメ
Avatar for tkym htkym
0
160
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
480
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
Avatar for Yuto tsukamoto1783
0
160
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
140
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.1k
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
270
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
270

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
570
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
37
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.3k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
90
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
130
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
390

Transcript

  1. /VYUͰ(SBQI2-ͷΫΤϦΛૹ৴͢Δํ๏ 3FCPPUWLBOTBJ.FFUVQ  4"8

  2. $(whoami) ࢯ໊Ճ౻फҰ࿠ ࡀ  ϋϯυϧωʔϜ4"8 ؔ੢ͷ*5ΤϯδχΞίϛϡχςΟͷ೐΍͔͠୲౰ ࣗশ  େࡕࡏॅɾѪ஌ग़਎ 9

    چ5XJUUFS !B[VLJ@FBUFS ಘҙ෼໺8FCΞϓϦέʔγϣϯ։ൃ 7VF -BSBWFM 2

  3. ಈػ/VYU͔Β(SBQI2-ͷΫΤϦΛૹ৴͍ͨ͠ /VYUͰϑϩϯτΤϯυΛ։ൃ όοΫΤϯυ͸-BSBWFMͰ։ൃ "1*͸(SBQI2-Λར༻ /VYU͔Β(SBQI2-ͷΫΤϦΛૹ৴ͯ͠σʔλΛऔಘ͍ͨ͠ /VYU޲͚ͷ(SBQI2-$MJFOUΛར༻͍ͨ͠ 3 ϑϩϯτΤϯυ όοΫΤϯυ ϦΫΤετ

    Ϩεϙϯε

  4. /VYUͷͨΊͷ(SBQI2-ΫϥΠΞϯτ /VYUͷެࣜυΩϡϝϯτͷ/VYU.PEVMFT͔Βݕࡧ /VYU(SBQI2-$MJFOU /VYUͷͨΊͷHSBQIRMSFRVFTU (SBQI2-$PEF(FOFSBUPSͷ࠷খߏ੒ /VYU"QPMMP /VYUͷͨΊͷ"QPMMP$MJFOU (SBQI2-3FRVFTU.PEVMF ࠷খͷ(SBQI2-ΫϥΠΞϯτͷͨΊͷαϙʔτΛ͢ΔͨΊͷ/VYUϞδϡʔϧ 4

  5. /VYU(SBQI2-$MJFOUͷಛ௃ (SBQI2-ͷΫΤϦΛผϑΝΠϧʹهड़ 7VFͷίʔυ͔Β(SBQI2-ͷΫΤϦΛ෼཭Մೳ ݸਓతਪ͠ϙΠϯτ ΄΅ઃఆͳ͠Ͱར༻Մೳ nuxt.config.tsͷmodulesͱ؀ڥม਺ͷઃఆͷΈ 5ZQF4DSJQUΛ׬શαϙʔτ (SBQI2-ͷΫΤϦΛ΋ͱʹϨεϙϯεͷܕ৘ใΛࣗಈੜ੒ 5

  6. /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ʹࢦఆ

  7. ඞཁ࠷খݶͷઃఆ 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

  8. 5ZQF4DSJQU׬શαϙʔτͷڧΈ (SBQI2-ͷΫΤϦ͔Βฦ٫ܕͷ৘ใΛࣗಈੜ੒ useAsyncGql()ͷฦΓ஋ͷ5ZQF)JOUJOHʹ൓ө 8 (SBQI2-$PEF(FOFSBUPSͰ ΫΤϦ͔Βܕ৘ใΛࣗಈੜ੒

  9. (SBQI2-ͷWBSJBCMFTͷࢦఆ useAsyncGql()ͷҾ਺͔Βม਺Λࢦఆ ΫΤϦม਺͸variables͔Βࢦఆ ΫΤϦͷม਺͕5ZQF)JOUJOHʹ΋൓ө 9 (SBQI2-$PEF(FOFSBUPSͰ ΫΤϦม਺͔Βܕ৘ใΛࣗಈੜ੒

  10. ࠔͬͨ఺ ެࣜυΩϡϝϯτ͕΍΍ಡΈͮΒ͍ ެࣜυΩϡϝϯτҎ֎ͷ৘ใ΋গͳΊ ϑΝΠϧͷΞοϓϩʔυ͕࣮૷Ͱ͖ͳͦ͞͏ ͦ΋ͦ΋ґଘύοέʔδͷHSBQIRMSFRVFTU͕ϑΝΠϧΞοϓϩʔυʹඇରԠ ϛυϧ΢ΣΞΛ࣮૷ͯ͠ΞοϓϩʔυΛ࣮ݱ͢Δ͜ͱ͸Մೳ /YVU(SBQI2-$MJFOUʹHSBQIRMSFRVFTUͷϛυϧ΢ΣΞΛ૊ΈࠐΊͳͦ͞͏ 10

  11. ૯ׅ /VYU(SBQI2-$MJFOUʹ͍ͭͯ঺հ (SBQI2-ͷΫΤϦΛ7VFϑΝΠϧ͔Β෼཭ͯ͠هड़ ΄΅ઃఆͳ͠Ͱར༻Մೳ 5ZQF4DSJQU΁ͷ׬શαϙʔτͰ5ZQF)JOUJOH͕ར༻Մೳ /VYU(SBQI2-$MJFOUΛ࢖͏্Ͱࠔͬͨ఺ υΩϡϝϯτ͕΍΍ಡΈͮΒ͍ ϑΝΠϧΞοϓϩʔυʹະରԠͬΆ͍ 11

  12. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠