如何在Tanstack Start的createServerFn中获取路由上下文？

TanStack Start的createServerFn本身无法直接访问路由上下文，但可以通过以下几种实用方式获取sessionId：

方法1：调用serverFn时手动传入sessionId #

在能访问路由上下文的地方（组件、load/beforeLoad函数），先通过Route.useRouterContext拿到sessionId，再传递给serverFn：

// 定义serverFn
export const fetchUserData = createServerFn('GET', async (sessionId: string) => {
  // 这里直接使用传入的sessionId处理业务逻辑
  return { user: await getUserBySessionId(sessionId) }
})

// 在组件中调用
function UserProfile() {
  const routerCtx = Route.useRouterContext()
  const { data: user } = useServerFn(fetchUserData, routerCtx.sessionId)

  return <div>用户名：{user?.name}</div>
}

// 在load函数中调用
export async function load({ routerContext }) {
  const user = await fetchUserData(routerContext.sessionId)
  return { user }
}

方法2：从原始请求中直接提取sessionId #

如果你的sessionId本来就是从请求的Cookie/Header中生成的，完全可以跳过路由上下文，直接在serverFn中从请求对象获取：

export const fetchUserData = createServerFn('GET', async (_: void, { request }) => {
  // 从Cookie中提取sessionId
  const sessionCookie = request.headers.get('cookie')
  const sessionId = sessionCookie?.split('sessionId=')[1]?.split(';')[0]

  // 或者从自定义Header中获取
  // const sessionId = request.headers.get('X-Session-ID')

  if (!sessionId) throw new Error('未找到sessionId')
  return { user: await getUserBySessionId(sessionId) }
})

方法3：自定义请求上下文全局注入sessionId #

如果多个serverFn都需要用到sessionId，可以在配置中全局注入请求上下文，避免重复传递：

// start.config.ts
import { defineConfig } from '@tanstack/start/config'

export default defineConfig({
  server: {
    requestContext: async ({ request }) => {
      // 从请求中提取sessionId（逻辑和方法2一致）
      const sessionCookie = request.headers.get('cookie')
      const sessionId = sessionCookie?.split('sessionId=')[1]?.split(';')[0]
      return { sessionId }
    },
  },
})

// 在serverFn中使用全局上下文
export const fetchUserData = createServerFn('GET', async (_: void, { context }) => {
  const { sessionId } = context
  if (!sessionId) throw new Error('未找到sessionId')
  return { user: await getUserBySessionId(sessionId) }
})

内容的提问来源于stack exchange，提问作者AdiletAY