KyleB•2mo ago

can't create context when using nextjs app dir

Im trying to use the latest version of nextjs and make use of the app directory. when trying to make a create context function like they show in the docs here: https://trpc.io/docs/server/context , it gives the following error when i try to create the handler on the frontend

Types of parameters 'opts' and 'opts' are incompatible.
    Property 'res' is missing in type 'FetchCreateContextFnOptions' but required in type 'CreateNextContextOptions'

Types of parameters 'opts' and 'opts' are incompatible.
    Property 'res' is missing in type 'FetchCreateContextFnOptions' but required in type 'CreateNextContextOptions'

I even try using createNextApiHandler which removes the error from here but causes issues when trying to create the trpc/server.ts file for the server components, particularly when trying to use the createCallerFactory function (see second screenshot)

Type '(opts: CreateNextContextOptions) => {}' is not assignable to type '() => MaybePromise<{}>'.
Target signature provides too few arguments. Expected 1 or more, but got 0.

Type '(opts: CreateNextContextOptions) => {}' is not assignable to type '() => MaybePromise<{}>'.
Target signature provides too few arguments. Expected 1 or more, but got 0.

any help would be apprieciated

Context | tRPC

Your context holds data that all of your tRPC procedures will have access to, and is a great place to put things like database connections or authentication information.

4 Replies

KyleBOP•2mo ago

second screenshot

theAnoymousNobody•2mo ago

did you solve this yet ?

kindlykraken•2mo ago

Same issue any suggestions?

Alex / KATT 🐱•2mo ago

you should use FetchCreateContextFnOptions if you use an app/api/[trpc]/route.ts (and not a pages/api/[trpc].ts) e.g.

import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
export function createContext({
  req,
  resHeaders,
}: FetchCreateContextFnOptions) {
  const user = { name: req.headers.get('username') ?? 'anonymous' };
  return { req, resHeaders, user };
}

import { FetchCreateContextFnOptions } from '@trpc/server/adapters/fetch';
export function createContext({
  req,
  resHeaders,
}: FetchCreateContextFnOptions) {
  const user = { name: req.headers.get('username') ?? 'anonymous' };
  return { req, resHeaders, user };
}

please make a PR to the docs where it'd make it clearer for you

can't create context when using nextjs app dir

Did you find this page helpful?