Merge pull request #29 from guendev/fix/27

fix(core): support reactive GraphQL documents in useQuery

Author: guendev

.changeset/polite-crabs-obey.md

@@ -0,0 +1,6 @@
+---
+"@vue3-apollo/core": patch
+"@vue3-apollo/nuxt": patch
+---
+
+fix(core): support reactive GraphQL documents in useQuery #27

packages/core/src/composables/useQuery.ts

@@ -119,7 +119,7 @@ export type UseQueryOptions<TData = unknown, TVariables extends OperationVariabl
  * @template TData - Type of the query result data
  * @template TVariables - Type of the query variables
  *
- * @param document - GraphQL query document or typed document node
+ * @param document - GraphQL query document or typed document node (can be reactive ref or getter)
  * @param variables - Query variables (can be reactive ref or getter)
  * @param options - Query options including Apollo options and custom features
  *
@@ -139,7 +139,7 @@ export type UseQueryOptions<TData = unknown, TVariables extends OperationVariabl
  * ```
  */
 export function useQuery<TData = unknown, TVariables extends OperationVariables = OperationVariables>(
-    document: DocumentNode | TypedDocumentNode<TData, TVariables>,
+    document: MaybeRefOrGetter<DocumentNode | TypedDocumentNode<TData, TVariables>>,
     variables?: MaybeRefOrGetter<TVariables>,
     options?: UseQueryOptions<TData, TVariables>
 ) {
@@ -171,6 +171,8 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
         })
     }
 
+    const reactiveDocument = computed(() => toValue(document))
+
     const getQueryOptions = () => {
         if (!options) {
             return {}
@@ -189,7 +191,7 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
             try {
                 const queryResult = await client.query<TData, TVariables>({
                     ...getQueryOptions(),
-                    query: document,
+                    query: reactiveDocument.value,
                     variables: toValue(reactiveVariables)
                 })
 
@@ -271,7 +273,7 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
         if (!isServer()) {
             try {
                 const cachedData = client.readQuery<TData, TVariables>({
-                    query: document,
+                    query: reactiveDocument.value,
                     variables: toValue(reactiveVariables)
                 })
 
@@ -288,7 +290,7 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
 
         query.value = client.watchQuery<TData, TVariables>({
             notifyOnNetworkStatusChange: options?.notifyOnNetworkStatusChange ?? options?.keepPreviousResult,
-            query: document,
+            query: reactiveDocument.value,
             variables: toValue(reactiveVariables),
             ...getQueryOptions()
         })
@@ -329,6 +331,13 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
             deep: true,
             flush: 'post'
         })
+
+        watch(reactiveDocument, () => {
+            if (enabled.value) {
+                stop()
+                start()
+            }
+        })
     }
 
     const refetch = async (variables?: TVariables) => {

packages/operations/src/entries/queries.graphql

@@ -11,4 +11,10 @@ query Posts($userId: Int, $first: Int) {
         id
         ...PostDetail
     }
+}
+
+query Todos($userId: Int, $first: Int) {
+    todos(userId: $userId, first: $first) {
+        id
+    }
 }

packages/web/src/App.vue

@@ -1,9 +1,14 @@
 <script setup lang="ts">
-import type { PostsQueryVariables } from '@vue3-apollo/operations'
+import type {
+    PostsQueryVariables,
+    TodosQuery,
+    TodosQueryVariables
+} from '@vue3-apollo/operations'
 
+import { gql } from '@apollo/client'
 import { useFragment, useMutation, useQuery } from '@vue3-apollo/core'
 import { PostDetailFragmentDoc, PostsDocument, UpdatePostDocument } from '@vue3-apollo/operations'
-import { reactive, ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
 
 const enabled = ref(true)
 
@@ -30,18 +35,36 @@ const { data } = useFragment({
         id: 1
     }
 })
+
+const rawTodoQuery = ref(`
+query Todo($userId: Int, $first: Int) {
+    todos(userId: $userId, first: $first) {
+        id
+    }
+}
+`)
+
+const todoQuery = computed(() => gql(rawTodoQuery.value))
+
+const { result: todosResult } = useQuery<TodosQuery, TodosQueryVariables>(todoQuery, vars, {
+    keepPreviousResult: true
+})
 </script>
 
 <template>
   <div class="min-h-screen bg-[#0b1220] text-gray-200 antialiased">
     <div class="max-w-5xl mx-auto p-6">
       <header class="mb-6">
         <h1 class="text-2xl font-semibold tracking-tight">
-          Apollo Demo • Posts
+          Apollo Demo
         </h1>
-        <p class="text-sm text-gray-400 mt-1">
-          Get posts by user ID and update title
-        </p>
+        <a
+          target="_blank"
+          href="https://graphqlplaceholder.vercel.app/graphql"
+          class="text-sm text-gray-400 mt-1 hover:underline"
+        >
+          https://graphqlplaceholder.vercel.app/graphql
+        </a>
       </header>
 
       <section class="bg-slate-900/60 border border-white/10 rounded-xl shadow-lg backdrop-blur p-4 sm:p-6 space-y-4">
@@ -110,6 +133,31 @@ const { data } = useFragment({
         </div>
       </section>
 
+      <section class="bg-slate-900/60 border border-white/10 rounded-xl shadow-lg backdrop-blur p-4 sm:p-6 space-y-4 mt-10">
+        <pre class="w-full overflow-auto text-sm leading-relaxed bg-slate-950/60 border border-white/10 rounded-lg p-3">
+type Todo {
+    id: Int!
+    title: String
+    completed: Boolean
+}
+          </pre>
+
+        <textarea
+          v-model="rawTodoQuery"
+          class="w-full px-3 py-2 rounded-lg bg-slate-800/70 text-gray-100 placeholder:text-gray-500 border border-slate-700 focus:(outline-none ring-2 ring-indigo-500)"
+          rows="8"
+          placeholder="Enter GraphQL query here"
+        />
+        <div class="border-t border-white/10 pt-4 space-y-3">
+          <div class="text-sm text-gray-300">
+            Todos:
+          </div>
+          <pre class="w-full overflow-auto text-sm leading-relaxed bg-slate-950/60 border border-white/10 rounded-lg p-3">
+ {{ todosResult?.todos }}
+          </pre>
+        </div>
+      </section>
+
       <footer class="mt-8 text-center text-xs text-gray-500">
         Powered by Vue 3 • Apollo • UnoCSS
       </footer>