yeetcode.io
yeetcode.io
TtRPC
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