'use client' with tRPC? Type error: This expression is not callable

From boiler npx create-t3-app@latest using the app router: On simple tRPC file src/server/api/routers/test.ts:

export const dataRouter = createTRPCRouter({
  getCountryList: publicProcedure.query(() => {
    return ["Example1", "Example2"];
  }),

export const dataRouter = createTRPCRouter({
  getCountryList: publicProcedure.query(() => {
    return ["Example1", "Example2"];
  }),

On src/server/api/root.ts :

export const appRouter = createTRPCRouter({
  post: postRouter,
  test: dataRouter
});

export const appRouter = createTRPCRouter({
  post: postRouter,
  test: dataRouter
});

And when calling it from src/app/page.tsx I have no issues at all. But when I do call it from a component in _components folder that has a 'use client' directive it gives me this error. I don't understand since it is the same code replication already available on the boilerplate on the _components/create-post.tsx . So basically:

// src/app/page.tsx
const countries = api.test.getCountryList(); // this works

// src/app/page.tsx
const countries = api.test.getCountryList(); // this works

// src/app/_components/sample-component.tsx
'use client';
const countries = api.test.getCountryList(); // Error

// src/app/_components/sample-component.tsx
'use client';
const countries = api.test.getCountryList(); // Error

Error:

Type error: This expression is not callable.
  Type 'DecoratedQuery<{ input: void; output: string[]; transformer: true; errorShape: { data: { zodError: typeToFlattenedError<any, string> | null; code: "PARSE_ERROR" | "BAD_REQUEST" | ... 13 more ... | "CLIENT_CLOSED_REQUEST"; httpStatus: number; path?: string | undefined; stack?: string | undefined; }; message: string; ...' has no call signatures.

Type error: This expression is not callable.
  Type 'DecoratedQuery<{ input: void; output: string[]; transformer: true; errorShape: { data: { zodError: typeToFlattenedError<any, string> | null; code: "PARSE_ERROR" | "BAD_REQUEST" | ... 13 more ... | "CLIENT_CLOSED_REQUEST"; httpStatus: number; path?: string | undefined; stack?: string | undefined; }; message: string; ...' has no call signatures.

Solution:

api.test.getCountryList.query()

Jump to solution

10 Replies

argcastOP•7mo ago

I am not sure if I am not following a best practices

Solution

GStudiosX2•7mo ago

api.test.getCountryList.query()

GStudiosX2•7mo ago

I think you also may need to await it aswell?

argcastOP•7mo ago

Damn, I'm so stupid. This is the correct code:

const countries = api.test.getCountryList.useQuery();

const countries = api.test.getCountryList.useQuery();

Good question, testing it. I thinkg if I do not await it ts won't know the types later on to do for example a .map ?

GStudiosX2•7mo ago

I haven't used trpc with react so i don't know how you do stuff with that

argcastOP•7mo ago

but with the await it is complaining: Unexpected await of a non-Promise (non-"Thenable") value. [@typescript-eslint/await-thenable] 'await' has no effect on the type of this expression

GStudiosX2•7mo ago

It looks like this is correct for trpc react query i think

argcastOP•7mo ago

ok, just trpc is sending the result inside the datavalue of the object so the correct way is:

const {data: countries} = api.test.getCountryList.useQuery();

const {data: countries} = api.test.getCountryList.useQuery();

So destructuring it at first and then good to go! 🙂

GStudiosX2•7mo ago

https://trpc.io/docs/client/react/useQuery

useQuery() | tRPC

The hooks provided by @trpc/react-query are a thin wrapper around @tanstack/react-query. For in-depth information about options and usage patterns, refer to their docs on queries.

argcastOP•7mo ago

Man.. I'm so rusty on react 😓

Gaming

Programming

'use client' with tRPC? Type error: This expression is not callable