fix(core): support reactive GraphQL documents in useSubscription

.changeset/two-heads-prove.md

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

packages/core/src/composables/useSubscription.ts

@@ -10,7 +10,7 @@ import type { DocumentNode } from 'graphql'
 import type { MaybeRefOrGetter, Ref } from 'vue'
 
 import { createEventHook, syncRef } from '@vueuse/core'
-import { getCurrentScope, isReadonly, isRef, onScopeDispose, ref, shallowRef, toRef, toValue, watch } from 'vue'
+import { computed, getCurrentScope, isReadonly, isRef, onScopeDispose, ref, shallowRef, toRef, toValue, watch } from 'vue'
 
 import type { HookContext, UseBaseOption } from '../utils/type'
 
@@ -45,7 +45,7 @@ export function useSubscription<
     TData = unknown,
     TVariables extends OperationVariables = OperationVariables
 >(
-    document: DocumentNode | TypedDocumentNode<TData, TVariables>,
+    document: MaybeRefOrGetter<DocumentNode | TypedDocumentNode<TData, TVariables>>,
     variables?: MaybeRefOrGetter<TVariables>,
     options?: UseSubscriptionOptions<TData, TVariables>
 ) {
@@ -70,6 +70,8 @@ export function useSubscription<
         })
     }
 
+    const reactiveDocument = computed(() => toValue(document))
+
     useApolloTracking({
         state: loading,
         type: 'subscriptions'
@@ -127,14 +129,21 @@ export function useSubscription<
         }
 
         subscription.value = client.subscribe<TData, TVariables>({
-            query: document,
+            query: reactiveDocument.value,
             variables: toValue(reactiveVariables),
             ...options
         })
 
         startObserver()
     }
 
+    const restart = () => {
+        if (enabled.value) {
+            stop()
+            start()
+        }
+    }
+
     // Subscriptions only work on the client-side (require WebSocket)
     // Skip initialization on server during SSR
     if (!isServer()) {
@@ -149,16 +158,13 @@ export function useSubscription<
             }
         })
 
-        watch(reactiveVariables, () => {
-            if (enabled.value) {
-                stop()
-                start()
-            }
-        }, {
+        watch(reactiveVariables, restart, {
             deep: true,
             flush: 'post'
         })
 
+        watch(reactiveDocument, restart)
+
         if (getCurrentScope()) {
             onScopeDispose(() => {
                 stop()