feat: 升级依赖并集成 ORPC 与 TanStack Query

- 升级 `@orpc` 相关依赖至 1.13.4 版本并更新 `@tanstack/react-router` 等核心库至 1.151.0 版本,同时引入新依赖 `@standard-schema/spec`、`cookie`、`openapi-types`、`radash` 和 `type-fest`。
- 升级 TanStack React Router 及相关依赖至 1.151.0 版本,并添加 Orpc 相关客户端、服务器和 React Query 集成依赖。
- 创建支持服务端和客户端的 ORPC 客户端实例,并集成 TanStack Query 工具以实现数据查询功能。
- 添加路由模块以导出待办事项相关的操作函数。
- 添加待办事项列表和添加待办事项的路由接口,支持输入验证和数据操作。
- 添加待办事项数据校验模式,定义包含唯一ID和名称字段的结构化数据模型。
This commit is contained in:
2026-01-18 00:37:24 +08:00
parent ecffcb1069
commit 7750b11fc7
6 changed files with 124 additions and 23 deletions

27
src/orpc/client.ts Normal file
View File

@@ -0,0 +1,27 @@
import { createORPCClient } from '@orpc/client'
import { RPCLink } from '@orpc/client/fetch'
import type { RouterClient } from '@orpc/server'
import { createRouterClient } from '@orpc/server'
import { createTanstackQueryUtils } from '@orpc/tanstack-query'
import { createIsomorphicFn } from '@tanstack/react-start'
import { getRequestHeaders } from '@tanstack/react-start/server'
import { router } from '@/orpc/router'
const getORPCClient = createIsomorphicFn()
.server(() =>
createRouterClient(router, {
context: () => ({
headers: getRequestHeaders(),
}),
}),
)
.client((): RouterClient<typeof router> => {
const link = new RPCLink({
url: `${window.location.origin}/api/rpc`,
})
return createORPCClient(link)
})
export const client: RouterClient<typeof router> = getORPCClient()
export const orpc = createTanstackQueryUtils(client)

6
src/orpc/router/index.ts Normal file
View File

@@ -0,0 +1,6 @@
import { addTodo, listTodos } from './todos'
export const router = {
listTodos,
addTodo,
}

20
src/orpc/router/todos.ts Normal file
View File

@@ -0,0 +1,20 @@
import { os } from '@orpc/server'
import { z } from 'zod'
const todos = [
{ id: 1, name: 'Get groceries' },
{ id: 2, name: 'Buy a new phone' },
{ id: 3, name: 'Finish the project' },
]
export const listTodos = os.input(z.object({})).handler(() => {
return todos
})
export const addTodo = os
.input(z.object({ name: z.string() }))
.handler(({ input }) => {
const newTodo = { id: todos.length + 1, name: input.name }
todos.push(newTodo)
return newTodo
})

6
src/orpc/schema.ts Normal file
View File

@@ -0,0 +1,6 @@
import { z } from 'zod'
export const TodoSchema = z.object({
id: z.number().int().min(1),
name: z.string(),
})