next.js - Troubleshooting createTRPCOptionsProxy with Server Components and Context Passing - Stack Overflow

admin管理员组

文章数量:1356781

How does createTRPCOptionsProxy work in server components?

I'm creating a context that passes the hono context to createTRPCContext in order to obtain the HTTP headers, since I need to forward those headers to the better-auth API to get the session. Here's my context code:

import { cache } from 'react'

import { auth } from '@rhu-ii/auth'
import type { Context as HonoContext } from 'hono'

export const createTRPCContext = cache(async (c: HonoContext) => {
  const session = await auth.api.getSession({
    headers: c.req.raw.headers
  })

  console.log({
    Context: session
  })

  return { session }
})

export type Context = Awaited<ReturnType<typeof createTRPCContext>>

And here's my code for using @hono/trpc-server so that hono becomes the adapter for tRPC:

import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'

import { auth } from '@rhu-ii/auth'
import { Hono } from 'hono'
import { logger } from 'hono/logger'

import { createTRPCContext } from './lib/context'
import { appRouter } from './server/routers'

const app = new Hono().basePath('/api')

app.use(logger())

app.on(['POST', 'GET'], '/api/auth/**', c => auth.handler(c.req.raw))

app.use(
  '/trpc/*',
  trpcServer({
    endpoint: '/api/trpc',
    router: appRouter,
    createContext: (_opts, c) => {
      return createTRPCContext(c)
    }
  })
)

app.get('/status', c => {
  return c.json({
    message: 'Hono Router: Hono + tRPC'
  })
})

export default app

This code passes my Hono server's context to createTRPCContext.

Now, the problem I'm facing is with the tRPC caller for Server Components. The error with the ctx options when passing createTRPCContext is as follows:

Type '(c: HonoContext) => Promise<{ session: { session: { id: string; createdAt: Date; updatedAt: Date; userId: string; expiresAt: Date; token: string; ipAddress?: string | null | undefined | undefined; userAgent?: string | null | undefined | undefined; }; user: { ...; }; } | null; }>' is not assignable to type '{ session: { session: { id: string; createdAt: Date; updatedAt: Date; userId: string; expiresAt: Date; token: string; ipAddress?: string | null | undefined; userAgent?: string | null | undefined; }; user: { ...; }; } | null; } | (() => MaybePromise<...>)'.
  Type '(c: HonoContext) => Promise<{ session: { session: { id: string; createdAt: Date; updatedAt: Date; userId: string; expiresAt: Date; token: string; ipAddress?: string | null | undefined | undefined; userAgent?: string | null | undefined | undefined; }; user: { ...; }; } | null; }>' is not assignable to type '() => MaybePromise<{ session: { session: { id: string; createdAt: Date; updatedAt: Date; userId: string; expiresAt: Date; token: string; ipAddress?: string | null | undefined; userAgent?: string | ... 1 more ... | undefined; }; user: { ...; }; } | null; }>'.
    Target signature provides too few arguments. Expected 1 or more, but got 0.

Is there any solution to this issue so that I can pass my createTRPCContext properly?

本文标签： nextjsTroubleshooting createTRPCOptionsProxy with Server Components and Context PassingStack Overflow