From 478cffc0156a8fbf03879130e8f72bbae5334e70 Mon Sep 17 00:00:00 2001 From: juliusmarminge Date: Tue, 16 Jan 2024 09:38:50 +0100 Subject: [PATCH] don't pass headers to cc --- apps/nextjs/src/app/_components/posts.tsx | 12 ++++++++++-- apps/nextjs/src/app/layout.tsx | 8 +------- apps/nextjs/src/app/page.tsx | 9 +++------ apps/nextjs/src/trpc/react.tsx | 7 ++----- packages/api/src/router/post.ts | 2 +- 5 files changed, 17 insertions(+), 21 deletions(-) diff --git a/apps/nextjs/src/app/_components/posts.tsx b/apps/nextjs/src/app/_components/posts.tsx index 4e06accc3..e35153ca5 100644 --- a/apps/nextjs/src/app/_components/posts.tsx +++ b/apps/nextjs/src/app/_components/posts.tsx @@ -1,5 +1,7 @@ "use client"; +import { use } from "react"; + import type { RouterOutputs } from "@acme/api"; import { cn } from "@acme/ui"; import { Button } from "@acme/ui/button"; @@ -79,8 +81,14 @@ export function CreatePostForm() { ); } -export function PostList() { - const [posts] = api.post.all.useSuspenseQuery(); +export function PostList(props: { + posts: Promise; +}) { + // TODO: Make `useSuspenseQuery` work without having to pass a promise from RSC + const initialData = use(props.posts); + const { data: posts } = api.post.all.useQuery(undefined, { + initialData, + }); if (posts.length === 0) { return ( diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx index 0d5fbaf41..8292fced3 100644 --- a/apps/nextjs/src/app/layout.tsx +++ b/apps/nextjs/src/app/layout.tsx @@ -1,6 +1,4 @@ import type { Metadata, Viewport } from "next"; -import { cache } from "react"; -import { headers } from "next/headers"; import { GeistMono } from "geist/font/mono"; import { GeistSans } from "geist/font/sans"; @@ -41,8 +39,6 @@ export const viewport: Viewport = { ], }; -const getHeaders = cache(async () => headers()); - export default function RootLayout(props: { children: React.ReactNode }) { return ( @@ -54,9 +50,7 @@ export default function RootLayout(props: { children: React.ReactNode }) { )} > - - {props.children} - + {props.children}
diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx index e58d3b619..6f030fc67 100644 --- a/apps/nextjs/src/app/page.tsx +++ b/apps/nextjs/src/app/page.tsx @@ -11,11 +11,8 @@ import { export const runtime = "edge"; export default async function HomePage() { - // You don't need to fetch these here, just showing different usages - // If you don't want the Suspense loading state, you could pass these - // posts as props as use as initialData in the query. - const posts = await api.post.all(); - console.log("RSC Posts:", posts); + // You can await this here if you don't want to show Suspense fallback below + const posts = api.post.all(); return (
@@ -36,7 +33,7 @@ export default async function HomePage() { } > - + diff --git a/apps/nextjs/src/trpc/react.tsx b/apps/nextjs/src/trpc/react.tsx index 73b2804d4..504ec4d02 100644 --- a/apps/nextjs/src/trpc/react.tsx +++ b/apps/nextjs/src/trpc/react.tsx @@ -10,10 +10,7 @@ import type { AppRouter } from "@acme/api"; export const api = createTRPCReact(); -export function TRPCReactProvider(props: { - children: React.ReactNode; - headersPromise: Promise; -}) { +export function TRPCReactProvider(props: { children: React.ReactNode }) { const [queryClient] = useState(() => new QueryClient()); const [trpcClient] = useState(() => @@ -28,7 +25,7 @@ export function TRPCReactProvider(props: { unstable_httpBatchStreamLink({ url: getBaseUrl() + "/api/trpc", async headers() { - const headers = new Headers(await props.headersPromise); + const headers = new Headers(); headers.set("x-trpc-source", "nextjs-react"); return headers; }, diff --git a/packages/api/src/router/post.ts b/packages/api/src/router/post.ts index ad9b3aad2..1f6bdb07f 100644 --- a/packages/api/src/router/post.ts +++ b/packages/api/src/router/post.ts @@ -6,7 +6,7 @@ import { CreatePostSchema } from "@acme/validators"; import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc"; export const postRouter = createTRPCRouter({ - all: publicProcedure.query(({ ctx }) => { + all: protectedProcedure.query(({ ctx }) => { // return ctx.db.select().from(schema.post).orderBy(desc(schema.post.id)); return ctx.db.query.post.findMany({ orderBy: desc(schema.post.id),