Context type conflict with cloudflare-pages-plugin-trpc

[juretopolak]

I'm trying to set up Nuxt 3 with tRPC and Drizzle ORM / CloudFlare D1 Database and I'm stuck with the Context. Looks like the Context type in this module isn't "compatible" with { FetchCreateContextWithCloudflareEnvFnOptions } from 'cloudflare-pages-plugin-trpc'.

Is anyone willing to help me out with how to get this "stack" working? I'm kind of a newbie in TypeScript... 🙂

// server/trpc/context.ts

import { inferAsyncReturnType } from '@trpc/server'
import { FetchCreateContextWithCloudflareEnvFnOptions } from 'cloudflare-pages-plugin-trpc'
import { drizzle } from 'drizzle-orm/d1'

interface Env {
  DB: D1Database
}

export const createContext = async ({
  env,
}: FetchCreateContextWithCloudflareEnvFnOptions<Env>) => ({
  db: drizzle(env.DB),
})

export type Context = inferAsyncReturnType<typeof createContext>

// server/api/trpc/[trpc].ts

import { createNuxtApiHandler } from 'trpc-nuxt'
import { appRouter } from '~/server/trpc/routers'
import { createContext } from '~/server/trpc/context'

export default createNuxtApiHandler({
  router: appRouter,
  createContext, // TS ERROR
})

Type '({ env, }: FetchCreateContextWithCloudflareEnvFnOptions<Env>) => Promise<{ db: DrizzleD1Database<Record<string, never>>; }>' is not assignable to type 'CreateContextFn<CreateRouterInner<RootConfig<{ ctx: { db: DrizzleD1Database<Record<string, never>>; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>'.
  Types of parameters '__0' and 'event' are incompatible.
    Property 'env' is missing in type 'H3Event' but required in type 'FetchCreateContextWithCloudflareEnvFnOptions<Env>'.ts(2322)
index.d.ts(6, 3): 'env' is declared here.
index.d.ts(28, 5): The expected type comes from property 'createContext' which is declared here on type 'ResolveHTTPRequestOptions<CreateRouterInner<RootConfig<{ ctx: { db: DrizzleD1Database<Record<string, never>>; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>'
(property) ResolveHTTPRequestOptions<CreateRouterInner<RootConfig<{ ctx: { db: DrizzleD1Database<Record<string, never>>; }; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>, { ...; }>>.createContext?: CreateContextFn<CreateRouterInner<RootConfig<{
    ctx: {
        db: DrizzleD1Database<Record<string, never>>;
    };
    meta: object;
    errorShape: DefaultErrorShape;
    transformer: DefaultDataTransformer;
}>, {
    ...;
}>> | undefined

Demo project: https://github.com/juretopolak/trpc-nuxt

[juretopolak]

It looks like createContext(event: H3Event) can accept only one parameter of type H3Event.
How can I add D1Database when I need to pass another parameter createContext(event: H3Event, env: Env) to be able to access binded D1 database?

import { inferAsyncReturnType } from '@trpc/server'
import { drizzle } from 'drizzle-orm/d1';
import type { H3Event } from 'h3'

export interface Env {
  DB: D1Database;
}
// TS Error in createContext ./server/api/trpc/[trpc].ts
// export const createContext = async (event: H3Event, env: Env) => {
export const createContext = async (event: H3Event) => {
  const req = event.req
  const res = event.res
  //const db = drizzle(env.DB)
  return { req, res};
};

export type Context = inferAsyncReturnType<typeof createContext>;

All examples I've seen have any number of parameters in the Context function... is it normal that createContext in the createNuxtApiHandler can have only one parameter?

[wobsoriano]

Interesting, I'll take a look and get back to you.