Using tRPC in Next.js Middleware

Hello, I am quite new to tRPC so forgive me if I'm asking something quite obvious/dumb.

I was introduced to tRPC by the t3-stack, that I discovered when I started with Next.js. Now onto the question. I am storing user session inside a database and want to validate a user that has a session_tokensession_token cookie by its value. So, the value of the cookie needs to exist in the database. That way I can authenticate the request as well as associate a user.

The problem I was facing is that I was having a hard time trying to access tRPC routes from the Next.js middleware. The t3 stack came with a pre-configured tRPC server and react client. Both of them do not work inside the Next.js middleware, because it runs on the Edge runtime. I have found some posts here that were asking a similar question, but none of them gave me an answer for my question.

One of the posts helped solving the problem by suggesting to create a new client with a httpBatchLinkhttpBatchLink that points to the api/trpcapi/trpc route. And that works the way it's suppose to. But right now, I export 3 apiapi variables:

// src/trpc/react.tsx
export const api = createTRPCReact<AppRouter>();

// src/trpc/react.tsx
export const api = createTRPCReact<AppRouter>();

// src/trpc/server.ts
const createContext = cache(() => {
  const heads = new Headers(headers());
  // ...
});

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    // ...
    () =>
      ({ op }) =>
        observable((observer) => {
          createContext()
            // ...
        }),
  ],
});

// src/trpc/server.ts
const createContext = cache(() => {
  const heads = new Headers(headers());
  // ...
});

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    // ...
    () =>
      ({ op }) =>
        observable((observer) => {
          createContext()
            // ...
        }),
  ],
});

// src/trpc/edge.ts
export const api = createTRPCProxyClient<AppRouter>({
    transformer,
    links: [
        httpBatchLink({
            url: `${getBaseUrl()}/api/trpc`,
            fetch(url, options) {
                return fetch(url, {
                    ...options,
                });
            },
        }),
    ],
});

// src/trpc/edge.ts
export const api = createTRPCProxyClient<AppRouter>({
    transformer,
    links: [
        httpBatchLink({
            url: `${getBaseUrl()}/api/trpc`,
            fetch(url, options) {
                return fetch(url, {
                    ...options,
                });
            },
        }),
    ],
});

Would you say, that what I've done is okay, or am I doing something completely unnecessary here?

Solution

❓-helpReturn TRPC Error from NextJS middleware
Also discussed here

Jump to solution

Using tRPC in Next.js Middleware

// src/trpc/react.tsx
export const api = createTRPCReact<AppRouter>();

// src/trpc/react.tsx
export const api = createTRPCReact<AppRouter>();

// src/trpc/server.ts
const createContext = cache(() => {
  const heads = new Headers(headers());
  // ...
});

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    // ...
    () =>
      ({ op }) =>
        observable((observer) => {
          createContext()
            // ...
        }),
  ],
});

// src/trpc/server.ts
const createContext = cache(() => {
  const heads = new Headers(headers());
  // ...
});

export const api = createTRPCProxyClient<AppRouter>({
  transformer,
  links: [
    // ...
    () =>
      ({ op }) =>
        observable((observer) => {
          createContext()
            // ...
        }),
  ],
});

// src/trpc/edge.ts
export const api = createTRPCProxyClient<AppRouter>({
    transformer,
    links: [
        httpBatchLink({
            url: `${getBaseUrl()}/api/trpc`,
            fetch(url, options) {
                return fetch(url, {
                    ...options,
                });
            },
        }),
    ],
});

// src/trpc/edge.ts
export const api = createTRPCProxyClient<AppRouter>({
    transformer,
    links: [
        httpBatchLink({
            url: `${getBaseUrl()}/api/trpc`,
            fetch(url, options) {
                return fetch(url, {
                    ...options,
                });
            },
        }),
    ],
});

Would you say, that what I've done is okay, or am I doing something completely unnecessary here?

Solution

❓-helpReturn TRPC Error from NextJS middleware
Also discussed here

Jump to solution

Using tRPC in Next.js Middleware

Using tRPC in Next.js Middleware

Continue the conversation

tRPC

Similar Threads

Continue the conversation

tRPC