Theo's Typesafe Cult•3mo ago

TRPC updated recently, can't use CreateNextContextOptions to implement Clerk

Hi, I tried to follow the Clerk guide https://clerk.com/docs/references/nextjs/trpc and its quite diferent from the code we have. Also tried to follow a guide for clerk +trpc,(https://www.youtube.com/watch?v=ZK-w-yFWfxM) but now, CreateTRPCContext uses directly Headers, (this is the base code) (server/api/trpc.ts)

export const createTRPCContext = async (opts: { headers: Headers, }) => {
  return {
    db,
    ...opts,
  };
};

export const createTRPCContext = async (opts: { headers: Headers, }) => {
  return {
    db,
    ...opts,
  };
};

so If I use this code of the video to implement Clerk Auth

interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject;
}

export const createContextInner = async ({ auth }: AuthContext) => {
  return {
    db,
    auth,
  };
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  return createContextInner({ auth: getAuth(opts.req) });
};

interface AuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject;
}

export const createContextInner = async ({ auth }: AuthContext) => {
  return {
    db,
    auth,
  };
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  return createContextInner({ auth: getAuth(opts.req) });
};

No errors on trpc file, but I get errors in route.ts and in server.ts

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
  });
};

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    headers: req.headers,
  });
};

headers show this error: Object literal may only specify known properties, and 'headers' does not exist in type 'CreateNextContextOptions'.ts(2353) Any idea how to fix this? CreateNextContextOptions does not contain the headers object so not sure how to fix it. thanks! 🙂

7 Replies

Kenzo•3mo ago

Also, server.ts calls createTRPContext, but it doesnt has the req available

Ata Sanchez•3mo ago

Hi @Kenzo any solution with this problem? I'm experimenting the same here 😦

Kenzo•3mo ago

Hi, SORRY i did not saw this reply yes

Ata Sanchez•3mo ago

Hey!! No worries! Jaja

Kenzo•3mo ago

new trpc passes heads and its a mess tbh i just used the ol' way with only auth from clerk

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    auth: getAuth(req),
  });
};

const createContext = async (req: NextRequest) => {
  return createTRPCContext({
    auth: getAuth(req),
  });
};

if u need full example https://github.com/AndreuSCK/T3-Boilerplate-Prisma-Clerk-Trpc @Ata Sanchez

Ata Sanchez•3mo ago

❤️

Kenzo•3mo ago

DATABASE_URL, NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY, CLERK_SECRET_KEY and that would work

Gaming

Programming

TRPC updated recently, can't use CreateNextContextOptions to implement Clerk