Improved cache invalidation, and minor design fixes

apps/web/components/react-query-provider.tsx

@@ -0,0 +1,24 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// set gcTime to 0 on the server
+// as we cannot invalidate the cache on the server
+const isServer = typeof document === 'undefined';
+const gcTime = isServer ? 0 : undefined;
+const staleTime = isServer ? 0 : 60 * 1000;
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime,
+      staleTime,
+    },
+  },
+});
+
+export function ReactQueryProvider(props: React.PropsWithChildren) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      {props.children}
+    </QueryClientProvider>
+  );
+}

apps/web/components/root-providers.tsx

@@ -2,7 +2,6 @@
 
 import dynamic from 'next/dynamic';
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 import { ThemeProvider } from 'next-themes';
 
@@ -17,8 +16,9 @@ import pathsConfig from '~/config/paths.config';
 import { i18nResolver } from '~/lib/i18n/i18n.resolver';
 import { getI18nSettings } from '~/lib/i18n/i18n.settings';
 
+import { ReactQueryProvider } from './react-query-provider';
+
 const captchaSiteKey = authConfig.captchaTokenSiteKey;
-const queryClient = new QueryClient();
 
 const CaptchaTokenSetter = dynamic(async () => {
   if (!captchaSiteKey) {
@@ -44,7 +44,7 @@ export function RootProviders({
 
   return (
     <MonitoringProvider>
-      <QueryClientProvider client={queryClient}>
+      <ReactQueryProvider>
         <ReactQueryStreamedHydration>
           <I18nProvider settings={i18nSettings} resolver={i18nResolver}>
             <CaptchaProvider>
@@ -64,7 +64,7 @@ export function RootProviders({
             </CaptchaProvider>
           </I18nProvider>
         </ReactQueryStreamedHydration>
-      </QueryClientProvider>
+      </ReactQueryProvider>
     </MonitoringProvider>
   );
 }

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -69,7 +69,7 @@ export function PersonalAccountDropdown({
     const phone = user?.phone ?? undefined;
 
     return email ?? phone;
-  }, [user?.email, user?.phone]);
+  }, [user]);
 
   const displayName =
     personalAccountData?.name ?? account?.name ?? user?.email ?? '';

packages/features/admin/src/components/admin-impersonate-user-dialog.tsx

@@ -140,6 +140,7 @@ function useSetSession(tokens: { accessToken: string; refreshToken: string }) {
 
   return useQuery({
     queryKey: ['impersonate-user', tokens.accessToken, tokens.refreshToken],
+    gcTime: 0,
     queryFn: async () => {
       await supabase.auth.setSession({
         refresh_token: tokens.refreshToken,

packages/supabase/package.json

@@ -33,6 +33,7 @@
     "@types/react": "^18.3.3",
     "next": "14.2.3",
     "react": "18.3.1",
+    "server-only": "^0.0.1",
     "zod": "^3.23.8"
   },
   "eslintConfig": {

packages/supabase/src/hooks/use-auth-change-listener.ts

@@ -4,6 +4,8 @@ import { useEffect } from 'react';
 
 import { usePathname, useRouter } from 'next/navigation';
 
+import { useQueryClient } from '@tanstack/react-query';
+
 import { useSupabase } from './use-supabase';
 import { useRevalidateUserSession, useUserSession } from './use-user-session';
 
@@ -30,11 +32,12 @@ export function useAuthChangeListener({
   const router = useRouter();
   const revalidateUserSession = useRevalidateUserSession();
   const session = useUserSession();
+  const queryClient = useQueryClient();
   const accessToken = session.data?.access_token;
 
   useEffect(() => {
     // keep this running for the whole session unless the component was unmounted
-    const listener = client.auth.onAuthStateChange((event, user) => {
+    const listener = client.auth.onAuthStateChange(async (event, user) => {
       // log user out if user is falsy
       // and if the current path is a private route
       const shouldRedirectUser =
@@ -47,10 +50,14 @@ export function useAuthChangeListener({
         return;
       }
 
+      // revalidate user session when user signs in or out
       if (event === 'SIGNED_OUT') {
+        await queryClient.invalidateQueries();
+
         return router.refresh();
       }
 
+      // revalidate user session when access token is out of sync
       if (accessToken) {
         const isOutOfSync = user?.access_token !== accessToken;
 
@@ -70,6 +77,7 @@ export function useAuthChangeListener({
     pathName,
     appHomePath,
     privatePathPrefixes,
+    queryClient,
   ]);
 }
 

packages/supabase/src/hooks/use-sign-out.ts

@@ -1,13 +1,15 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { useSupabase } from './use-supabase';
 
 export function useSignOut() {
   const client = useSupabase();
+  const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async () => {
       await client.auth.signOut();
+      await queryClient.invalidateQueries();
     },
   });
 }

packages/supabase/src/hooks/use-user.ts

@@ -24,14 +24,10 @@ export function useUser(initialData?: User | null) {
     return Promise.reject('Unexpected result format');
   };
 
-  // update staleTime to 5 minutes
-  const staleTime = 1000 * 60 * 5;
-
   return useQuery({
     queryFn,
     queryKey,
     initialData,
-    staleTime,
     refetchInterval: false,
     refetchOnMount: false,
     refetchOnWindowFocus: false,

packages/ui/src/makerkit/stepper.tsx

@@ -92,7 +92,7 @@ function getClassNameBuilder() {
       },
       selected: {
         true: '',
-        false: '',
+        false: 'hidden sm:flex',
       },
       complete: {
         true: '',