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



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}

http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}

;

return

http://localhost:${process.env.PORT ?? 3000}

http://localhost:${process.env.PORT ?? 3000}

;
}

export const trpc = createTRPCNext<typeof appRouter>({
config(opts) {
return {
links: [
httpBatchLink({
url:

${getBaseUrl()}/api/trpc

${getBaseUrl()}/api/trpc

,

async headers() {
return {};
},
}),
],
};
},

ssr: false,
});
````

If any one can provide me with insight regarding this issue, I'd appreciate it.

tRPC Express server with Next.js

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



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}

http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}

;

return

http://localhost:${process.env.PORT ?? 3000}

http://localhost:${process.env.PORT ?? 3000}

;
}

export const trpc = createTRPCNext<typeof appRouter>({
config(opts) {
return {
links: [
httpBatchLink({
url:

${getBaseUrl()}/api/trpc

${getBaseUrl()}/api/trpc

,

async headers() {
return {};
},
}),
],
};
},

ssr: false,
});
````

If any one can provide me with insight regarding this issue, I'd appreciate it.

tRPC Express server with Next.js

Similar Threads

tRPC Express server with Next.js

Similar Threads

Similar Threads

Similar Threads