sumatoken
sumatoken10mo ago

tRPC Express server with Next.js

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
4 Replies
sachin
sachin10mo ago
is react installed?
sumatoken
sumatoken10mo ago
Yes. It's Next.js. React comes installed by default.
sachin
sachin10mo ago
hard to help without a repro then
dandadan
dandadan10mo ago
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!
GitHub
expo-chat-t3e-turbo/apps/mobile/src/utils/trpc.tsx at main · Prides...
Contribute to Pridestalkerr/expo-chat-t3e-turbo development by creating an account on GitHub.