fix(query): query refresh on defineQuery output composable call

Author: ElisePatrikainen

playground/src/App.vue

@@ -12,6 +12,10 @@
         <RouterLink to="/contacts">
           Contacts
         </RouterLink>
+        |
+        <RouterLink to="/ecom">
+          T-shirts
+        </RouterLink>
       </nav>
     </div>
   </header>

playground/src/composables/contacts.ts

@@ -0,0 +1,13 @@
+import { defineQuery, useQuery } from '@pinia/colada'
+import { useRouteQuery } from '@vueuse/router'
+import { searchContacts } from '@/api/contacts'
+
+export const useContacts = defineQuery(() => {
+  const searchText = useRouteQuery('search', '', { mode: 'push' })
+  const { ...query } = useQuery({
+    key: () => ['contacts-search', { searchText: searchText.value }],
+    query: ({ signal }) => searchContacts(searchText.value, {}, { signal }),
+    gcTime: 0,
+  })
+  return { ...query, searchText }
+})

playground/src/pages/contacts.vue

@@ -1,14 +1,10 @@
 <script lang="ts" setup>
 import { useRouteQuery } from '@vueuse/router'
-import { useQuery } from '@pinia/colada'
-import { searchContacts } from '@/api/contacts'
+import { useContacts } from '@/composables/contacts'
 
 const searchText = useRouteQuery('search', '', { mode: 'push' })
 
-const { data: searchResult, status } = useQuery({
-  key: () => ['contacts-search', { searchText: searchText.value }],
-  query: ({ signal }) => searchContacts(searchText.value, {}, { signal }),
-})
+const { data: searchResult, status } = useContacts()
 
 // TODO: tip in tests if they are reading data, error or other as they are computed properties, on the server they won't
 // update so they will keep their initial undefined value

src/query-store.ts

@@ -163,12 +163,23 @@ export const useQueryCache = defineStore(QUERY_STORE_ID, () => {
   // this allows use to attach reactive effects to the scope later on
   const scope = getCurrentScope()!
 
-  const defineQueryMap = new WeakMap<() => unknown, any>()
+  const defineQueryMap = new WeakMap<() => unknown, { queries: string[][], result: any }>()
+  let currentDefineQuerySetupFunction: (() => unknown) | null
   function ensureDefinedQuery<T>(fn: () => T): T {
     if (!defineQueryMap.has(fn)) {
-      defineQueryMap.set(fn, scope.run(fn)!)
+      currentDefineQuerySetupFunction = fn
+      defineQueryMap.set(fn, { queries: [], result: null })
+      defineQueryMap.get(fn)!.result = scope.run(fn)!
+      currentDefineQuerySetupFunction = null
+    } else {
+      defineQueryMap.get(fn)!.queries.forEach(
+        (key) => {
+          const query = cachesRaw.get(key) as UseQueryEntry | undefined
+          if (query) refresh(query)
+        },
+      )
     }
-    return defineQueryMap.get(fn)!
+    return defineQueryMap.get(fn)!.result
   }
 
   function ensureEntry<TResult = unknown, TError = ErrorDefault>(
@@ -181,6 +192,10 @@ export const useQueryCache = defineStore(QUERY_STORE_ID, () => {
       )
     }
     const key = keyRaw.map(stringifyFlatObject)
+    if (currentDefineQuerySetupFunction) {
+      const currentDefineQueryEntry = defineQueryMap.get(currentDefineQuerySetupFunction)
+      currentDefineQueryEntry!.queries.push(key)
+    }
     // ensure the state
     // console.log('⚙️ Ensuring entry', key)
     let entry = cachesRaw.get(key) as UseQueryEntry<TResult, TError> | undefined