🐛 Fix board hydration issues

src/components/Board/context.tsx

@@ -19,18 +19,21 @@ export const BoardProvider = ({ children, userAgent, ...props }: BoardProviderPr
   const { enabled } = useEditModeStore();
   const router = useRouter();
   const { layout } = router.query;
-  const { data: board } = api.boards.byName.useQuery(
+  const { data: queryBoard } = api.boards.byName.useQuery(
     {
       boardName: props.initialBoard.name,
       layoutId: layout as string | undefined,
       userAgent,
     },
     {
-      initialData: props.initialBoard,
-      //enabled: !!layout,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      enabled: typeof window !== 'undefined', // Disable on server-side so it is not cached with an old result.
     }
   );
 
+  const board = queryBoard ?? props.initialBoard; // Initialdata property is not working because it somehow ignores the enabled property.
+
   useConfirmLeavePage(enabled);
 
   return (

src/components/layout/Templates/BoardLayout.tsx

@@ -166,11 +166,7 @@ const ToggleEditModeButton = () => {
     toggleEditMode();
     if (!board || !name) return;
     await saveBoardAsync({ boardId: board.id, sections: board.sections, layoutId: board.layoutId });
-    utils.boards.byName.invalidate({
-      boardName: name,
-      layoutId: board.layoutId,
-      userAgent: navigator.userAgent,
-    });
+    utils.boards.byName.invalidate();
     Consola.log('Saved config to server', name);
     hideNotification(editModeNotificationId);
   };

src/pages/board/[slug].tsx

@@ -6,7 +6,7 @@ import { Board } from '~/components/Board/Board';
 import { BoardProvider } from '~/components/Board/context';
 import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
 import { env } from '~/env';
-import { createTrpcServersideHelpers } from '~/server/api/helper';
+import { boardRouter } from '~/server/api/routers/board';
 import { getServerAuthSession } from '~/server/auth';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
 import { checkForSessionOrAskForLogin } from '~/tools/server/loginBuilder';
@@ -58,9 +58,15 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
     ctx.res
   );
 
-  const helpers = await createTrpcServersideHelpers(ctx);
-  const board = await helpers.boards.byName
-    .fetch({
+  const session = await getServerAuthSession({ req: ctx.req, res: ctx.res });
+
+  const caller = boardRouter.createCaller({
+    session,
+    cookies: ctx.req.cookies,
+    headers: ctx.req.headers,
+  });
+  const board = await caller
+    .byName({
       boardName: routeParams.data.slug,
       layoutId: query.data.layout,
       userAgent: ctx.req.headers['user-agent'],
@@ -78,8 +84,6 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
     };
   }
 
-  const session = await getServerAuthSession({ req: ctx.req, res: ctx.res });
-
   const result = checkForSessionOrAskForLogin(
     ctx,
     session,

src/pages/board/index.tsx

@@ -6,7 +6,7 @@ import { Board } from '~/components/Board/Board';
 import { BoardProvider } from '~/components/Board/context';
 import { BoardLayout } from '~/components/layout/Templates/BoardLayout';
 import { env } from '~/env';
-import { createTrpcServersideHelpers } from '~/server/api/helper';
+import { boardRouter } from '~/server/api/routers/board';
 import { getServerAuthSession } from '~/server/auth';
 import { getDefaultBoardAsync } from '~/server/db/queries/userSettings';
 import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations';
@@ -48,9 +48,13 @@ export const getServerSideProps: GetServerSideProps<BoardGetServerSideProps> = a
   }
   const session = await getServerAuthSession(ctx);
   const boardName = await getDefaultBoardAsync(session?.user?.id, 'default');
-  const helpers = await createTrpcServersideHelpers(ctx);
-  const board = await helpers.boards.byName
-    .fetch({
+  const caller = boardRouter.createCaller({
+    session,
+    cookies: ctx.req.cookies,
+    headers: ctx.req.headers,
+  });
+  const board = await caller
+    .byName({
       boardName,
       layoutId: query.data.layout,
       userAgent: ctx.req.headers['user-agent'],