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
200
Nuxt で GraphQL のクエリを送信する方法
v-kansai Meetup #15 の発表資料です。
SAW
February 29, 2024
Tweet
Share
More Decks by SAW
See All by SAW
Laravel や Symfony で手っ取り早く OpenAPI のドキュメントを作成する
azuki
2
170
Provide/Inject で TypeScript の恩恵を受ける方法
azuki
3
97
GraphQL はいいぞ! ~Laravel で学ぶ GraphQL 入門~
azuki
1
270
OSS contributor への第一歩を踏み出すまでの物語
azuki
2
210
Eloquent で relation を扱う基礎
azuki
0
120
メイキング・オブ・PHPカンファレンス 〜PHPカンファレンス関西2024の運営スタッフが語る舞台裏〜
azuki
0
82
ブラウザでテキストを読み上げる
azuki
0
130
計画性ないけれどノリと勢いだけで地方でも勉強会を開くすゝめ 〜 PHPカンファレンス関西2024 の懇親会 LT のその後 〜
azuki
0
69
GraphQL 入門
azuki
1
130
Other Decks in Programming
See All in Programming
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
410
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
160
Effective Signals in Angular 19+: Rules and Helpers
manfredsteyer
PRO
0
340
見えないメモリを観測する: PHP 8.4 `pg_result_memory_size()` とSQL結果のメモリ管理
kentaroutakeda
0
890
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
9
2.3k
テストコード書いてみませんか?
onopon
2
290
Androidアプリのモジュール分割における:x:commonを考える
okuzawats
1
260
EC2からECSへ 念願のコンテナ移行と巨大レガシーPHPアプリケーションの再構築
sumiyae
3
540
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
390
rails newと同時に型を書く
aki19035vc
5
610
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
110
コンテナをたくさん詰め込んだシステムとランタイムの変化
makihiro
1
180
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Designing Experiences People Love
moore
139
23k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
It's Worth the Effort
3n
183
28k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
KATA
mclloyd
29
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
171
50k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠