don't pass headers to cc (#843)

t3-oss · Jan 16, 2024 · 4a97c8b · 4a97c8b
1 parent 2988972
commit 4a97c8b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git 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<RouterOutputs["post"]["all"]>;
+}) {
+  // 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
@@ -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 (
     <html lang="en" suppressHydrationWarning>
@@ -54,9 +50,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <TRPCReactProvider headersPromise={getHeaders()}>
-            {props.children}
-          </TRPCReactProvider>
+          <TRPCReactProvider>{props.children}</TRPCReactProvider>
           <div className="absolute bottom-4 right-4">
             <ThemeToggle />
           </div>

diff --git 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 (
     <main className="container h-screen py-16">
@@ -36,7 +33,7 @@ export default async function HomePage() {
               </div>
             }
           >
-            <PostList />
+            <PostList posts={posts} />
           </Suspense>
         </div>
       </div>

diff --git 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<AppRouter>();
 
-export function TRPCReactProvider(props: {
-  children: React.ReactNode;
-  headersPromise: Promise<Headers>;
-}) {
+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
@@ -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),