tRPC•2y ago•

6 replies

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

.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

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

App.tsx

, I create the

trpcClient

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);

data

data

gets typed as

any

any

, what am I doing wrong in my setup?

My TRPC hooks are getting typed as `any`

.git

.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

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

App.tsx

, I create the

trpcClient

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);

data

data

gets typed as

any

any

, what am I doing wrong in my setup?

My TRPC hooks are getting typed as `any`

Similar Threads

My TRPC hooks are getting typed as `any`

Similar Threads

Similar Threads

Similar Threads