T
tRPC

❓-help

tRPC Express server with Next.js

Ssumatoken9/14/2023
As much as I hate this, I am required to use Express for back-end and Next.js for front-end. I have two Node.js projects, an Express server and a Next.js client. I did a minimal setup on the back-end side using the Express adapter and it is working fine when i try to hit an endpoint on the browser. index.ts:
const t = initTRPC.context<Context>().create();

export const appRouter = t.router({
hello: t.procedure.query((opts) => {
return { message: "Hello World", ctx: opts.ctx.ex.message };
}),
});

export type AppRouter = typeof appRouter;

app.use(
"/trpc",
trpcExpress.createExpressMiddleware({
router: appRouter,
createContext,
})
);
const t = initTRPC.context<Context>().create();

export const appRouter = t.router({
hello: t.procedure.query((opts) => {
return { message: "Hello World", ctx: opts.ctx.ex.message };
}),
});

export type AppRouter = typeof appRouter;

app.use(
"/trpc",
trpcExpress.createExpressMiddleware({
router: appRouter,
createContext,
})
);
Now when I try to use the trpc client on Next.js I get a TypeError. What I did once I created the Next.js client, is running npm link to be able to import my appRouter. Here is my utils/trpc.ts: ```js import { httpBatchLink } from "@trpc/client"; import { createTRPCNext } from "@trpc/next"; import { appRouter } from "trpc-express"; function getBaseUrl() { if (typeof window !== "undefined") return ""; if (process.env.VERCEL_URL) return https://${process.env.VERCEL_URL}`; if (process.env.RENDER_INTERNAL_HOSTNAME) return http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}; return http://localhost:${process.env.PORT ?? 3000}; } export const trpc = createTRPCNext<typeof appRouter>({ config(opts) { return { links: [ httpBatchLink({ url: ${getBaseUrl()}/api/trpc, async headers() { return {}; }, }), ], }; }, ssr: false, }); ```` If any one can provide me with insight regarding this issue, I'd appreciate it.
No description
Ssachin9/14/2023
is react installed?
Ssumatoken9/14/2023
Yes. It's Next.js. React comes installed by default.
Ssachin9/14/2023
hard to help without a repro then
Ddandadan9/25/2023
this might be inaccurate but maybe it can help I also have a few apps using an express + nextjs setup, but I am not using the Next adapter for trpc. Instead I use the base react adapter. Here's an example, although its from an expo project. But the client setup is exactly the same across all of my projects: https://github.com/Pridestalkerr/expo-chat-t3e-turbo/blob/main/apps/mobile/src/utils/trpc.tsx Now, the big issue with this is that I haven't been able to get it to work inside server components, so if you're working with the app router it might not be what you're looking for. I am currently trying to get another express/nextjs project to work. I'll make sure to get back to you in case I am successful. Best of luck!

Looking for more? Join the community!

Recommended Posts
is Nextjs enough as backend?Hi guys, I'm new to tRPC and would like to rewrite my current project to use single monorepo insteaTS(2742) error when trying to create clientNPM with Node v18.16.1. I get the following error when trying to create a client. I've imported allWrapping useQuery into a custom hookI'm trying to wrap `useQuery` into a custom hook (as I have some legacy code that I need to run befoPass additional data from `useQuery` to contextFor `splitLink` there is a way to pass context value through `useQuery` as second param `{ trpc: { cCannot set headers in procedures with fetch adapterAm i right that with such a setup in nextjs app router route handler: ```ts const handler = async (rDoes anybody now how to fix cors policy error?I am facing this error: Access to fetch at 'http://localhost:3002/trpc/getBotTag?batch=1&input=%7B%7how to handle error from Zod in trpc?I would like to return error instead throwing it away so i could show user nice feedback i found htt404 TRPCError: no query procedure on pathHi, this is my entire standalone tRPC server:```ts import { initTRPC } from "@trpc/server"; import {Call multiple TRPC endpoints from onSuccess()?I would like to create an API chain for analysing a geographic area where one successful API call caHow to set sizeLimit > 1MB (to solve 413 error)?Hi all, I am trying out the T3 stack where I want to send area polygons given by the user to my NexHow to manage server to server communicationWould managing headers this way work in nextjs as server to server communication? or does next managReplacing the dot notation in URLs with forward slash `/` ?is there a way to replace the dot separation with a forward slash instead ? so instead of `/api/t