Swaroop Comments

Swaroop

•Created by TaylorFay on 1/12/2024 in #❓-help

trpc output dates are typed as strings and not dates

I tried superjson transformer recently with the App router Next.js. It worked for me. Giving a reproducible repo will help much to solve this issue.

9 replies

TtRPC

•Created by Swaroop on 2/8/2024 in #❓-help

How to pass headers from serverActions in Next.js App router.

Resolved it by moving clerk auth() to tRPC middleware with that server don't need to pass or the inner context doesn't need to have Clerk auth() as it doesn't depend on req or res objects.

5 replies

TtRPC

•Created by Swaroop on 2/8/2024 in #❓-help

How to pass headers from serverActions in Next.js App router.

serverClient is actually working post login but on building my application and on public pages I'm getting the error.

5 replies

TtRPC

•Created by Swaroop on 2/8/2024 in #❓-help

How to pass headers from serverActions in Next.js App router.

Related code blocks: server/context.ts

import * as trpc from "@trpc/server";
import * as trpcFetch from "@trpc/server/adapters/fetch";
import { PrismaClient } from "@prisma/client";
import {
  SignedInAuthObject,
  SignedOutAuthObject,
  auth,
  getAuth,
} from "@clerk/nextjs/server";
import { NextApiRequest } from "next";
import { headers } from "next/headers";
import { NextRequest } from "next/server";
import { RequestCookies } from "next/dist/compiled/@edge-runtime/cookies";

interface ClerkAuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject;
}

/**
 * Inner context. Will always be available in your procedures, in contrast to the outer context.
 *
 * Useful for:
 * - testing, database-connection and server-side helpers,  so you don't have to mock Next.js' `req`/`res`
 *
 * @link https://trpc.io/docs/v11/context#inner-and-outer-context
 */
export const createInnerContext = async ({ auth }: ClerkAuthContext) => {
  const prisma = new PrismaClient();

  return {
    auth,
    prisma,
  };
};

export async function createContext(
  opts?: trpcFetch.FetchCreateContextFnOptions
) {
  // ? Reference for Clerk Auth in Next.js App Router: https://clerk.com/docs/references/nextjs/read-session-data
  const clerkAuth = auth();
  const innerContext = await createInnerContext({ auth: clerkAuth });

  return { ...innerContext, ...opts };
}

export type Context = trpc.inferAsyncReturnType<typeof createContext>;

import * as trpc from "@trpc/server";
import * as trpcFetch from "@trpc/server/adapters/fetch";
import { PrismaClient } from "@prisma/client";
import {
  SignedInAuthObject,
  SignedOutAuthObject,
  auth,
  getAuth,
} from "@clerk/nextjs/server";
import { NextApiRequest } from "next";
import { headers } from "next/headers";
import { NextRequest } from "next/server";
import { RequestCookies } from "next/dist/compiled/@edge-runtime/cookies";

interface ClerkAuthContext {
  auth: SignedInAuthObject | SignedOutAuthObject;
}

/**
 * Inner context. Will always be available in your procedures, in contrast to the outer context.
 *
 * Useful for:
 * - testing, database-connection and server-side helpers,  so you don't have to mock Next.js' `req`/`res`
 *
 * @link https://trpc.io/docs/v11/context#inner-and-outer-context
 */
export const createInnerContext = async ({ auth }: ClerkAuthContext) => {
  const prisma = new PrismaClient();

  return {
    auth,
    prisma,
  };
};

export async function createContext(
  opts?: trpcFetch.FetchCreateContextFnOptions
) {
  // ? Reference for Clerk Auth in Next.js App Router: https://clerk.com/docs/references/nextjs/read-session-data
  const clerkAuth = auth();
  const innerContext = await createInnerContext({ auth: clerkAuth });

  return { ...innerContext, ...opts };
}

export type Context = trpc.inferAsyncReturnType<typeof createContext>;

app/_trpc/serverClient

import { createContext } from "../../server/context";
import { appRouter } from "../../server/router";
import { t } from "../../server/trpc";

const createCaller = t.createCallerFactory(appRouter);
export const serverClient = createCaller(await createContext());

import { createContext } from "../../server/context";
import { appRouter } from "../../server/router";
import { t } from "../../server/trpc";

const createCaller = t.createCallerFactory(appRouter);
export const serverClient = createCaller(await createContext());

5 replies