Setting up new TanStack React Query with Server Components and Fetch Adapter
I'm following the documentation for creating a tRPC caller for server components here https://trpc.io/docs/client/tanstack-react-query/server-components#5-create-a-trpc-caller-for-server-components
I'm using NextJS app router and the Fetch adapter with my context.
When I try and configure the
createTRPCOptionsProxy I pass my createContext function I get the following error:
Type '(opts: FetchCreateContextFnOptions) => Promise<{ headers: { [k: string]: string; }; userId: string | null; }>' is not assignable to type '{ headers: { [k: string]: string; }; userId: string | null; } | (() => MaybePromise<{ headers: { [k: string]: string; }; userId: string | null; }>)'.
Type '(opts: FetchCreateContextFnOptions) => Promise<{ headers: { [k: string]: string; }; userId: string | null; }>' is not assignable to type '() => MaybePromise<{ headers: { [k: string]: string; }; userId: string | null; }>'. Target signature provides too few arguments. Expected 1 or more, but got 0.
Does anyone have any suggestions for what I can do? I'm probably missing something obvious.Set up with React Server Components | tRPC
This guide is an overview of how one may use tRPC with a React Server Components (RSC) framework such as Next.js App Router.
6 Replies
xenial-black•10mo ago
We won't be able to give you a good answer here without a code reproduction. That error message looks like the function isn't async but I'm really not sure.
blank-aquamarineOP•10mo ago
I've setup a stackblitz here: https://stackblitz.com/~/github.com/jnthn18/trpc-test
I think my confusion is with initializing the Fetch adapter context options for the trpc/server.tsx createTRPCOptionsProxy context.
xenial-black•10mo ago
Yeah I figured it out, the ctx function can't take any options, it's either a object or a function with no arguments e.g
() => ctx
Fetch caller seems fine for the app router handlersblank-aquamarineOP•10mo ago
Sorry I'm still a little new to some of this. What do you mean fetch caller seems fine for the app router handlers? Are you suggesting I don't need the server.tsx and should make a fetch call directly from my server component?
Ok I realized what I was doing wrong.
For this particular setup you need to have an inner and outer context configured.
The inner context should have optional options that are a partial of the fetch adapter context options.
If I had taken the time to setup a db provider I would include that in the inner context.
Then in server.tsx you pass createInnerContext instead of the outer context.
If my understanding is incorrect then let me know
xenial-black•10mo ago
Specifically, the issue with the typescript errors you had is that Tanstack Query
createTRPCOptionsProxy doesn't pass any options to its ctx creation function, so you can just remove those. Rest of the app seems fine.blank-aquamarineOP•10mo ago
Sounds good, thanks!