fix(queryCache): track & dispose keys on instance cleanup

Author: ChronicStone

playground/middleware/cleanup.global.ts

@@ -0,0 +1,3 @@
+export default defineNuxtRouteMiddleware((to) => {
+  console.log("CLEANUP");
+});

playground/pages/examples/basic-text.vue

@@ -11,7 +11,7 @@ const searchQuery = useRouteQuery({
 const username = useRouteQuery({
     key: 'user',
     schema: z.string(),
-    default: ''
+    default: '',
 })
 
 const resetToDefaults = () => {

playground/pages/examples/nested.vue

@@ -37,13 +37,13 @@
 
                     <div class="space-y-4">
                         <UFormField label="Theme">
-                            <USelectMenu v-model="userProfile.preferences.theme" :options="themeOptions"
-                                value-attribute="value" option-attribute="label" />
+                            <USelectMenu v-model="userProfile.preferences.theme" :items="themeOptions"
+                                value-key="value" />
                         </UFormField>
 
                         <UFormField label="Language">
-                            <USelectMenu v-model="userProfile.preferences.language" :options="languageOptions"
-                                value-attribute="value" option-attribute="label" />
+                            <USelectMenu v-model="userProfile.preferences.language" :items="languageOptions"
+                                value-key="value" />
                         </UFormField>
 
                         <UFormField label="Notifications">
@@ -114,16 +114,16 @@ const userProfile = useRouteQuery({
             email: z.string(),
             phone: z.string()
         }),
-        preferences: z.record(z.string(), z.any())
-        // z.object({
-        //     theme: z.enum(['light', 'dark', 'system']),
-        //     language: z.string(),
-        //     notifications: z.object({
-        //         email: z.boolean(),
-        //         push: z.boolean(),
-        //         sms: z.boolean()
-        //     })
-        // })
+        preferences:
+            z.object({
+                theme: z.enum(['light', 'dark', 'system']),
+                language: z.string(),
+                notifications: z.object({
+                    email: z.boolean(),
+                    push: z.boolean(),
+                    sms: z.boolean()
+                })
+            })
     },
     default: {
         personal: {

src/queryManager.ts

@@ -7,12 +7,12 @@ import type { GenericObject } from "./types";
  */
 export class GlobalQueryManager {
   private static instance: GlobalQueryManager;
-  private updates: Map<string, { value: any; mode: "push" | "replace" }> =
-    new Map();
+  private updates: Map<string, { value: any; mode: "push" | "replace" }> = new Map();
   private processingPromise: Promise<void> | null = null;
   private router: any = null;
   private currentQuery: Record<string, any> = {};
   private initialQueryHandled = false;
+  private instances = new Map<symbol, string[]>();
 
   private constructor() {}
 
@@ -31,6 +31,27 @@ export class GlobalQueryManager {
     }
   }
 
+  registerInstance(instanceId: symbol, schemaKeys: string[]) {
+    this.instances.set(instanceId, schemaKeys);
+  }
+
+  unregisterInstance(instanceId: symbol) {
+    const keys = this.instances.get(instanceId);
+    if(!keys) return;
+
+    this.instances.delete(instanceId);
+    for (const key of keys) {
+      if(!this.isKeyOwnedByInstance(key)) delete this.currentQuery[key];
+    }
+  }
+
+  isKeyOwnedByInstance(key: string) {
+    for (const [instanceId, keys] of this.instances.entries()) 
+      if (keys.includes(key))  return true;
+    return false;
+  }
+
+
   enqueue(key: string, value: any, mode: "push" | "replace" = "replace") {
     this.updates.set(key, { value, mode });
 
@@ -126,4 +147,9 @@ export class GlobalQueryManager {
       this.enqueue(key, undefined, mode);
     });
   }
+
+  static cleanup() {
+    // @ts-expect-error
+    GlobalQueryManager.instance = null;
+  }
 }

src/useRouteQuery.ts

@@ -1,5 +1,5 @@
 // useRouteQuery.ts
-import { type Ref, ref, toRaw, watch } from "vue";
+import { type Ref, onUnmounted, ref, toRaw, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { z } from "zod";
 import { GlobalQueryManager } from "./queryManager";
@@ -30,7 +30,9 @@ export function useRouteQuery<
   const route = useRoute();
   const router = useRouter();
   const defaultValue = params.default;
-  const mode = params.mode ?? "replace"; // Default to 'replace' if not specified
+  const mode = params.mode ?? "replace";
+  const instanceId = Symbol();
+  // Default to 'replace' if not specified
 
   if (params.debug)
     console.log("useRouteQuery init with:", {
@@ -40,14 +42,20 @@ export function useRouteQuery<
       mode: mode,
     });
   const queryManager = GlobalQueryManager.getInstance();
-  const { nullable = false, key: rootKey } = params;
 
-  // Validate that single value schemas have a key
+  const { nullable = false, key: rootKey } = params;
   if (params.schema instanceof z.ZodType && !rootKey) {
     throw new Error("key is required for single value schemas");
   }
 
+  const instanceKeys = params.schema instanceof z.ZodType || params.key
+  ? [params.key!] 
+  : Object.keys(params.schema)
+
   queryManager.init(router, route.query);
+  queryManager.registerInstance(instanceId, instanceKeys);
+
+  onUnmounted(() => queryManager.unregisterInstance(instanceId));
 
   const baseSchema =
     params.schema instanceof z.ZodType