chore: add test for outdir of codegen

test/codegen-outdir.test.ts

@@ -0,0 +1,22 @@
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+import { $fetch, setup } from '@nuxt/test-utils/e2e'
+
+describe('urql', async () => {
+  await setup({
+    rootDir: fileURLToPath(new URL('./fixtures/codegen-outdir', import.meta.url)),
+  })
+
+  it('useQuery and useAsyncQuery', async () => {
+    const html = await $fetch('/hello')
+    expect(html).toContain('AsyncQuery: hello, one')
+    expect(html).toContain('Query: hello, two')
+    expect(html).toContain('AsyncWithGettersQuery: hello, three')
+    expect(html).toContain('AsyncWithComputedQuery: hello, four')
+  })
+
+  it('useMutation', async () => {
+    const html = await $fetch('/again')
+    expect(html).toContain('Mutation: hello two from mutation')
+  })
+})

test/fixtures/codegen-outdir/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

test/fixtures/codegen-outdir/nuxt.config.ts

@@ -0,0 +1,18 @@
+export default defineNuxtConfig({
+  modules: ['../../../src/module'],
+  urqlClient: {
+    clients: {
+      hello: {
+        url: 'https://graphql-test.teages.xyz/graphql-hello',
+        credentials: 'include',
+        cookiesFilter: ['locale'],
+        fetchOptions: {
+          headers: {
+            Authorization: 'Bearer 123',
+          },
+        },
+      },
+    },
+    codegen: { outputDir: '.gql' },
+  },
+})

test/fixtures/codegen-outdir/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "basic",
+  "type": "module",
+  "private": true
+}

test/fixtures/codegen-outdir/pages/again.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const mutation = gqlhello(/* GraphQL */`
+  mutation testMutation($name: String!) {
+    helloAgain(name: $name)
+  }
+`)
+
+const { data } = useAsyncData(() => useMutation(mutation, { name: 'two' }))
+</script>
+
+<template>
+  <div> Mutation: {{ data.helloAgain }} </div>
+</template>

test/fixtures/codegen-outdir/pages/hello.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const query = gqlhello(/* GraphQL */`
+  query test($name: String!) {
+    hello(name: $name)
+  }
+`)
+
+const { data: asyncQueryDaya } = await useAsyncQuery(query, { name: 'one' })
+const { data } = await useAsyncData(() => useQuery(query, { name: 'two' }))
+
+const { data: asyncWithGettersQueryData } = await useAsyncQuery(query, () => ({ name: 'three' }))
+const v = computed(() => ({ name: 'four' }))
+const { data: asyncWithComputedQueryData } = await useAsyncQuery(query, v)
+</script>
+
+<template>
+  <div> AsyncQuery: {{ asyncQueryDaya.hello }} </div>
+  <div> Query: {{ data.hello }} </div>
+
+  <div> AsyncWithGettersQuery: {{ asyncWithGettersQueryData.hello }} </div>
+  <div> AsyncWithComputedQuery: {{ asyncWithComputedQueryData.hello }} </div>
+</template>