Nomad Comments - tRPC

Nomad

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

Weird data type when extending context in fetch adapter

Well, in case anyone sees this I managed to figure it out. When starting a new CF project with the react framework template it creates an additional tsconfig (to the three existing ones from vite). This config (tsconfig.worker.json) references the following types:

"types": [
  "@cloudflare/workers-types/2023-07-01",
  "./worker-configuration.d.ts",
  "vite/client"
]

"types": [
  "@cloudflare/workers-types/2023-07-01",
  "./worker-configuration.d.ts",
  "vite/client"
]

and the first two also need to be referenced in tsconfig.app.json for the files in the src directory to pick up on it. Adding those two removes the issue and allows the types to be inferred correctly 😄

36 replies

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

Weird data type when extending context in fetch adapter

(Second image becomes the same if I just hover over the AppRouter type directly)

36 replies

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

Weird data type when extending context in fetch adapter

Because inside the router file the output type is fine: https://i.nomad.lol/2025/03/13/IgnorantConure.png But when it's imported across into my trpc client file it becomes any: https://i.nomad.lol/2025/03/13/GenuineCockatoo.png

36 replies

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

Weird data type when extending context in fetch adapter

Not sure if it's exactly that but the imports are for sure a bit unconventional with this setup

36 replies

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

Weird data type when extending context in fetch adapter

It did occur to me tho that it might be because the router is defined outside src (because it's defined with the index for cloudflare workers). And the way vite (and cloudflares starter) does it is to split up the tsconfigs

36 replies

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

Weird data type when extending context in fetch adapter

Yea, made sure to upgrade to latest, 5.8.2

36 replies

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

Weird data type when extending context in fetch adapter

Right!? It'd be one thing if it just went to any or something like that, but the type just doesn't make any sense to me

36 replies

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

Weird data type when extending context in fetch adapter

But I can try that if it might help?

36 replies

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

Weird data type when extending context in fetch adapter

I didn't go for the context provider setup because I don't have SSR and wanted to keep it simple

36 replies

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

Weird data type when extending context in fetch adapter

Specifically mentioned in a comment in list item 4:

const trpc = useTRPC(); // use `import { trpc } from './utils/trpc'` if you're using the singleton pattern

const trpc = useTRPC(); // use `import { trpc } from './utils/trpc'` if you're using the singleton pattern

36 replies

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

Weird data type when extending context in fetch adapter

According to the docs that's how to use it when set up like I have with a simple SPA: https://trpc.io/docs/client/tanstack-react-query/setup#3b-setup-without-react-context

36 replies

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

Weird data type when extending context in fetch adapter

(I also tried to straight up use the type of the createContext function just to make sure there's nothing odd with that Context type, but didn't change anything)

36 replies

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

Weird data type when extending context in fetch adapter

Gotcha, I tried moving it all to one file, so I've got this (there's some test procedures for KV in there but that's about it):

import { initTRPC } from "@trpc/server";
import { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch";
import { z } from "zod";

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

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

export const t = initTRPC.context<typeof createContext>().create();

export const appRouter = t.router({
  kvRead: t.procedure
    .input(
      z.object({
        key: z.string(),
      }),
    )
    .query(async ({ input, ctx }) => {
      const val = await ctx.env.medreminder.get(input.key);
      return val;
    }),
  kvWrite: t.procedure
    .input(
      z.object({
        key: z.string(),
      }),
    )
    .mutation(async ({ input, ctx }) => {
      await ctx.env.medreminder.put(
        input.key,
        (Math.random() + 1).toString(36).substring(7),
      );
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

import { initTRPC } from "@trpc/server";
import { FetchCreateContextFnOptions } from "@trpc/server/adapters/fetch";
import { z } from "zod";

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

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

export const t = initTRPC.context<typeof createContext>().create();

export const appRouter = t.router({
  kvRead: t.procedure
    .input(
      z.object({
        key: z.string(),
      }),
    )
    .query(async ({ input, ctx }) => {
      const val = await ctx.env.medreminder.get(input.key);
      return val;
    }),
  kvWrite: t.procedure
    .input(
      z.object({
        key: z.string(),
      }),
    )
    .mutation(async ({ input, ctx }) => {
      await ctx.env.medreminder.put(
        input.key,
        (Math.random() + 1).toString(36).substring(7),
      );
    }),
});
// export type definition of API
export type AppRouter = typeof appRouter;

Unfortunately I still get the same issue: https://i.nomad.lol/2025/03/13/SelfishAmericancrayfish.png

36 replies

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

Weird data type when extending context in fetch adapter

But yea, the reason it's that exact type is simply down to that being what I copy/pasted from the docs

36 replies

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

Weird data type when extending context in fetch adapter

It's used when initiating tRPC

36 replies

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

Weird data type when extending context in fetch adapter

I am of course!

36 replies

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

Weird data type when extending context in fetch adapter

I'm reading things weird here 😂

36 replies

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

Weird data type when extending context in fetch adapter

Oh nvm

36 replies

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

Weird data type when extending context in fetch adapter

I don't believe I'm using it anywhere tho, shall I try to remove it?

36 replies

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

Weird data type when extending context in fetch adapter

It's the way it was done in the guide, here: https://trpc.io/docs/server/adapters/fetch#create-the-context I simply copy/pasted and adapted to my needs

36 replies