feat: add ForceClearQueryCacheProvider

Author: joshunrau

.env.template

@@ -88,6 +88,8 @@ VITE_DEV_PASSWORD=Password12345678
 API_BASE_URL=http://localhost:5500
 # The number of miliseconds to delay the result of HTTP requests in development
 VITE_DEV_NETWORK_LATENCY=0
+# Whether to force clear queries when the pathname changes
+VITE_DEV_FORCE_CLEAR_QUERY_CACHE=false
 # Plausable analytics config (optional, set both to an empty string to disable)
 PLAUSIBLE_BASE_URL=
 PLAUSIBLE_WEB_DATA_DOMAIN=

apps/web/src/Routes.tsx

@@ -16,6 +16,7 @@ import { sessionRoute } from './features/session';
 import { uploadRoute } from './features/upload';
 import { userRoute } from './features/user';
 import { DisclaimerProvider } from './providers/DisclaimerProvider';
+import { ForceClearQueryCacheProvider } from './providers/ForceClearQueryCacheProvider';
 import { WalkthroughProvider } from './providers/WalkthroughProvider';
 import { useAppStore } from './store';
 
@@ -33,7 +34,9 @@ const protectedRoutes: RouteObject[] = [
     element: (
       <DisclaimerProvider>
         <WalkthroughProvider>
-          <Layout />
+          <ForceClearQueryCacheProvider>
+            <Layout />
+          </ForceClearQueryCacheProvider>
         </WalkthroughProvider>
       </DisclaimerProvider>
     ),

apps/web/src/config.ts

@@ -11,6 +11,7 @@ const $Config = z.object({
     .optional(),
   dev: z.object({
     isBypassAuthEnabled: $BooleanString.optional(),
+    isForceClearQueryCacheEnabled: $BooleanString.optional(),
     networkLatency: z.coerce.number().int().nonnegative().optional(),
     password: z.string().min(1).optional(),
     username: z.string().min(1).optional()
@@ -38,6 +39,7 @@ export const config = await $Config
         : undefined,
     dev: {
       isBypassAuthEnabled: import.meta.env.VITE_DEV_BYPASS_AUTH,
+      isForceClearQueryCacheEnabled: import.meta.env.VITE_DEV_FORCE_CLEAR_QUERY_CACHE,
       networkLatency: import.meta.env.VITE_DEV_NETWORK_LATENCY,
       password: import.meta.env.VITE_DEV_PASSWORD,
       username: import.meta.env.VITE_DEV_USERNAME

apps/web/src/providers/ForceClearQueryCacheProvider.tsx

@@ -0,0 +1,27 @@
+import { Fragment, useEffect } from 'react';
+
+import { useQueryClient } from '@tanstack/react-query';
+import { useLocation } from 'react-router-dom';
+
+import { config } from '@/config';
+
+let ForceClearQueryCacheProvider: React.FC<{ children: React.ReactNode }>;
+
+if (config.dev.isForceClearQueryCacheEnabled) {
+  // eslint-disable-next-line react/function-component-definition
+  ForceClearQueryCacheProvider = function ForceClearQueryCacheProvider({ children }) {
+    const queryClient = useQueryClient();
+    const location = useLocation();
+
+    useEffect(() => {
+      //queryClient.clear();
+      queryClient.clear();
+    }, [location.pathname]);
+
+    return <>{children}</>;
+  };
+} else {
+  ForceClearQueryCacheProvider = Fragment;
+}
+
+export { ForceClearQueryCacheProvider };

apps/web/src/vite-env.d.ts

@@ -6,6 +6,8 @@
 // All of these should be undefined in production
 interface ImportMetaDevEnv {
   readonly VITE_DEV_BYPASS_AUTH?: string;
+  readonly VITE_DEV_FORCE_CLEAR_QUERY_CACHE?: string;
+  readonly VITE_DEV_NETWORK_LATENCY?: string;
   readonly VITE_DEV_PASSWORD?: string;
   readonly VITE_DEV_USERNAME?: string;
 }
@@ -19,7 +21,6 @@ interface ImportMetaEnv extends ImportMetaDevEnv {
   readonly LICENSE_URL?: string;
   readonly PLAUSIBLE_BASE_URL?: string;
   readonly PLAUSIBLE_WEB_DATA_DOMAIN?: string;
-  readonly VITE_DEV_NETWORK_LATENCY?: string;
 }
 
 interface ImportMeta {