yeetcode.io Posts

yeetcode.io

•Created by yeetcode.io on 9/27/2024 in #❓-help

all my inferred typings on the frontend are `any`

I have a backend trpc router like this:

import likeRouter from './like';
import postRouter from './post';
import {router} from '../index';
const appRouter = router({like: likeRouter, post: postRouter});
export { appRouter };
export type AppRouter = typeof appRouter;

import likeRouter from './like';
import postRouter from './post';
import {router} from '../index';
const appRouter = router({like: likeRouter, post: postRouter});
export { appRouter };
export type AppRouter = typeof appRouter;

I import the type into my React Native client.

import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
import type { AppRouter } from "../../../backend/src/trpc/routers/app";

import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
import type { AppRouter } from "../../../backend/src/trpc/routers/app";

But when I try to use inferences, it gets typed weirdly:

type RouterOutputs = inferRouterOutputs<AppRouter>;

type RouterOutputs = inferRouterOutputs<AppRouter>;

Gets typed as:

port type { inferRouterInputs, inferRouterOutputs } 
 
@trpc
type RouterOutputs = {
    like: any;
    post: any;
}

port type { inferRouterInputs, inferRouterOutputs } 
 
@trpc
type RouterOutputs = {
    like: any;
    post: any;
}

Why is this happening? My versions across client and server are synced, and I have strict mode on.

4 replies

TtRPC

•Created by yeetcode.io on 7/2/2024 in #❓-help

The inferred type of 'trpc' cannot be named without a reference to '...'

I have a monorepo setup like this: root -tsconfig.json -frontend --tsconfig.json -backend --tsconfig.json I added a reference in the client tsconfig:

  "references": [
    {
      "path": "../backend"
    }
  ],

  "references": [
    {
      "path": "../backend"
    }
  ],

I added "composite": true to my backend tsconfig. In my root tsconfig, I have:

{
  "references": [
    {
      "path": "./backend"
    },
    {
      "path": "./frontend"
    }
  ],
  "files": [],
  "include": [],
  "exclude": ["**/node_modules"]
}

{
  "references": [
    {
      "path": "./backend"
    },
    {
      "path": "./frontend"
    }
  ],
  "files": [],
  "include": [],
  "exclude": ["**/node_modules"]
}

However, now in my client, when I create my trpc instance: export const trpc = createTRPCReact<AppRouter>(); I get a bunch of typing errors:

The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/.prisma/client'. This is likely not portable. A type annotation is necessary.ts(2742)
The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/@types/express'. This is likely not portable. A type annotation is necessary.ts(2742)

The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/.prisma/client'. This is likely not portable. A type annotation is necessary.ts(2742)
The inferred type of 'trpc' cannot be named without a reference to '../../../backend/node_modules/@types/express'. This is likely not portable. A type annotation is necessary.ts(2742)

Where is this coming from and how can I fix it?

38 replies

TtRPC

•Created by yeetcode.io on 7/2/2024 in #❓-help

My TRPC hooks are getting typed as `any`

I'm using a Typescript + Express backend (Node.js, version 18), and a React Native (Typescript) frontend. For some reason by TRPC tanstack-query hooks don't seem to be typing things correctly. I am trying to understand why. I have a monorepo setup with a file structure like this: root -frontend -backend So the frontend and backend files can import from each other, and everything lives under one .git in the root. In my backend, I create a router and export the type:

const appRouter = router({
  myName1: myRouter1,
  myName2: myRouter2,
});

export type AppRouter = typeof appRouter;

const appRouter = router({
  myName1: myRouter1,
  myName2: myRouter2,
});

export type AppRouter = typeof appRouter;

Here is an example typing I get when I hover over a procedure in one of my subrouters. I don't return any in any of my procedures.

const myProcedureName: QueryProcedure<{
    input: number;
    output: ({
        author: {
            id: number;
        };
    } & {
        myDataField: number;
    })[];
}>

const myProcedureName: QueryProcedure<{
    input: number;
    output: ({
        author: {
            id: number;
        };
    } & {
        myDataField: number;
    })[];
}>

In my React Native app, I import the type:

import {createTRPCReact} from '@trpc/react-query';
import type {AppRouter} from 'my/file/path/to/backend';
export const trpc = createTRPCReact<AppRouter>();

import {createTRPCReact} from '@trpc/react-query';
import type {AppRouter} from 'my/file/path/to/backend';
export const trpc = createTRPCReact<AppRouter>();

Then in my App.tsx, I create the trpcClient:

const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      url: `${API_URL}/trpc`,
    }),
  ],
});

const trpcClient = trpc.createClient({
  links: [
    httpBatchLink({
      url: `${API_URL}/trpc`,
    }),
  ],
});

Now when I use a hook:

// useProfile.ts
export default function useProfile(id: number) {
  return trpc.user.myProcedureName.useQuery(id);
}

//MyComponent.ts
function Component() {
  const {data} = useProfile(id);

// useProfile.ts
export default function useProfile(id: number) {
  return trpc.user.myProcedureName.useQuery(id);
}

//MyComponent.ts
function Component() {
  const {data} = useProfile(id);

My data gets typed as any, what am I doing wrong in my setup?

7 replies