---

title: 与 Tanstack Start 集成 - ElysiaJS head: - - meta - property: 'og:title' content: 与 Tanstack Start 集成 - ElysiaJS

- - meta
  - name: 'description'
    content: Elysia 可以在 Tanstack Start API 服务器路由中运行，并且可以通过 Eden 在数据加载器或与 Tanstack React Query 结合使用，实现类型安全。

- - meta
  - property: 'og:description'
    content: Elysia 可以在 Tanstack Start API 服务器路由中运行，并且可以通过 Eden 在数据加载器或与 Tanstack React Query 结合使用，实现类型安全。

---

与 Tanstack Start 集成

Elysia 可以在 Tanstack Start 服务器路由中运行。

1. 创建 src/routes/api.$.ts
2. 定义一个 Elysia 服务器
3. 在 server.handlers 中导出 Elysia 处理程序

src/routes/api.$.ts

import { Elysia } from 'elysia'

import { createFileRoute } from '@tanstack/react-router'
import { createIsomorphicFn } from '@tanstack/react-start'

const app = new Elysia({
	prefix: '/api'
}).get('/', '你好 Elysia!')

const handle = ({ request }: { request: Request }) => app.fetch(request) 

export const Route = createFileRoute('/api/$')({
	server: {
		handlers: {
			GET: handle, 
			POST: handle 
		}
	}
})

Elysia 现在应该在 /api 上运行。

我们可以根据需要向 server.handlers 添加其他方法以支持其他 HTTP 方法。

Eden

我们可以添加 Eden 以实现类似于 tRPC 的 端到端类型安全。

src/routes/api.$.ts

import { Elysia } from 'elysia'
import { treaty } from '@elysiajs/eden'

import { createFileRoute } from '@tanstack/react-router'
import { createIsomorphicFn } from '@tanstack/react-start'

const app = new Elysia({
	prefix: '/api'
}).get('/', '你好 Elysia!')

const handle = ({ request }: { request: Request }) => app.fetch(request)

export const Route = createFileRoute('/api/$')({
	server: {
		handlers: {
			GET: handle,
			POST: handle
		}
	}
})

export const api = createIsomorphicFn() 
	.server(() => treaty(app).api) 
	.client(() => treaty<typeof app>('localhost:3000').api) 

注意，我们使用 createIsomorphicFn 为服务器和客户端分别创建了一个独立的 Eden Treaty 实例。

1. 在服务器上，直接调用 Elysia，没有 HTTP 开销。
2. 在客户端，我们通过 HTTP 调用 Elysia 服务器。

在 React 组件中，我们可以使用 getTreaty 以类型安全的方式调用 Elysia 服务器。

加载器数据

Tanstack Start 支持 Loader 在组件渲染前获取数据。

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'

import { getTreaty } from './api.$'

export const Route = createFileRoute('/a')({
	component: App,
	loader: () => getTreaty().get().then((res) => res.data) 
})

function App() {
	const data = Route.useLoaderData() 

	return data
}

在 loader 中调用 Elysia 将在 SSR 期间于服务器端执行，并且没有 HTTP 开销。

Eden Treaty 将确保服务器和客户端的类型安全。

React Query

我们也可以在客户端使用 React Query 与 Elysia 服务器交互。

src/routes/index.tsx

import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'

import { getTreaty } from './api.$'

export const Route = createFileRoute('/a')({
	component: App
})

function App() {
	const { data: response } = useQuery({ 
		queryKey: ['get'], 
		queryFn: () => getTreaty().get() 
	}) 

	return response?.data
}

这可以与任何 React Query 功能一起使用，例如缓存、分页、无限查询等。

---

请访问 Tanstack Start 文档 以获取关于 Tanstack Start 的更多信息。