Nomad Posts - Answer Overflow

Nomad

Explore posts from servers

•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

TTCTheo's Typesafe Cult

•Created by Nomad on 11/28/2023 in #questions

Next route handler send response and then continue

Hello, wondering if anyone has a solution or alternatively a decent "work around" here. I'm working with stripe's webhooks and they want you to acknowledge that you received an event as early as possible by responding with a 200 status code, before doing any heavy/expensive tasks. (It's also a requirement in certain cases to work with the items in the event that you have acknowledged it first). However seeing as the way I send a response in a route handler is to return from the function that's not really possible (from what I can see). Looking for any advice on how to do this in a relatively good way. Edit: If it's any help I am working with a newly created T3 app with the app router, trpc, and prisma.

2 replies

TTCTheo's Typesafe Cult

•Created by Nomad on 10/24/2023 in #questions

Deploying SSR Astro and Express in a docker container

Hello! Currently have a Server Side Rendered Astro site, with PayloadCMS as a backend. The astro site is set up with the node SSR adapter. The plan is to use the underlying express server of Payload to also work as the server to run the Astro SSR middleware from the ndoe adapter. The issue is, I'm not exactly sure how to do this in a decent way, considering said middleware needs to be imported in the file where the express server is initialised and that can't really be done before the astro site is built. But it needs to be imported before the payload app is built. Currently the astro and payload codebases are set up in a monorepo in separate workspaces using pnpm. If the astro site was purely static it'd be dead easy in my dockerfile to just build it, copy the folder over and have express set up to serve that. But unfortunately I need SSR. Thanks for any help!

1 replies

Gaming

Programming