From b75d70a0542de581effa0b619020335e2bde8af7 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 10 Nov 2023 12:33:08 +0100 Subject: [PATCH 1/2] lazy load cookies --- cli/template/extras/src/app/layout/with-trpc-tw.tsx | 4 +++- cli/template/extras/src/app/layout/with-trpc.tsx | 4 +++- cli/template/extras/src/trpc/react.tsx | 7 ++++--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/cli/template/extras/src/app/layout/with-trpc-tw.tsx b/cli/template/extras/src/app/layout/with-trpc-tw.tsx index 57b3644c2a..b7c3be8855 100644 --- a/cli/template/extras/src/app/layout/with-trpc-tw.tsx +++ b/cli/template/extras/src/app/layout/with-trpc-tw.tsx @@ -16,6 +16,8 @@ export const metadata = { icons: [{ rel: "icon", url: "/favicon.ico" }], }; +const getCookieString = () => Promise.resolve(cookies().toString()); + export default function RootLayout({ children, }: { @@ -24,7 +26,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/cli/template/extras/src/app/layout/with-trpc.tsx b/cli/template/extras/src/app/layout/with-trpc.tsx index aad84d0259..5dc45a1f5d 100644 --- a/cli/template/extras/src/app/layout/with-trpc.tsx +++ b/cli/template/extras/src/app/layout/with-trpc.tsx @@ -15,6 +15,8 @@ export const metadata = { icons: [{ rel: "icon", url: "/favicon.ico" }], }; +const getCookieString = () => Promise.resolve(cookies().toString()); + export default function RootLayout({ children, }: { @@ -23,7 +25,7 @@ export default function RootLayout({ return ( - + {children} diff --git a/cli/template/extras/src/trpc/react.tsx b/cli/template/extras/src/trpc/react.tsx index beb3e03ce0..868db3feee 100644 --- a/cli/template/extras/src/trpc/react.tsx +++ b/cli/template/extras/src/trpc/react.tsx @@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client"; import { createTRPCReact } from "@trpc/react-query"; -import { useState } from "react"; +import { use, useState } from "react"; import { type AppRouter } from "~/server/api/root"; import { getUrl, transformer } from "./shared"; @@ -12,8 +12,9 @@ export const api = createTRPCReact(); export function TRPCReactProvider(props: { children: React.ReactNode; - cookies: string; + cookiePromise: Promise; }) { + const cookie = use(props.cookiePromise); const [queryClient] = useState(() => new QueryClient()); const [trpcClient] = useState(() => @@ -29,7 +30,7 @@ export function TRPCReactProvider(props: { url: getUrl(), headers() { return { - cookie: props.cookies, + cookie, "x-trpc-source": "react", }; }, From f2ae2cf2a3304cd759892730b970c81b1b016f3c Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Fri, 10 Nov 2023 12:35:35 +0100 Subject: [PATCH 2/2] changeset --- .changeset/spotty-emus-rush.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/spotty-emus-rush.md diff --git a/.changeset/spotty-emus-rush.md b/.changeset/spotty-emus-rush.md new file mode 100644 index 0000000000..e4fd110d5c --- /dev/null +++ b/.changeset/spotty-emus-rush.md @@ -0,0 +1,5 @@ +--- +"create-t3-app": patch +--- + +fix: lazy load cookie to prevent layout from being forced dynamic