Nomad Posts

Nomad

•Created by Nomad on 3/13/2025 in #❓-help

Weird data type when extending context in fetch adapter

Environment: * pnpm * Vite react SPA * Node v22.11.0 * tRPC server and client version: 11.0.0-rc.828 * Using tRPC with tanstack query (and the new integration approach) I realise that "weird" is a really bad descriptor, but I honestly don't know what else to call it. I'm using the fetch adapter with CF workers and needed cloudflare's env in my context, I added this like such:

// context.ts
import { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch";

export const createContext = async ({
  req,
  resHeaders,
  env,
}: FetchCreateContextFnOptions & { env: Env }) => {
  return { req, resHeaders, env };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

// workers index
import {
  FetchCreateContextFnOptions,
  fetchRequestHandler,
} from "@trpc/server/adapters/fetch";
import { createContext } from "./context";
import { appRouter } from "./router";

export default {
  fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith("/api")) {
      return fetchRequestHandler({
        endpoint: "/api",
        req: request,
        router: appRouter,
        // add env to the context along with defaults
        createContext: (opts: FetchCreateContextFnOptions) =>
          createContext({ ...opts, env }),
      });
    }

    return env.ASSETS.fetch(request);
  },
} satisfies ExportedHandler<Env>;

// context.ts
import { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch";

export const createContext = async ({
  req,
  resHeaders,
  env,
}: FetchCreateContextFnOptions & { env: Env }) => {
  return { req, resHeaders, env };
};

export type Context = Awaited<ReturnType<typeof createContext>>;

// workers index
import {
  FetchCreateContextFnOptions,
  fetchRequestHandler,
} from "@trpc/server/adapters/fetch";
import { createContext } from "./context";
import { appRouter } from "./router";

export default {
  fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname.startsWith("/api")) {
      return fetchRequestHandler({
        endpoint: "/api",
        req: request,
        router: appRouter,
        // add env to the context along with defaults
        createContext: (opts: FetchCreateContextFnOptions) =>
          createContext({ ...opts, env }),
      });
    }

    return env.ASSETS.fetch(request);
  },
} satisfies ExportedHandler<Env>;

Now this works wonders, I get access to the cloudflare env in my procedures via context and can use KV bindings from there, very nice! Unfortunately the type from the client is very odd, specifically it considers the data from my query to be of type: (() => never) | undefined As in the following:

const query = useQuery(trpc.kvQuery.queryOptions())
query.data
//      ^ (() => never) | undefined

const query = useQuery(trpc.kvQuery.queryOptions())
query.data
//      ^ (() => never) | undefined

Now, this purely from a type pespective, the actual value is there during runtime and works fine. But obviously as soon as the code gets type checked it throws a fit because it thinks I'm trying ot access val on that type. Any help is greatly appreciated!

36 replies