T

TanStack•11mo ago•

8 replies

full-green

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 createTRPCOptionsProxycreateTRPCOptionsProxy 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 '{ 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.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.