Rule Posts - tRPC

Rule

•Created by Rule on 11/27/2024 in #❓-help

tRPC 404 in Next.js API Routes

I'm trying to upgrade my Next.js version to 15 and still use tRPC with API route. I'm getting 404 for all trpc api routes. Is anyone else facing the same issue? All the other api routes are working fine. app/api/trpc/[trpc]/route.ts

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter } from "./trpc";

const handler = async (request: Request) => {
  return await fetchRequestHandler({
    endpoint: "/api/trpc",
    req: request,
    router: appRouter,
    onError: (opts) => {
      console.error(`[${opts.error.code}] ${opts.path}:`, opts.error);
    },
  });
};

export const GET = handler;
export const POST = handler;

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";

import { appRouter } from "./trpc";

const handler = async (request: Request) => {
  return await fetchRequestHandler({
    endpoint: "/api/trpc",
    req: request,
    router: appRouter,
    onError: (opts) => {
      console.error(`[${opts.error.code}] ${opts.path}:`, opts.error);
    },
  });
};

export const GET = handler;
export const POST = handler;

trpc.ts

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const appRouter = router({
  hello: publicProcedure.query(async () => {
    return "world";
  }),
});

import { initTRPC } from "@trpc/server";

const t = initTRPC.create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const appRouter = router({
  hello: publicProcedure.query(async () => {
    return "world";
  }),
});

10 replies

TtRPC

•Created by Rule on 3/12/2024 in #❓-help

Error using createTRPCQueryUtils

Here is my code.

const trpc = createTRPCReact<TRPCRouter>();
const queryClient = new QueryClient();
const trpcQueryUtils = createTRPCQueryUtils({ queryClient, client: trpc });

const trpc = createTRPCReact<TRPCRouter>();
const queryClient = new QueryClient();
const trpcQueryUtils = createTRPCQueryUtils({ queryClient, client: trpc });

The line three is giving me this error when hovering on client

createUtilityFunctions.d.ts(10, 5): The expected type comes from property 'client' which is declared here on type 'CreateQueryUtilsOptions<AnyRouter>'

The property 'links' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'query' in your router collides with a built-in method, rename this router or procedure on your backend.'.

createUtilityFunctions.d.ts(10, 5): The expected type comes from property 'client' which is declared here on type 'CreateQueryUtilsOptions<AnyRouter>'

The property 'links' in your router collides with a built-in method, rename this router or procedure on your backend." | "The property 'query' in your router collides with a built-in method, rename this router or procedure on your backend.'.

2 replies

TtRPC

•Created by Rule on 2/14/2024 in #❓-help

How to access the query cache data?

I want to be able to use a data from already queried data as an initial data of another query. Is this possible somehow with trpc? I'm using react-query alongside the trpc

2 replies

TtRPC

•Created by Rule on 12/12/2023 in #❓-help

Build error with trpc-panel

Hi. I'm having a trouble building my tRPC api with trpc-panel. I'm using yarn workspaces and trying to build my tRPC api but I'm running to the following error. Has anyone faced the same issue before?

>yarn trpc build
yarn run v1.22.10
$ yarn workspace @repository/trpc build
$ tsc
../node_modules/trpc-panel/lib/src/parse/parseProcedure.d.ts:3:33 - error TS2307: Cannot find module '@src/parse/parseNodeTypes' or its corresponding type declarations.

3 import { ParsedInputNode } from "@src/parse/parseNodeTypes";
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in ../node_modules/trpc-panel/lib/src/parse/parseProcedure.d.ts:3

>yarn trpc build
yarn run v1.22.10
$ yarn workspace @repository/trpc build
$ tsc
../node_modules/trpc-panel/lib/src/parse/parseProcedure.d.ts:3:33 - error TS2307: Cannot find module '@src/parse/parseNodeTypes' or its corresponding type declarations.

3 import { ParsedInputNode } from "@src/parse/parseNodeTypes";
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in ../node_modules/trpc-panel/lib/src/parse/parseProcedure.d.ts:3

2 replies

TtRPC

•Created by Rule on 10/14/2023 in #❓-help

tRPC with with react-query prefetching in Next.js app directory.

Hi. What is currently the best way to do prefetching in Next.js app directory when using @tanstack/react-query and Next.js app directories?

7 replies