From 6aef45cc506cd4f543b356113820ed3ce4d27183 Mon Sep 17 00:00:00 2001
From: guen <heloo@guen.dev>
Date: Wed, 29 Oct 2025 02:07:14 +0700
Subject: [PATCH 1/5] fix(core): support reactive GraphQL documents in
 `useQuery`

---
 packages/core/src/composables/useQuery.ts | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/composables/useQuery.ts b/packages/core/src/composables/useQuery.ts
index ce256bf..05a24b7 100644
--- a/packages/core/src/composables/useQuery.ts
+++ b/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,16 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
             deep: true,
             flush: 'post'
         })
+
+        watch(reactiveDocument, () => {
+            if (enabled.value) {
+                stop()
+                start()
+            }
+        }, {
+            deep: true,
+            flush: 'post'
+        })
     }
 
     const refetch = async (variables?: TVariables) => {

From 7dd73fa004afe23654f378837e7fe2e824c74a0b Mon Sep 17 00:00:00 2001
From: guen <heloo@guen.dev>
Date: Wed, 29 Oct 2025 02:47:20 +0700
Subject: [PATCH 2/5] feat(core): add support for `Todos` query with reactive
 GraphQL documents and UI integration

---
 packages/operations/src/codegen/gql.ts        |  6 +-
 packages/operations/src/codegen/graphql.ts    | 11 +++-
 .../operations/src/entries/queries.graphql    |  6 ++
 packages/web/src/App.vue                      | 61 +++++++++++++++++--
 4 files changed, 74 insertions(+), 10 deletions(-)

diff --git a/packages/operations/src/codegen/gql.ts b/packages/operations/src/codegen/gql.ts
index eb035f1..bcf379a 100644
--- a/packages/operations/src/codegen/gql.ts
+++ b/packages/operations/src/codegen/gql.ts
@@ -16,12 +16,12 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
 type Documents = {
     "fragment PostDetail on Post {\n  id\n  title\n  body\n}": typeof types.PostDetailFragmentDoc,
     "mutation UpdatePost($postId: Int!, $post: UpdatePostInput!) {\n  updatePost(postId: $postId, post: $post) {\n    id\n    title\n  }\n}": typeof types.UpdatePostDocument,
-    "query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}": typeof types.UserByIdDocument,
+    "query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}\n\nquery Todos($userId: Int, $first: Int) {\n  todos(userId: $userId, first: $first) {\n    id\n  }\n}": typeof types.UserByIdDocument,
 };
 const documents: Documents = {
     "fragment PostDetail on Post {\n  id\n  title\n  body\n}": types.PostDetailFragmentDoc,
     "mutation UpdatePost($postId: Int!, $post: UpdatePostInput!) {\n  updatePost(postId: $postId, post: $post) {\n    id\n    title\n  }\n}": types.UpdatePostDocument,
-    "query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}": types.UserByIdDocument,
+    "query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}\n\nquery Todos($userId: Int, $first: Int) {\n  todos(userId: $userId, first: $first) {\n    id\n  }\n}": types.UserByIdDocument,
 };
 
 /**
@@ -49,7 +49,7 @@ export function graphql(source: "mutation UpdatePost($postId: Int!, $post: Updat
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}"): (typeof documents)["query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}"];
+export function graphql(source: "query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}\n\nquery Todos($userId: Int, $first: Int) {\n  todos(userId: $userId, first: $first) {\n    id\n  }\n}"): (typeof documents)["query UserById($userByIdId: Int!) {\n  userById(id: $userByIdId) {\n    id\n    name\n    email\n  }\n}\n\nquery Posts($userId: Int, $first: Int) {\n  posts(userId: $userId, first: $first) {\n    id\n    ...PostDetail\n  }\n}\n\nquery Todos($userId: Int, $first: Int) {\n  todos(userId: $userId, first: $first) {\n    id\n  }\n}"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};
diff --git a/packages/operations/src/codegen/graphql.ts b/packages/operations/src/codegen/graphql.ts
index 4a096f6..36307d3 100644
--- a/packages/operations/src/codegen/graphql.ts
+++ b/packages/operations/src/codegen/graphql.ts
@@ -241,7 +241,16 @@ export type PostsQuery = { __typename?: 'Query', posts?: Array<(
     & { ' $fragmentRefs'?: { 'PostDetailFragment': PostDetailFragment } }
   ) | null> | null };
 
+export type TodosQueryVariables = Exact<{
+  userId?: InputMaybe<Scalars['Int']['input']>;
+  first?: InputMaybe<Scalars['Int']['input']>;
+}>;
+
+
+export type TodosQuery = { __typename?: 'Query', todos?: Array<{ __typename?: 'Todo', id: number } | null> | null };
+
 export const PostDetailFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PostDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"}}]}}]} as unknown as DocumentNode<PostDetailFragment, unknown>;
 export const UpdatePostDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdatePost"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"post"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"UpdatePostInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updatePost"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"postId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postId"}}},{"kind":"Argument","name":{"kind":"Name","value":"post"},"value":{"kind":"Variable","name":{"kind":"Name","value":"post"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}}]}}]}}]} as unknown as DocumentNode<UpdatePostMutation, UpdatePostMutationVariables>;
 export const UserByIdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"UserById"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userByIdId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"userById"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userByIdId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]} as unknown as DocumentNode<UserByIdQuery, UserByIdQueryVariables>;
-export const PostsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Posts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"posts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}},{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PostDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PostDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"}}]}}]} as unknown as DocumentNode<PostsQuery, PostsQueryVariables>;
\ No newline at end of file
+export const PostsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Posts"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"posts"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}},{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PostDetail"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PostDetail"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"body"}}]}}]} as unknown as DocumentNode<PostsQuery, PostsQueryVariables>;
+export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Todos"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"userId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"first"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"todos"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"userId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"userId"}}},{"kind":"Argument","name":{"kind":"Name","value":"first"},"value":{"kind":"Variable","name":{"kind":"Name","value":"first"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<TodosQuery, TodosQueryVariables>;
\ No newline at end of file
diff --git a/packages/operations/src/entries/queries.graphql b/packages/operations/src/entries/queries.graphql
index 43ce851..c48f3b4 100644
--- a/packages/operations/src/entries/queries.graphql
+++ b/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
+    }
 }
\ No newline at end of file
diff --git a/packages/web/src/App.vue b/packages/web/src/App.vue
index f978681..941d1aa 100644
--- a/packages/web/src/App.vue
+++ b/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,6 +35,20 @@ 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>
@@ -37,11 +56,15 @@ const { data } = useFragment({
     <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,32 @@ 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
+    user: User
+}
+          </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="10"
+          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>

From 5322f3ec37b7b51a7d713ffad0933518e27a6651 Mon Sep 17 00:00:00 2001
From: guen <heloo@guen.dev>
Date: Wed, 29 Oct 2025 02:51:10 +0700
Subject: [PATCH 3/5] fix(web): adjust textarea row count in GraphQL query
 editor for improved UI consistency

---
 packages/web/src/App.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/web/src/App.vue b/packages/web/src/App.vue
index 941d1aa..e32eeb3 100644
--- a/packages/web/src/App.vue
+++ b/packages/web/src/App.vue
@@ -139,14 +139,13 @@ type Todo {
     id: Int!
     title: String
     completed: Boolean
-    user: User
 }
           </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="10"
+          rows="8"
           placeholder="Enter GraphQL query here"
         />
         <div class="border-t border-white/10 pt-4 space-y-3">

From 89ce29528a21387244c95ef47a782d6e6119a414 Mon Sep 17 00:00:00 2001
From: guen <heloo@guen.dev>
Date: Wed, 29 Oct 2025 09:26:20 +0700
Subject: [PATCH 4/5] fix(core): support reactive GraphQL documents in
 `useQuery` for enhanced functionality

---
 .changeset/polite-crabs-obey.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/polite-crabs-obey.md

diff --git a/.changeset/polite-crabs-obey.md b/.changeset/polite-crabs-obey.md
new file mode 100644
index 0000000..07cfa50
--- /dev/null
+++ b/.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

From 427257f711b19fdff2e22e662b551878a2a56523 Mon Sep 17 00:00:00 2001
From: guen <heloo@guen.dev>
Date: Wed, 29 Oct 2025 09:38:45 +0700
Subject: [PATCH 5/5] fix(core): remove unnecessary deep watcher in `useQuery`

---
 packages/core/src/composables/useQuery.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/core/src/composables/useQuery.ts b/packages/core/src/composables/useQuery.ts
index 05a24b7..5ed5553 100644
--- a/packages/core/src/composables/useQuery.ts
+++ b/packages/core/src/composables/useQuery.ts
@@ -337,9 +337,6 @@ export function useQuery<TData = unknown, TVariables extends OperationVariables
                 stop()
                 start()
             }
-        }, {
-            deep: true,
-            flush: 'post'
         })
     }