chore: add test of authenticated client

.github/workflows/ci.yml

@@ -105,6 +105,8 @@ jobs:
 
       - name: Run Tests
         run: pnpm test -- --coverage
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - uses: codecov/codecov-action@v3
 

examples/multi-client/nuxt.config.ts

@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-11-05',
 
-  modules: ['nuxt-graphql-client'],
+  modules: ['@nuxt/ui', 'nuxt-graphql-client'],
 
   runtimeConfig: {
     public: {
@@ -18,7 +18,8 @@ export default defineNuxtConfig({
           },
           rmorty: 'https://rickandmortyapi.com/graphql',
           countries: 'https://countries.trevorblades.com/graphql',
-          todos: 'https://nuxt-gql-server-2gl6xp7kua-ue.a.run.app/query'
+          todos: 'https://nuxt-gql-server-2gl6xp7kua-ue.a.run.app/query',
+          github: 'https://api.github.com/graphql'
         }
       }
     }

examples/multi-client/pages/github/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <UCard class="p-4">
+      <div>
+        Github Example
+      </div>
+
+      <div class="flex flex-wrap gap-3 items-center">
+        <UInput
+          v-model="githubToken"
+          icon="carbon-logo-github"
+          placeholder="Your Github Token"
+        />
+
+        <UButton
+          :disabled="!githubToken"
+          @click="setToken"
+        >
+          Set Token
+        </UButton>
+
+        <UButton @click="clearToken">
+          Clear Token
+        </UButton>
+      </div>
+
+      <div class="mt-4 flex flex-wrap gap-3 items-center">
+        <UButton
+          :disabled="!githubToken"
+          @click="refresh"
+        >
+          Load @me
+        </UButton>
+      </div>
+    </UCard>
+
+    <UCard class="p-4">
+      <p v-if="data">
+        Logged in as {{ data?.viewer?.login }}
+      </p>
+      <p v-else>
+        Not logged in
+      </p>
+    </UCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const githubToken = useState<string | null | undefined>()
+
+const { data, refresh } = await useAsyncGql({
+  operation: 'viewer',
+  client: 'github'
+})
+
+const setToken = () => useGqlToken(githubToken.value, { client: 'github' })
+
+const clearToken = () => useGqlToken(null, { client: 'github' })
+</script>

examples/multi-client/queries/github/viewer.gql

@@ -0,0 +1,5 @@
+query viewer {
+  viewer {
+    login
+  }
+}

package.json

@@ -77,7 +77,8 @@
   },
   "pnpm": {
     "overrides": {
-      "node-fetch": "npm:node-fetch-native@latest"
+      "node-fetch": "npm:node-fetch-native@latest",
+      "nuxt-graphql-client": "workspace:*"
     }
   },
   "packageManager": "[email protected]"

test/multi-client.test.ts

@@ -33,4 +33,13 @@ describe('test multiple clients', () => {
     expect(result).toContain('<p>First Episode: Pilot</p>')
     expect(result).toContain('<p>Name: Morty Smith</p>')
   })
+
+  it('retrieve github user details', async () => {
+    const token = process.env.GH_TOKEN
+    const result = await $fetch('/github', {
+      headers: { Cookie: token ? `gql:github=${token}` : '' }
+    })
+
+    expect(result).toContain('Logged in as github-actions[bot]')
+  })
 })