fix: import gql from @urql/core

docs/content/1.guide/3.usage.md

@@ -0,0 +1,32 @@
+# Usage
+
+This module reexports @urql/vue composables :
+- `useQuery`
+- `useMutation`
+- `useSubscription`
+- `useClientHandle`
+- `gql`
+
+Follow [@urql/vue documentation](https://formidable.com/open-source/urql/docs/basics/vue/) to learn more
+
+---
+
+## useQuery
+
+```vue
+<template>
+  <div>{{ data }}</div>
+</template>
+
+<script setup lang="ts">
+import { useQuery, gql } from "#imports";
+
+const { data } = useQuery({
+  query: gql`
+    query name {
+      # ...
+    }
+  `,
+});
+</script>
+```

playground/app.vue

@@ -6,6 +6,7 @@
     <ul>
       <li><nuxt-link to="/">index</nuxt-link></li>
       <li><nuxt-link to="/version">version</nuxt-link></li>
+      <li><nuxt-link to="/gql">gql</nuxt-link></li>
       <li><nuxt-link to="/countries">countries</nuxt-link></li>
       <li><nuxt-link to="/country">country</nuxt-link></li>
     </ul>

playground/pages/gql.vue

@@ -0,0 +1,27 @@
+<template>
+  <main>
+    <hgroup>
+      <h4>GQL</h4>
+      <h5>Use gql template string</h5>
+    </hgroup>
+    <p>fetching = {{ fetching }}</p>
+    <p>error = {{ error }}</p>
+    <p>
+      version = <code>{{ version }}</code>
+    </p>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { computed, useQuery, gql } from "#imports";
+
+const { data, fetching, error } = useQuery({
+  query: gql`
+    query version {
+      version
+    }
+  `,
+});
+
+const version = computed(() => data.value?.version ?? "");
+</script>

src/module.ts

@@ -60,9 +60,9 @@ export default defineNuxtModule<ModuleOptions>({
       typeof options.client === "string" ? (await findPath(options.client)) ?? clientPathDefault : clientPathDefault;
     nuxt.options.alias["#urql-client"] = clientPath;
 
-    // import urql vue composables
+    // import urql vue composables and utils
     addImports(
-      ["useClientHandle", "useQuery", "useMutation", "useSubscription"].map((name) => ({
+      ["useClientHandle", "useQuery", "useMutation", "useSubscription", "gql"].map((name) => ({
         name,
         from: "@urql/vue",
       }))