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

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

Transcript

1. /VYU
   Ͱ
   (SBQI2-
   ͷΫΤϦΛૹ৴͢Δํ๏ 3FCPPU
   WLBOTBJ
   .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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠