apollo-client 投げれるようにするまで

0022-nuxt-bridge/frontend/assets/apollo/getTest.gql

@@ -0,0 +1,37 @@
+query getTest {
+  launchesPast(limit: 10) {
+    mission_name
+    launch_date_local
+    launch_site {
+      site_name_long
+    }
+    links {
+      article_link
+      video_link
+    }
+    rocket {
+      rocket_name
+      first_stage {
+        cores {
+          flight
+          core {
+            reuse_count
+            status
+          }
+        }
+      }
+      second_stage {
+        payloads {
+          payload_type
+          payload_mass_kg
+          payload_mass_lbs
+        }
+      }
+    }
+    ships {
+      name
+      home_port
+      image
+    }
+  }
+}

0022-nuxt-bridge/frontend/assets/util/createApolloClient.ts

@@ -0,0 +1,14 @@
+import { NuxtAppOptions } from '@nuxt/types'
+import { createHttpLink } from 'apollo-link-http'
+import fetch from 'isomorphic-fetch'
+
+export default (uri: string, app: NuxtAppOptions) => ({
+  defaultHttpLink: false,
+  link: createHttpLink({
+    uri,
+    credentials: 'same-origin',
+    fetch: async (uri: string, options) => {
+      return fetch(uri, options)
+    },
+  }),
+})

0022-nuxt-bridge/nuxt.config.ts → 0022-nuxt-bridge/frontend/nuxt.config.ts

@@ -54,6 +54,12 @@ export default defineNuxtConfig({
     strategy: 'no_prefix',
   },
 
+  apollo: {
+    clientConfigs: {
+      default: '~/plugins/apollo-client.ts',
+    },
+  },
+
   // Global CSS: https://go.nuxtjs.dev/config-css
   css: [],
 
@@ -67,8 +73,15 @@ export default defineNuxtConfig({
   buildModules: [],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: ['@nuxtjs/i18n'],
+  modules: [
+    '@nuxtjs/i18n',
+    '@nuxtjs/apollo',
+  ],
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},
+
+  alias: {
+    tslib: 'tslib/tslib.es6.js'
+  }
 })

0022-nuxt-bridge/package.json → 0022-nuxt-bridge/frontend/package.json

@@ -1,5 +1,6 @@
 {
   "name": "demo",
+  "type": "module",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -13,7 +14,15 @@
     "test": "jest"
   },
   "dependencies": {
+    "@nuxtjs/apollo": "^4.0.1-rc.5",
+    "@types/isomorphic-fetch": "^0.0.35",
+    "apollo-cache-inmemory": "^1.6.6",
+    "apollo-client": "^2.6.10",
+    "apollo-link-http": "^1.5.17",
     "core-js": "^3.19.3",
+    "graphql": "^16.3.0",
+    "graphql-tag": "^2.12.6",
+    "isomorphic-fetch": "^3.0.0",
     "nuxt-edge": "latest",
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",

0022-nuxt-bridge/pages/index.vue → 0022-nuxt-bridge/frontend/pages/index.vue

@@ -1,17 +1,26 @@
 <template lang="pug">
-  main
-    Tutorial
+main
+  Tutorial
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import Tutorial from '~/components/Tutorial.vue'
+import getTest from '~/assets/apollo/getTest.gql'
 
 export default Vue.extend({
   name: 'IndexPage',
   components: {
     Tutorial,
   },
+  apollo: {
+    test: {
+      query: getTest,
+      result(res: object) {
+        console.log(res)
+      }
+    }
+  },
 })
 </script>
 

0022-nuxt-bridge/frontend/plugins/apollo-client.ts

@@ -0,0 +1,4 @@
+import { Context } from '@nuxt/types'
+import createApolloClient from '~/assets/util/createApolloClient'
+
+export default ({ app }: Context) => createApolloClient('https://api.spacex.land/graphql', app)

0022-nuxt-bridge/tsconfig.json → 0022-nuxt-bridge/frontend/tsconfig.json

@@ -16,7 +16,7 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@nuxt/types", "@types/node", "@nuxtjs/i18n"]
+    "types": ["@nuxt/types", "@types/node", "@nuxtjs/i18n", "vue-apollo", "~/types/*"]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }

0022-nuxt-bridge/frontend/types/gql.d.ts

@@ -0,0 +1,13 @@
+declare module '*.gql' {
+    import { DocumentNode } from 'graphql'
+
+    const content: DocumentNode
+    export default content
+}
+
+declare module '*.graphql' {
+    import { DocumentNode } from 'graphql'
+
+    const content: DocumentNode
+    export default content
+}