feat: enable reactivity of async query variables

nuxt-modules · Feb 29, 2024 · fa2019f · fa2019f
1 parent 581219c
commit fa2019f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 10 deletions.
diff --git a/playground/components/StarlinkDemo.vue b/playground/components/StarlinkDemo.vue
@@ -6,7 +6,7 @@
       </div>
 
       <div class="flex flex-wrap gap-3 items-center">
-        <UButton @click="getShips">
+        <UButton @click="refresh">
           Load Ships
         </UButton>
 
@@ -17,14 +17,19 @@
     </UCard>
 
     <UCard class="p-4">
+      <div class="mb-4">
+        <label for="limit" class="mr-2">Limit:</label>
+        <input class="w-10" type="number" v-model.number="limit" min="1" />
+      </div>
+
       <div>
         Raw Output
       </div>
 
-      <p v-if="loading">
+      <p v-if="pending">
         loading...
       </p>
-      <pre v-else>{{ result }}</pre>
+      <pre v-else>{{ data }}</pre>
     </UCard>
   </div>
 </template>
@@ -33,14 +38,23 @@
 // @ts-ignore
 import queryLaunches from '~/queries/launches.gql'
 
-const queryShips = gql`query ships { ships { id name } }`
+const queryShips = gql`
+  query ships($limit: Int! = 2) {
+    ships(limit: $limit) {
+      id
+      name
+    }
+  }
+`
 
-const { result, restart, loading } = useQuery(queryShips)
+const limit = ref(2)
 
-const getShips = () => restart()
+const { data, refresh, pending } = await useAsyncQuery(queryShips, { limit })
 
-const { load, onError, refetch, result: launchResult } = useLazyQuery(queryLaunches)
-watch(launchResult, v => (result.value = v))
+const { load, onError, refetch, result: launchResult } = useLazyQuery(queryLaunches, undefined, {
+  fetchPolicy: 'no-cache'
+})
+watch(launchResult, v => (data.value = v))
 
 onError(e => console.error(e))
 

diff --git a/src/runtime/composables.ts b/src/runtime/composables.ts
@@ -3,8 +3,7 @@ import { print } from 'graphql'
 import type { OperationVariables, QueryOptions, DefaultContext } from '@apollo/client'
 import type { AsyncData, AsyncDataOptions, NuxtError } from 'nuxt/app'
 import type { NuxtAppApollo } from '../types'
-import { ref, useCookie, useNuxtApp, useAsyncData } from '#imports'
-import NuxtApollo from '#build/apollo'
+import { ref, isRef, reactive, useCookie, useNuxtApp, useAsyncData } from '#imports'
 
 type PickFrom<T, K extends Array<string>> = T extends Array<any> ? T : T extends Record<string, any> ? keyof T extends K[number] ? T : K[number] extends never ? T : Pick<T, K[number]> : T
 type KeysOf<T> = Array<T extends T ? keyof T extends string ? keyof T : never : never>
@@ -105,6 +104,13 @@ const prep = <T> (...args: any[]) => {
     if (!clientId) { throw new Error('@nuxtjs/apollo: no client found') }
   }
 
+  if (variables) {
+    variables = isRef(variables) ? variables : reactive(variables)
+
+    options.watch = options.watch || []
+    options.watch.push(variables) 
+  }
+
   const key = args?.[0]?.key || hash({ query: print(query), variables, clientId })
 
   const fn = () => clients![clientId!]?.query<T>({