add cross tab browser invalidate query support

Author: shyqerigashi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/openapi-codegen-cli",
-  "version": "2.0.7",
+  "version": "2.0.8-rc.1",
   "keywords": [
     "codegen",
     "openapi",
@@ -119,4 +119,4 @@
     "yarn": ">= 3.2"
   },
   "packageManager": "yarn@4.2.2"
-}
+}

src/assets/useCrossTabQueryInvalidation.ts

@@ -0,0 +1,40 @@
+import type { QueryClient, QueryKey } from "@tanstack/react-query";
+
+const CROSS_TAB_INVALIDATE_KEY = "__rq_invalidate__";
+
+/**
+ * Broadcasts a query invalidation event to all other open tabs via localStorage.
+ *
+ * @param queryKeys - An array of query keys to invalidate (array of arrays).
+ *
+ * NOTE: The `storage` event only fires in *other* tabs — the calling tab
+ * must invalidate its own queryClient separately if needed.
+ */
+export const broadcastQueryInvalidation = (queryKeys: QueryKey[]) => {
+  localStorage.setItem(CROSS_TAB_INVALIDATE_KEY, JSON.stringify({ keys: queryKeys, timestamp: Date.now() }));
+};
+
+/**
+ * Registers a one-time global `storage` event listener that reacts to
+ * cross-tab invalidation broadcasts. Safe to call from multiple hooks —
+ * only the first call sets up the listener.
+ */
+let isListenerSetUp = false;
+
+export const setupCrossTabListener = (queryClient: QueryClient) => {
+  if (isListenerSetUp) return;
+  isListenerSetUp = true;
+
+  window.addEventListener("storage", (e: StorageEvent) => {
+    if (e.key !== CROSS_TAB_INVALIDATE_KEY || !e.newValue) return;
+
+    try {
+      const { keys } = JSON.parse(e.newValue) as { keys: QueryKey[] };
+      for (const queryKey of keys) {
+        queryClient.invalidateQueries({ queryKey });
+      }
+    } catch {
+      // Ignore malformed payloads
+    }
+  });
+};

src/assets/useMutationEffects.ts

@@ -1,12 +1,15 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 
 import { OpenApiQueryConfig } from "@povio/openapi-codegen-cli";
 import { QueryKey, useQueryClient } from "@tanstack/react-query";
 
 import { QueryModule } from "./queryModules";
+import { broadcastQueryInvalidation, setupCrossTabListener } from "./useCrossTabQueryInvalidation";
 
 export interface MutationEffectsOptions {
   invalidateCurrentModule?: boolean;
+  crossTabInvalidation?: boolean;
+  invalidationMap?: Record<string, (context: Record<string, string>) => QueryKey[]>;
   invalidateModules?: QueryModule[];
   invalidateKeys?: QueryKey[];
   preferUpdate?: boolean;
@@ -20,6 +23,11 @@ export function useMutationEffects({ currentModule }: UseMutationEffectsProps) {
   const queryClient = useQueryClient();
   const config = OpenApiQueryConfig.useConfig();
 
+  useEffect(() => {
+    if (!config.crossTabInvalidation) return;
+    setupCrossTabListener(queryClient);
+  }, [queryClient, config.crossTabInvalidation]);
+
   const runMutationEffects = useCallback(
     async <TData>(data: TData, options: MutationEffectsOptions = {}, updateKeys?: QueryKey[]) => {
       const { invalidateCurrentModule = true, invalidateModules, invalidateKeys, preferUpdate } = options;
@@ -30,6 +38,8 @@ export function useMutationEffects({ currentModule }: UseMutationEffectsProps) {
       const isQueryKeyEqual = (keyA: QueryKey, keyB: QueryKey) =>
         keyA.length === keyB.length && keyA.every((item, index) => item === keyB[index]);
 
+      const invalidatedQueryKeys: QueryKey[] = [];
+
       queryClient.invalidateQueries({
         predicate: ({ queryKey }) => {
           const isUpdateKey = updateKeys?.some((key) => isQueryKeyEqual(queryKey, key));
@@ -40,15 +50,29 @@ export function useMutationEffects({ currentModule }: UseMutationEffectsProps) {
           const isCurrentModule = shouldInvalidateCurrentModule && queryKey[0] === currentModule;
           const isInvalidateModule = !!invalidateModules && invalidateModules.some((module) => queryKey[0] === module);
           const isInvalidateKey = !!invalidateKeys && invalidateKeys.some((key) => isQueryKeyEqual(queryKey, key));
-          return isCurrentModule || isInvalidateModule || isInvalidateKey;
+
+          const map = config.invalidationMap?.[currentModule]?.(data);
+          const isMappedKey = !!map && map.some((key) => isQueryKeyEqual(queryKey, key));
+
+          const shouldInvalidate = isCurrentModule || isInvalidateModule || isInvalidateKey || isMappedKey;
+
+          if (shouldInvalidate && config.crossTabInvalidation) {
+            invalidatedQueryKeys.push([...queryKey]);
+          }
+
+          return shouldInvalidate;
         },
       });
 
+      if (config.crossTabInvalidation && invalidatedQueryKeys.length > 0) {
+        broadcastQueryInvalidation(invalidatedQueryKeys);
+      }
+
       if (shouldUpdate && updateKeys) {
         updateKeys.map((queryKey) => queryClient.setQueryData(queryKey, data));
       }
     },
-    [queryClient, currentModule, config.preferUpdate],
+    [queryClient, currentModule, config.preferUpdate, config.invalidationMap, config.crossTabInvalidation],
   );
 
   return { runMutationEffects };

src/generators/const/deps.const.ts

@@ -46,6 +46,12 @@ export const MUTATION_EFFECTS = {
 };
 export const MUTATION_EFFECTS_FILE: GenerateFile = { fileName: "useMutationEffects", extension: "ts" };
 
+// CrossTabQueryInvalidation
+export const CROSS_TAB_QUERY_INVALIDATION_FILE: GenerateFile = {
+  fileName: "useCrossTabQueryInvalidation",
+  extension: "ts",
+};
+
 // ZodExtended
 export const ZOD_EXTENDED = {
   namespace: "ZodExtended",

src/generators/utils/generate-files.utils.ts

@@ -1,6 +1,7 @@
 import { ACL_APP_ABILITY_FILE, ACL_CHECK_FILE } from "@/generators/const/acl.const";
 import {
   APP_REST_CLIENT_FILE,
+  CROSS_TAB_QUERY_INVALIDATION_FILE,
   MUTATION_EFFECTS_FILE,
   QUERY_MODULES_FILE,
   ZOD_EXTENDED_FILE,
@@ -50,7 +51,7 @@ export function getMutationEffectsFiles(data: GenerateData, resolver: SchemaReso
   }
 
   return [
-    ...getAssetFiles([MUTATION_EFFECTS_FILE], resolver),
+    ...getAssetFiles([MUTATION_EFFECTS_FILE, CROSS_TAB_QUERY_INVALIDATION_FILE], resolver),
     {
       fileName: getOutputFileName({
         output: resolver.options.output,

src/lib/config/queryConfig.context.tsx

@@ -1,18 +1,25 @@
+import type { QueryKey } from "@tanstack/react-query";
 import { createContext, use, useMemo } from "react";
 import { PropsWithChildren } from "react";
 
 export namespace OpenApiQueryConfig {
   interface Type {
     preferUpdate?: boolean;
     invalidateCurrentModule?: boolean;
+    invalidationMap?: Record<string, (context: Record<string, string>) => QueryKey[]>;
+    crossTabInvalidation?: boolean;
   }
 
   const Context = createContext<Type>({});
 
   type ProviderProps = Type;
 
-  export const Provider = ({ preferUpdate, invalidateCurrentModule, children }: PropsWithChildren<ProviderProps>) => {
-    const value = useMemo(() => ({ preferUpdate, invalidateCurrentModule }), [preferUpdate, invalidateCurrentModule]);
+  export const Provider = ({ preferUpdate, invalidateCurrentModule,
+    invalidationMap,
+    crossTabInvalidation,
+
+    children }: PropsWithChildren<ProviderProps>) => {
+    const value = useMemo(() => ({ preferUpdate, invalidateCurrentModule, invalidationMap, crossTabInvalidation }), [preferUpdate, invalidateCurrentModule, invalidationMap   , crossTabInvalidation]);
 
     return <Context.Provider value={value}>{children}</Context.Provider>;
   };