How to correctly initialise a tRPC router for NextJS

Question

I've currently started migrating a NextJS and Express app to use tRPC. However, I'm having trouble initialising the NextApiHandler.

In the backend folder, I have the following files:

trpc.ts

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

const t = initTRPC.create();

export const router = t.router;
export const procedure = t.procedure;

_app.ts

import { z } from 'zod';
import { procedure, router } from '../trpc';

export const appRouter = router({
  hello: procedure
    .input(
      z.object({
        text: z.string(),
      }),
    )
    .query(({ input }) => ({
      greeting: `hello ${input.text}`,
    })),
});

// export type definition of API
export type AppRouter = typeof appRouter;

However, when I try to set up the tRPC HTTP handle in [trpc].ts which lives in my frontend folder

import * as trpcNext from '@trpc/server/adapters/next';
import { appRouter } from '../../../../backend/src/routers/_app';

export default trpcNext.createNextApiHandler({
  router: appRouter,
  createContext: () => ({}),
});

I get the following error

The expected type comes from property 'router' 
which is declared here on type
'NodeHTTPHandlerOptions<AnyRouter, NextApiRequest, NextApiResponse>'

Similarly, when I try to set up my hooks in the frontend in trpc.ts like the following, I also get the same error.

import { httpBatchLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import type { AppRouter } from '../backend/src/routers/_app';

const getBaseURL = () => {
    if (process.env.API_BASE_URL) {
        return process.env.API_BASE_URL;
    }
    return ...;
}

export const trpc = createTRPCNext<AppRouter>({
    config({ ctx }) {
        return {
          links: [
            httpBatchLink({
              /**
               * If you want to use SSR, you need to use the server's full URL
               * @link https://trpc.io/docs/
               **/
              url: `${getBaseURL()}/api/trpc`,
            }),
          ],
          /**
           * @link https://tanstack.com/query/v4/docs/reference/QueryClient
           **/
          // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
        };
      },
      /**
       * @link https://trpc.io/docs/ssr
       **/
      ssr: false,
});

Note: I've mostly copied my code from the tRPC v10 documentation.

How to correctly initialise a tRPC router for NextJS

0 Answers0