Merge branch 'v5' into module-opt-queryDeduplication

.eslintrc

@@ -2,6 +2,8 @@
   "extends": ["@nuxtjs/eslint-config-typescript"],
   "rules": {
     "no-redeclare": "off",
-    "@typescript-eslint/no-unused-vars": "off"
+    "import/named": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "vue/multi-word-component-names": "off"
   }
 }

.nuxtrc

@@ -0,0 +1,5 @@
+imports.autoImport=true
+typescript.includeWorkspace=true
+
+# enable TypeScript bundler module resolution - https://www.typescriptlang.org/docs/handbook/modules/reference.html#bundler
+experimental.typescriptBundlerResolution=true

docs/app.config.ts

@@ -1,16 +1,16 @@
 export default defineAppConfig({
   docus: {
     aside: {
-      level: 0,
+      level: 0
     },
     header: {
-      title: "Nuxt Apollo",
-      logo: true,
+      title: 'Nuxt Apollo',
+      logo: true
     },
-    image: "/cover.jpg",
+    image: '/cover.jpg',
     socials: {
-      github: "nuxt-modules/apollo",
-      twitter: "@nuxt_js",
-    },
+      github: 'nuxt-modules/apollo',
+      twitter: '@nuxt_js'
+    }
   }
-});
+})

docs/content/1.getting-started/1.quick-start.md

@@ -15,6 +15,9 @@ Integrate Nuxt Apollo into your project.
     ```bash [NPM]
     npm i -D @nuxtjs/apollo@next
     ```
+    ```bash [pnpm]
+    pnpm add @nuxtjs/apollo@next --save-dev
+    ```
     ::
 
 2. Enable the module.
@@ -38,7 +41,7 @@ Integrate Nuxt Apollo into your project.
       apollo: {
         clients: {
           default: {
-            httpEndpoint: 'https://api.spacex.land/graphql'
+            httpEndpoint: 'https://spacex-production.up.railway.app'
           }
         },
       },

docs/content/1.getting-started/3.composables.md

@@ -49,7 +49,7 @@ const query = gql`
   }
 `
 
-const { data } = await useAsyncQuery(query)
+const { data } = await useLazyAsyncQuery(query)
 ```
 
 <!-- ## Vue Apollo composables -->

docs/content/2.recipes/1.authentication.md

@@ -86,6 +86,10 @@ When the `apollo:auth` hook is implemented, The [getToken auth helper](getting-s
 ::
 
 
+If you are looking to add your authentication token to your requests after your initial login mutation, you will need to set this plugin up (or a similar implementation)
+
+Using a cookie:
+
 ```ts [plugins/apollo.ts]
 export default defineNuxtPlugin((nuxtApp) => {
   // access cookie for auth
@@ -100,6 +104,23 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
+Using a pinia store:
+
+```ts [plugins/apollo.ts]
+import {useUserStore} from "~/store/user"
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const userStore = useUserStore()
+  nuxtApp.hook("apollo:auth", ({client, token}) => {
+    if (userStore.authToken) { 
+      token.value = userStore.authToken
+    }
+  })
+})
+```
+
+Either of these will insert the appropriate authorization headers into your outgoing Apollo requests.
+
 ::alert{type="warning"}
 Nuxt composables such as useState, useCookie, useRequestHeaders and more, should not be called directly in the `apollo:auth` hook. This would result in a `nuxt instance unavailable` error on the server-side.
 ::

docs/nuxt.config.ts

@@ -3,5 +3,5 @@ export default defineNuxtConfig({
 
   colorMode: {
     preference: 'dark'
-  },
+  }
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxtjs/apollo",
-  "version": "5.0.0-alpha.7",
+  "version": "5.0.0-alpha.13",
   "license": "MIT",
   "repository": "https://github.com/nuxt-modules/apollo-module",
   "homepage": "https://apollo.nuxtjs.org",
@@ -17,40 +17,43 @@
     "dist"
   ],
   "scripts": {
-    "build": "nuxt-module-build",
+    "build": "nuxt-module-build build",
     "prepack": "pnpm build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
+    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
+    "lint:fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore .",
     "release": "standard-version --prerelease alpha && git push --follow-tags && pnpm publish --tag next"
   },
   "dependencies": {
-    "@apollo/client": "^3.7.10",
-    "@nuxt/kit": "^3.3.1",
-    "@rollup/plugin-graphql": "^2.0.3",
-    "@vue/apollo-composable": "4.0.0-beta.4",
-    "defu": "^6.1.2",
-    "destr": "^1.2.2",
-    "graphql": "^16.6.0",
+    "@apollo/client": "^3.9.5",
+    "@nuxt/kit": "^3.10.3",
+    "@rollup/plugin-graphql": "^2.0.4",
+    "@vue/apollo-composable": "^4.0.1",
+    "@vue/apollo-option": "^4.0.0",
+    "defu": "^6.1.4",
+    "destr": "^2.0.3",
+    "graphql": "^16.8.1",
     "graphql-tag": "^2.12.6",
-    "graphql-ws": "^5.12.0",
-    "jiti": "^1.18.2",
-    "ohash": "^1.0.0"
+    "graphql-ws": "^5.15.0",
+    "jiti": "^1.21.0",
+    "ohash": "^1.1.3"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.2.1",
-    "@nuxt/schema": "^3.3.1",
-    "@nuxt/ui": "^0.4.1",
-    "@nuxtjs/eslint-config-typescript": "^12.0.0",
-    "@types/node": "^18.15.3",
-    "eslint": "^8.36.0",
-    "nuxt": "^3.3.1"
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/schema": "^3.10.3",
+    "@nuxt/ui": "^2.14.1",
+    "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@types/node": "^20.11.24",
+    "eslint": "^8.57.0",
+    "nuxt": "^3.10.3"
   },
   "publishConfig": {
     "access": "public"
   },
   "resolutions": {
     "@nuxtjs/apollo": "link:."
   },
-  "packageManager": "pnpm@7.29.1"
+  "packageManager": "pnpm@8.15.2"
 }

playground/app.vue

@@ -1,57 +1,3 @@
 <template>
-  <div id="wrapper" bg-light text-dark>
-    <main p-4>
-      <div flex flex-col gap-4>
-        <NCard class="p4">
-          <div class="n-header-upper">
-            GraphQL API
-          </div>
-
-          <form class="flex gap-3 items-center">
-            <NRadio
-              v-for="entry of apis"
-              :key="entry"
-              v-model="api"
-              :name="entry"
-              :value="entry"
-              n="red6 dark:red5"
-            >
-              {{ entry }}
-            </NRadio>
-          </form>
-        </NCard>
-
-        <template v-if="api === 'github'">
-          <GithubDemo />
-        </template>
-        <template v-else-if="api === 'starlink'">
-          <StarlinkDemo />
-        </template>
-        <template v-else-if="api === 'todos'">
-          <TodosDemo />
-        </template>
-      </div>
-    </main>
-
-    <footer border-t-1 border-slate flex justify-center items-center>
-      @nuxtjs/apollo playground
-    </footer>
-  </div>
+  <NuxtPage />
 </template>
-
-<script lang="ts" setup>
-const apis = ref(['starlink', 'todos', 'github'])
-
-const apiCookie = useCookie('apollo_api', { default: () => apis.value[0] })
-const api = ref(apiCookie.value)
-watch(api, value => (apiCookie.value = value))
-</script>
-
-<style scoped>
-#wrapper {
-  min-height: 100vh;
-
-  display: grid;
-  grid-template-rows: 1fr 60px;
-}
-</style>

playground/components/GithubDemo.vue

@@ -1,75 +1,80 @@
 <template>
-  <div flex flex-col gap-4>
-    <NCard p-4>
+  <div class="flex flex-col gap-4">
+    <UCard class="p-4">
       <div class="n-header-upper">
         Github Example
       </div>
 
       <div class="flex flex-wrap gap-3 items-center">
-        <NTextInput
+        <UInput
           v-model="githubToken"
           icon="carbon-logo-github"
           placeholder="Your Github Token"
         />
 
-        <NButton @click="setToken">
+        <UButton @click="setToken">
           Set Token
-        </NButton>
+        </UButton>
 
-        <NButton @click="clearToken">
+        <UButton @click="clearToken">
           Clear Token
-        </NButton>
+        </UButton>
       </div>
 
       <div class="mt-4 flex flex-wrap gap-3 items-center">
-        <NButton :disabled="!githubToken" @click="getViewer">
+        <UButton :disabled="!githubToken" @click="getViewer">
           Load @me
-        </NButton>
+        </UButton>
 
-        <NButton :disabled="!githubToken" @click="getNuxtDiscussions">
+        <UButton :disabled="!githubToken" @click="getNuxtDiscussions">
           Load Nuxt Discussions
-        </NButton>
+        </UButton>
       </div>
-    </NCard>
+    </UCard>
 
-    <NCard p-4>
-      <div class="n-header-upper">
+    <UCard class="p-4">
+      <div>
         Raw Output
       </div>
 
-      <pre w-100>
+      <pre class="w-100">
         {{ JSON.stringify(output, null, 2) }}
       </pre>
-    </NCard>
+    </UCard>
   </div>
 </template>
 
 <script lang="ts" setup>
 import type { ViewerT, DiscussionT } from '~/types'
 import discussions from '~/queries/discussions.gql'
+import { NuxtApollo } from '#apollo'
 
 const { getToken, onLogin, onLogout } = useApollo()
 
-const githubToken = ref<string | null>(null)
+const githubToken = useState<string | null | undefined>()
 
 // for testing with cookie `tokenStorage`
-if (process.server) { githubToken.value = await getToken('github') }
-
-onMounted(async () => {
+if (import.meta.server && NuxtApollo.clients?.github?.tokenStorage === 'cookie') {
   githubToken.value = await getToken('github')
-})
+} else if (import.meta.client) {
+  onMounted(async () => {
+    githubToken.value = await getToken('github')
+  })
+}
 
 const queryViewer = gql`query viwer { viewer { login } }`
 
 const output = ref()
 
-if (githubToken.value) {
-  const whoAmI = await useAsyncQuery({ query: queryViewer, clientId: 'github' })
+const whoAmI = await useAsyncQuery({ query: queryViewer, clientId: 'github' }, {
+  immediate: !!githubToken.value
+})
 
-  if (whoAmI?.data.value) {
-    output.value = whoAmI.data.value
-  }
-}
+watch(whoAmI.data, (data) => {
+  if (!data) { return }
+
+  output.value = data
+}, { immediate: true })
 
 const getViewer = () => {
   const { onResult, onError } = useQuery<ViewerT>(queryViewer, null, { clientId: 'github', fetchPolicy: 'cache-and-network' })
@@ -90,6 +95,5 @@ const setToken = () => {
 
   onLogin(githubToken.value, 'github')
 }
-const clearToken = () => onLogout('github').then(() => (githubToken.value = null))
-
+const clearToken = () => onLogout('github', true).then(() => (githubToken.value = null))
 </script>