bug: useSuspenseQuery will get "UNAUTHORIZED" tRPC error

[Crayon-ShinChan]

Provide environment information

System:
OS: macOS 14.2.1
CPU: (8) arm64 Apple M1 Pro
Memory: 196.13 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
Yarn: 1.22.21 - ~/.nvm/versions/node/v20.9.0/bin/yarn
npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
pnpm: 8.14.0 - ~/Library/pnpm/pnpm

Describe the bug

If we have a protected api like:

  hello: protectedProcedure
    .input(z.object({ text: z.string() }))
    .query(async ({ input }) => {
      // wait for 1 second
      await new Promise((resolve) => setTimeout(resolve, 1000));

      return {
        greeting: `Hello ${input.text}`,
      };
    }),

Then we use useSuspenseQuery

"use client";

import { api } from "@/trpc/react";
import { Suspense } from "react";

export default function TestSuspense() {
 return (
   <div>
     <h1>Test Suspense</h1>
     <Suspense fallback={<div>Loading...</div>}>
       <SayHi />
     </Suspense>
   </div>
 );
}

function SayHi() {
 const [greet, getGreet] = api.post.hello.useSuspenseQuery({
   text: "Suspense user",
 });

 return <div>{greet.greeting}</div>;
}

We will get the error UNAUTHORIZED from

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.session || !ctx.session.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

CleanShot.2024-02-19.at.17.54.35.mp4

You can check the detail of my code in this commit: Crayon-ShinChan/t3-trpc-suspense-bug@b747bba

Reproduction repo

https://github.com/Crayon-ShinChan/t3-trpc-suspense-bug

To reproduce

1. clone the repo
2. Go to Discord Portal to create an oauth app for this repo and copy paste the DISCORD_CLIENT_ID,DISCORD_CLIENT_SECRET to .env file
3. pnpm dev

Additional information

No response

[juliusmarminge]

Yup this is a limitation in Next since they don't provide any primitive to access headers from a client component during the SSR prepass phase, so queries made on the server wont be authed...

You can fix this by prefetching the data in an RSC and hydrating the query client or pass the initial data as props.

Unfortunately not much we can do here, there is a community package https://github.com/moshest/next-client-cookies that "hacks" around it although I've never tried it

[mattiaseyram]

Any update or ways around this? Would be great to use useSuspenseQuery