Fixed React Query provider. Removed getSession and replaced with getUser to make Supabase happy. Fixed Stepper's responsiveness.

apps/web/app/(marketing)/layout.tsx

@@ -5,7 +5,11 @@ import { SiteHeader } from '~/(marketing)/_components/site-header';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
 async function SiteLayout(props: React.PropsWithChildren) {
-  const user = await getUser();
+  const client = getSupabaseServerComponentClient();
+
+  const {
+    data: { user },
+  } = await client.auth.getUser();
 
   return (
     <div className={'flex min-h-[100vh] flex-col'}>
@@ -19,18 +23,3 @@ async function SiteLayout(props: React.PropsWithChildren) {
 }
 
 export default withI18n(SiteLayout);
-
-async function getUser() {
-  const client = getSupabaseServerComponentClient();
-
-  // Supabase is going to be complaining about this line
-  // since we use getSession instead of getUser
-  // we don't quite care because we only need to know if the user is logged in
-  // to display the user menu in the header.
-  // There is no need to ping the server while navigating to marketing pages.
-  const {
-    data: { session },
-  } = await client.auth.getSession();
-
-  return session?.user;
-}

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

@@ -1,21 +1,23 @@
+'use client';
+
+import { useState } from 'react';
+
 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) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // With SSR, we usually want to set some default staleTime
+            // above 0 to avoid refetching immediately on the client
+            staleTime: 60 * 1000,
+          },
+        },
+      }),
+  );
+
   return (
     <QueryClientProvider client={queryClient}>
       {props.children}