Skip to content
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions docs/integrations/tanstack-start.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ head:

# Integration with Tanstack Start

Elysia can runs inside Tanstack Start server routes.
Elysia can run inside Tanstack Start server routes.

1. Create **src/routes/api.$.ts**
2. Define an Elysia server
Expand Down Expand Up @@ -50,7 +50,7 @@ export const Route = createFileRoute('/api/$')({

Elysia should now be running on **/api**.

We may add additional methods to **server.handlers** to support other HTTP methods as need.
We may add additional methods to **server.handlers** to support other HTTP methods as needed.

## Eden

Expand Down Expand Up @@ -89,12 +89,12 @@ export const api = createIsomorphicFn() // [!code ++]

Notice that we use **createIsomorphicFn** to create a separate Eden Treaty instance for both server and client.
1. On server, Elysia is called directly without HTTP overhead.
2. On client, we call Elysia server through HTTP.
2. On client, we call the Elysia server through HTTP.

On React component, we can use `getTreaty` to call Elysia server with type safety.
In a React component, we can use `getTreaty` to call the Elysia server with type safety.

## Loader Data
Tanstack Start support **Loader** to fetch data before rendering the component.
Tanstack Start supports **Loader** to fetch data before rendering the component.

::: code-group

Expand All @@ -117,7 +117,7 @@ function App() {

:::

Calling Elysia is a loader will be executed on server side during SSR, and doesn't have HTTP overhead.
Calling Elysia in a loader will be executed on the server side during SSR, and doesn't have HTTP overhead.

Eden Treaty will ensure type safety on both server and client.

Expand Down Expand Up @@ -148,7 +148,7 @@ function App() {

::: code-group

This can works with any React Query features like caching, pagination, infinite query, etc.
This can work with any React Query features like caching, pagination, infinite query, etc.

---

Expand Down