Carrein Posts

Carrein

•Created by Carrein on 2/24/2025 in #❓-help

Type 'DecorateQueryProcedure<{ input: string; output: { id: string; name: string; }; transformer: fa

Hi all, I'm been trying to hook TRPC up with my Vite + Express stack. The guides work OK but when I try to use a procedure I get the following error.

This expression is not callable.
  Type 'DecorateQueryProcedure<{ input: string; output: { id: string; name: string; }; transformer: false; errorShape: DefaultErrorShape; }>' has no call signatures.

This expression is not callable.
  Type 'DecorateQueryProcedure<{ input: string; output: { id: string; name: string; }; transformer: false; errorShape: DefaultErrorShape; }>' has no call signatures.

All setup are taken directly from the documents - https://trpc.io/docs/server/adapters/express https://trpc.io/docs/client/tanstack-react-query/setup server.ts

import { initTRPC } from "@trpc/server";
import * as trpcExpress from "@trpc/server/adapters/express";
import express from "express";
import { z } from "zod";

const t = initTRPC.context<Context>().create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: "Bilbo" };
  }),
});

export type AppRouter = typeof appRouter;

// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
const app = express();

app.use(
  "/trpc",
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  })
);

app.listen(4000);

import { initTRPC } from "@trpc/server";
import * as trpcExpress from "@trpc/server/adapters/express";
import express from "express";
import { z } from "zod";

const t = initTRPC.context<Context>().create();
export const appRouter = t.router({
  getUser: t.procedure.input(z.string()).query((opts) => {
    opts.input; // string
    return { id: opts.input, name: "Bilbo" };
  }),
});

export type AppRouter = typeof appRouter;

// created for each request
const createContext = ({
  req,
  res,
}: trpcExpress.CreateExpressContextOptions) => ({}); // no context
type Context = Awaited<ReturnType<typeof createContext>>;
const app = express();

app.use(
  "/trpc",
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  })
);

app.listen(4000);

client/trpc.ts

import { QueryClient } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import { AppRouter } from "../../server/src/server";

export const queryClient = new QueryClient();
const trpcClient = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: "http://localhost:4000" })],
});

export const trpc = createTRPCOptionsProxy<AppRouter>({
  client: trpcClient,
  queryClient,
});

import { QueryClient } from "@tanstack/react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import { AppRouter } from "../../server/src/server";

export const queryClient = new QueryClient();
const trpcClient = createTRPCClient<AppRouter>({
  links: [httpBatchLink({ url: "http://localhost:4000" })],
});

export const trpc = createTRPCOptionsProxy<AppRouter>({
  client: trpcClient,
  queryClient,
});

Home.tsx

import { useQuery } from "@tanstack/react-query";
...
  const user = useQuery(
    trpc.getUser() <--- bugs out
  );

import { useQuery } from "@tanstack/react-query";
...
  const user = useQuery(
    trpc.getUser() <--- bugs out
  );

Hoping I can get eyes on this. Thanks!

2 replies