Theo's Typesafe Cult•3mo ago

TRPCClientError: Unable to transform response from server

I just migrated from Next Auth to Clerk. Clerk is working fine. tRPC works fine too, but I keep getting this error message from all requests. src/pages/_app.tsx

// ...
return
  <ClerkProvider {...pageProps}>
    {/* Everything else goes in here */}
  </ClerkProvider>
// ...
export default api.withTRPC(MyApp)

// ...
return
  <ClerkProvider {...pageProps}>
    {/* Everything else goes in here */}
  </ClerkProvider>
// ...
export default api.withTRPC(MyApp)

src/api/trpc.ts

import { clerkClient, getAuth } from '@clerk/nextjs/server'

export const createTRPCContext = async ({ req }: CreateNextContextOptions) => {
    const session = getAuth(req)
    const user = session.userId
        ? await clerkClient.users.getUser(session.userId)
        : null

    return {
        userId: session?.userId ?? undefined,
        orgId: session.orgId ?? undefined,
        firstName: user?.firstName,
        prisma,
    }
}

const t = initTRPC.context<typeof createTRPCContext>().create({
    transformer: superjson,
    errorFormatter({ shape, error }) {
        return {
            ...shape,
            data: {
                ...shape.data,
                zodError:
                    error.cause instanceof ZodError ? error.cause.flatten() : null,
            },
        }
    },
})

import { clerkClient, getAuth } from '@clerk/nextjs/server'

export const createTRPCContext = async ({ req }: CreateNextContextOptions) => {
    const session = getAuth(req)
    const user = session.userId
        ? await clerkClient.users.getUser(session.userId)
        : null

    return {
        userId: session?.userId ?? undefined,
        orgId: session.orgId ?? undefined,
        firstName: user?.firstName,
        prisma,
    }
}

const t = initTRPC.context<typeof createTRPCContext>().create({
    transformer: superjson,
    errorFormatter({ shape, error }) {
        return {
            ...shape,
            data: {
                ...shape.data,
                zodError:
                    error.cause instanceof ZodError ? error.cause.flatten() : null,
            },
        }
    },
})

1 Reply

Mocha•3mo ago

Turning off ssr in src/utils/api.ts seems to solve it, but it'd be nice if this can be used with SSR on.

Gaming

Programming

TRPCClientError: Unable to transform response from server