### GET /

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/src/snippets/apps/server-1.mdx

Retrieves a welcome message from the server.

```APIDOC
## GET /

### Description
Retrieves a simple greeting message.

### Method
GET

### Endpoint
/

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **message** (string) - A greeting message.

#### Response Example
```json
"Hello, Elysia"
```
```

--------------------------------

### Develop Svelte Application with npm

Source: https://github.com/ap0nia/eden-query/blob/main/examples/eden-svelte-query-basic/README.md

Commands to start the development server for a Svelte project. Includes an option to automatically open the application in a browser. Requires project dependencies to be installed first.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install Dependencies with PackageManagerTabs

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/setup.mdx

Installs the necessary packages for Eden-Svelte-Query and React Query using a package manager tab component.

```bash
npm install @ap0nia/eden-svelte-query @tanstack/react-query
yarn add @ap0nia/eden-svelte-query @tanstack/react-query
pnpm add @ap0nia/eden-svelte-query @tanstack/react-query
```

--------------------------------

### GET /posts

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/src/snippets/apps/server-1.mdx

Retrieves all posts stored in the system.

```APIDOC
## GET /posts

### Description
Retrieves all posts.

### Method
GET

### Endpoint
/posts

### Parameters
None

### Request Example
None

### Response
#### Success Response (200)
- **posts** (object) - An object where keys are post IDs and values are post objects.

#### Response Example
```json
{
  "post1": {
    "id": "post1",
    "message": "This is the first post."
  }
}
```
```

--------------------------------

### Elysia Server Application Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/useQueries.mdx

This example demonstrates a basic Elysia server setup with two GET endpoints: `/post/:id` and `/greeting`. It utilizes the `batchPlugin` from `@ap0nia/eden-react-query/server` to enable batching of requests.

```APIDOC
## Elysia Server Application

### Description
An example Elysia server application demonstrating endpoints for fetching post details and greetings, with batching enabled.

### Method
GET

### Endpoint
`/post/:id`

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the post to fetch.

### Response
#### Success Response (200)
- **id** (string) - The ID of the post.
- **title** (string) - The title of the post.

### Endpoint
GET

### Endpoint
`/greeting`

### Parameters
#### Query Parameters
- **text** (string) - Optional - The text to include in the greeting.

### Response
#### Success Response (200)
- **message** (string) - The greeting message.

### Example Server Code
```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia()
  .use(batchPlugin())
  .get('/post/:id', (context) => {
    return {
      id: context.params.id,
      title: 'Look me up!',
    }
  })
  .get(
    '/greeting',
    (context) => {
      return {
        message: `hello ${context.query?.text ?? 'world'}`,
      }
    },
    {
      query: t.Object({
        text: t.Optional(t.String()),
      }),
    },
  )

export type App = typeof app
```
```

--------------------------------

### Elysia Server Setup

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQuery.mdx

Example of setting up an Elysia server application with defined routes and schemas. This server will be consumed by the Eden-Svelte-Query client.

```APIDOC
## Elysia Server Application

### Description
An example Elysia server application demonstrating how to define routes for.

### Method
N/A (Server setup)

### Endpoint
N/A (Server setup)

### Parameters
None

### Request Example
```typescript
import { Elysia, t } from 'elysia'

const postSchema = t.Object({
  id: t.String(),
  message: t.String(),
})

type Post = typeof postSchema.static

const data: Record<string, Post> = {}

const app = new Elysia()
    .get('/', async () => {
      return 'Hello, Elysia'
    })
    .get('/posts', async () => {
      return data
    })
    .get('/posts/:id', async ({ params: { id } }) => {
      return data[id]
    })
    .post('/posts/:id', async ({ body, params: { id } }) => {
      data[id] = body
      return data[id]
    }, {
      body: postSchema
    })
    .delete('/posts/:id', async ({ params: { id } }) => {
      delete data[id]
    })

export type App = typeof app
```

### Response
N/A (Server setup)
```

--------------------------------

### Install Dependencies with PackageManagerTabs

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/setup.mdx

Installs the necessary dependencies for Eden-React-Query and React Query using a package manager. This command ensures that both the server and client-side libraries are available for your project.

```bash
npm install @ap0nia/eden-svelte-query @tanstack/react-query
# or
yarn add @ap0nia/eden-svelte-query @tanstack/react-query
# or
pnpm add @ap0nia/eden-svelte-query @tanstack/react-query
```

--------------------------------

### Add Eden Providers in React with TypeScript

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/setup.mdx

Sets up the Eden client and wraps the application with `eden.Provider` and `QueryClientProvider`. This example demonstrates creating a `QueryClient` and configuring the Eden client with an HTTP batch link, including custom headers for authentication.

```typescript
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink } from '@ap0nia/eden-react-query'
import React, { useState } from 'react'
import { eden } from './eden'

function getAuthCookie() {
  return undefined
}

export function App() {
  const [queryClient] = useState(() => new QueryClient())

  const [edenClient] = useState(() =>
    eden.createClient({
      links: [
        httpBatchLink({
          domain: 'http://localhost:3000/eden',

          // You can pass any HTTP headers you wish here
          async headers() {
            return {
              authorization: getAuthCookie(),
            }
          },
        }),
      ],
    }),
  )

  return (
    <eden.Provider client={edenClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{/* Your app here */}</QueryClientProvider>
    </eden.Provider>
  )
}
```

--------------------------------

### Fetch Data using Eden Hooks in React

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/setup.mdx

Demonstrates fetching data and performing mutations using the generated Eden hooks. This example shows how to use `useQuery` to retrieve user data and `useMutation` to create a new user.

```typescript
import React from 'react'
import { eden } from './eden'

export default function IndexPage() {
  const userQuery = eden.user.get.useQuery({ id: 'id_bilbo' })
  const userCreator = eden.user.post.useMutation()

  return (
    <div>
      <p>{userQuery.data?.name}</p>

      <button onClick={() => userCreator.mutate({ name: 'Frodo' })}>Create Frodo</button>
    </div>
  )
}
```

--------------------------------

### Install Elysia.js and Eden Client

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden/README.md

Installs the Elysia.js framework and the @elysiajs/eden client using the Bun package manager. This is the first step before using the type-safe client.

```bash
bun add elysia @elysiajs/eden
```

--------------------------------

### Create Elysia Server Application with TypeScript

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/setup.mdx

Sets up a basic ElysiaJS server application with the Eden plugin. This example demonstrates defining API routes for fetching and creating user data, including type safety using Elysia's `t` validator.

```typescript
import { Elysia, t } from 'elysia'
import { edenPlugin } from '@ap0nia/eden-react-query/server'

const users = [
  {
    id: 'id_bilbo',
    name: 'bilbo',
  },
]

export const app = new Elysia()
  .use(edenPlugin({ batch: true }))
  .get('/', () => 'Hello, World!')
  .get(
    '/user',
    (context) => {
      return users.find((user) => user.id === context.query.id)
    },
    {
      query: t.Object({
        id: t.String(),
      }),
    },
  )
  .post(
    '/user',
    (context) => {
      const newUser = {
        id: `id_${context.body.name}`,
        name: context.body.name,
      }

      users.push(newUser)

      return users
    },
    {
      body: t.Object({
        name: t.String(),
      }),
    },
  )

export type App = typeof app
```

--------------------------------

### Elysia Server Application Setup with Eden-React-Query

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/createUtils.mdx

Sets up an Elysia server application and integrates the batchPlugin from @ap0nia/eden-react-query. It defines a GET endpoint '/post/all' that returns a list of posts.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia().use(batchPlugin()).get('/post/all', (context) => {
  return {
    posts: [
      { id: 1, title: 'everlong' },
      { id: 2, title: 'After Dark' },
    ],
  }
})

export type App = typeof app

```

--------------------------------

### Elysia.js Server Setup with Eden Compatibility

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden/README.md

Sets up a basic Elysia.js server with multiple routes (GET and POST) and demonstrates schema validation for the POST request. This server is designed to be compatible with the Eden client.

```typescript
// server.ts
import { Elysia, t } from 'elysia'

const app = new Elysia()
    .get('/', () => 'Hi Elysia')
    .get('/id/:id', ({ params: { id } }) => id)
    .post('/mirror', ({ body }) => body, {
        schema: {
            body: t.Object({
                id: t.Number(),
                name: t.String()
            })
        }
    })
    .listen(8080)

export type App = typeof app

```

--------------------------------

### Client Initialization Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/links/http-link.mdx

Example of how to import and configure the httpLink within an EdenClient for integration with Elysia.

```APIDOC
## Client Initialization

You can import and add the `httpLink` to the `links` array as such:

```typescript twoslash title=index.ts
// @filename: server.ts
// @include: eq-links-http-application

// @filename: index.ts
// ---cut---
import { EdenClient, httpLink } from '@ap0nia/eden-react-query'
import type { App } from './server'

const client = new EdenClient<App>({
  links: [
    httpLink({
      domain: 'http://localhost:3000',
      // transformer,
    }),
  ],
})
```
```

--------------------------------

### Create Svelte Project with npm

Source: https://github.com/ap0nia/eden-query/blob/main/examples/eden-svelte-query-basic/README.md

Commands to initiate a new Svelte project using the create-svelte package manager. Supports creating a project in the current directory or a specified subdirectory. Assumes npm is installed.

```bash
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

--------------------------------

### Elysia Server Application Setup for useQueries

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/useQueries.mdx

Sets up an ElysiaJS server application with the `batchPlugin` to handle batched queries. It defines two GET endpoints: one for fetching a post by ID and another for a greeting, demonstrating how to structure API endpoints for use with `useQueries`. This server setup is a prerequisite for the client-side React components.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia()
  .use(batchPlugin())
  .get('/post/:id', (context) => {
    return {
      id: context.params.id,
      title: 'Look me up!',
    }
  })
  .get(
    '/greeting',
    (context) => {
      return {
        message: `hello ${context.query?.text ?? 'world'}`,
      }
    },
    {
      query: t.Object({
        text: t.Optional(t.String()),
      }),
    },
  )

export type App = typeof app

```

--------------------------------

### Elysia Server Setup with Batch Plugin

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/getQueryKey.mdx

Sets up an Elysia server and integrates the batchPlugin from '@ap0nia/eden-react-query/server'. It defines a GET endpoint '/post/list' that returns an empty array. This serves as the backend for the React Query client.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia().use(batchPlugin()).get('/post/list', () => {
  return []
})

export type App = typeof app
```

--------------------------------

### React Component Example with useQueries

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/useQueries.mdx

This example shows how to integrate the `useQueries` hook within a React component to fetch data from the Elysia server. It demonstrates fetching multiple post details based on provided IDs and conditionally fetching a greeting.

```APIDOC
## React Component with useQueries

### Description
A React component that utilizes the `useQueries` hook to fetch multiple post details and a greeting. It also shows how to conditionally enable queries and refetch data.

### Component
```typescript
import React from 'react'
import { eden } from './eden' // Assuming eden client is set up

export type MyProps = {
  postIds: string[]
}

export function MyComponent(props: MyProps) {
  // Fetching multiple posts based on IDs
  const postQueries = eden.useQueries((e) => {
    return props.postIds.map((id) => e.post({ id }).get())
  })

  // Fetching a post with options and a greeting
  const [post, greeting] = eden.useQueries((e) => [
    e.post({ id: 1 }).get(undefined, { enabled: false }),
    e.greeting.get({ text: 'world' }),
  ])

  const onButtonClick = () => {
    post.refetch()
  }

  return (
    <div>
      <h1>{post.data && post.data.title}</h1>
      <p>{greeting.data?.message}</p>
      <button onClick={onButtonClick}>Click to fetch</button>
    </div>
  )
}
```

### Explanation
- The first `useQueries` call maps over `props.postIds` to fetch details for each post.
- The second `useQueries` call demonstrates fetching a specific post with `enabled: false` and a greeting.
- The `post.refetch()` function is shown to manually trigger a refetch for a specific query.
- The component renders the fetched data and a button to trigger a refetch.
```

--------------------------------

### Elysia Server Application Setup

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/index.mdx

Sets up an ElysiaJS server with the batchPlugin for Eden React Query. It defines a '/hello' GET endpoint that returns a greeting based on a query parameter and a '/goodbye' POST endpoint.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia()
  .use(batchPlugin())
  .get(
    '/hello',
    (context) => {
      return { greeting: `Hello, ${context.query.name}!` }
    },
    {
      query: t.Object({
        name: t.String(),
      }),
    },
  )
  .post('/goodbye', () => {
    console.log('Goodbye!')
  })

export type App = typeof app
```

--------------------------------

### POST /posts/:id

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/src/snippets/apps/server-1.mdx

Creates or updates a post with a specific ID.

```APIDOC
## POST /posts/:id

### Description
Creates or updates a post with a specific ID.

### Method
POST

### Endpoint
/posts/:id

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier for the post.

#### Request Body
- **id** (string) - Required - The ID of the post.
- **message** (string) - Required - The content of the post.

### Request Example
```json
{
  "id": "post1",
  "message": "This is the first post."
}
```

### Response
#### Success Response (200)
- **post** (object) - The created or updated post object.
  - **id** (string) - The ID of the post.
  - **message** (string) - The content of the post.

#### Response Example
```json
{
  "id": "post1",
  "message": "This is the first post."
}
```
```

--------------------------------

### ElysiaJS Server with useQuery Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/useQuery.mdx

An example of an ElysiaJS server application setting up a '/hello' endpoint. It uses t.Object for query parameter validation and integrates the batchPlugin from @ap0nia/eden-react-query/server.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia().use(batchPlugin()).get(
  '/hello',
  (context) => {
    return {
      greeting: `hello ${context.query?.text ?? 'world'}`,
    }
  },
  {
    query: t.Object({
      text: t.Optional(t.String()),
    }),
  },
)

export type App = typeof app
```

--------------------------------

### Install eden-svelte-query

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden-svelte-query/README.md

Installs the @ap0nia/eden-svelte-query library using pnpm. This is the first step to integrate Elysia.js with Svelte Query.

```sh
pnpm install @ap0nia/eden-svelte-query
```

--------------------------------

### Elysia Application Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/links/http-link.mdx

An example of setting up an Elysia application that can be used with the httpLink.

```APIDOC
## Usage: Elysia Application

```typescript twoslash include eq-links-http-application
import { Elysia, t } from 'elysia'

export const app = new Elysia().get('/', () => 'Hello, World!')

export type App = typeof app
```
```

--------------------------------

### Svelte Mutation Example with Eden-Svelte-Query

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createMutation.mdx

Demonstrates how to use the `createMutation` hook from Eden-Svelte-Query in a Svelte component to handle POST requests. It shows how to trigger the mutation, display loading states, and handle errors. This example relies on the `eden` instance being configured in the application.

```svelte
<script lang="ts" module>
// @include: apps-svelte-client-1

// @filename: src/routes/+page.ts
// ---cut---
</script>

<script lang="ts">
  import { eden } from '$lib/eden'

  const mutation = eden.posts({ id: "John Doe" }).post.createMutation()

  const handleLogin = () => {
    $mutation.mutate({ id: "1", message: "Logged in" })
  }
</script>

<div>
  <h1>Login Form</h1>

  <button on:click={handleLogin} disabled={$mutation.isPending}>
    Login
  </button>

  {#if $mutation.error}
    <p>Something went wrong! {$mutation.error.message}</p>
  {/if}
</div>
```

--------------------------------

### Streaming Responses with Async Generators (Server Example)

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/useQuery.mdx

Illustrates how to implement streaming responses in a server-side query using async generators. The example shows a procedure that yields numbers with a delay.

```tsx
import { publicProcedure, router } from './trpc'

const appRouter = router({
  iterable: publicProcedure.query(async function* () {
    for (let i = 0; i < 3; i++) {
      await new Promise((resolve) => setTimeout(resolve, 500))
      yield i
    }
  }),
})

export type AppRouter = typeof appRouter
```

--------------------------------

### Basic Query Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQuery.mdx

A simple Svelte component demonstrating how to use the `eden.index.get.createQuery()` hook to fetch data from the server's index route.

```APIDOC
## Basic Query Example

### Description
This Svelte component illustrates a basic usage of the `eden.index.get.createQuery()` hook to fetch data from the root endpoint of the server.

### Method
GET

### Endpoint
`/` (root endpoint of the server)

### Parameters
None

### Request Example
```svelte
<script lang="ts" module>
// @include: apps-svelte-client-1

// @filename: src/routes/+page.ts
// ---cut---
</script>

<script lang="ts">
  import { eden } from '$lib/eden'

  const query = eden.index.get.createQuery()
</script>

<div>
  <p>Query: {$query.data}</p>
</div>
```

### Response
#### Success Response (200)
- **data** (any) - The data returned from the server's root endpoint.

#### Response Example
```json
{
  "data": "Hello, Elysia"
}
```
```

--------------------------------

### Setup Eden-Query Client for Svelte

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQuery.mdx

Configures the Eden-Svelte-Query client for a Svelte application. It imports necessary functions from '@ap0nia/eden-svelte-query' and infers types from the Elysia server application. This setup is crucial for integrating backend queries into the Svelte frontend.

```typescript
// @paths: { "$lib/*": ["./src/lib/*"], "$server": ["./src/server"], "$server/*": ["./src/server/*"] }

// @filename: src/server/index.ts
// @include: apps-svelte-server-1

// @filename: src/lib/eden.ts
// ---
import {
  createEdenTreatySvelteQuery,
  type InferTreatyQueryInput,
  type InferTreatyQueryOutput,
} from '@ap0nia/eden-svelte-query'
import type { App } from '$server/index'

export const eden = createEdenTreatySvelteQuery<App>()

export type InferInput = InferTreatyQueryInput<App>

export type InferOutput = InferTreatyQueryOutput<App>
```

--------------------------------

### Eden-Query Batch Client

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/batching.mdx

Example of how to create a batch client using the createEdenTreatyReactQuery function.

```APIDOC
## Eden-Query Batch Client

### Description
Example of how to create a batch client using the createEdenTreatyReactQuery function.

### Request Example

```typescript
import { createEdenTreatyReactQuery } from '@ap0nia/eden-react-query'
import type { App } from './server'

const eden = createEdenTreatyReactQuery<App>()

const client = eden.createHttpBatchClient()
```
```

--------------------------------

### Svelte Client Setup for createQueries with Eden

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQueries.mdx

Initializes the Eden client within a Svelte application, enabling it to communicate with the Elysia server. This setup is crucial for making `createQueries` calls from the client side.

```typescript
import { eden } from '@elysiajs/eden'
import type { App } from '@/elysia'

export const eden = eden<App>('http://localhost:3000')
```

--------------------------------

### Eden-Query Hooks Setup

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQuery.mdx

Setting up the Eden-Query hooks and client in your Svelte application. This involves importing necessary functions and defining the treaty client.

```APIDOC
## Eden-Query Hooks Setup

### Description
This section guides you on setting up the Eden-Query hooks and client within your Svelte application, ensuring proper integration with your Elysia server.

### Method
N/A (Client-side setup)

### Endpoint
N/A (Client-side setup)

### Parameters
None

### Request Example
```typescript
// @paths: { "$lib/*": ["./src/lib/*"], "$server": ["./src/server"], "$server/*": ["./src/server/*"] }

// @filename: src/server/index.ts
// @include: apps-svelte-server-1

// @filename: src/lib/eden.ts
// ---cut---
import {
  createEdenTreatySvelteQuery,
  type InferTreatyQueryInput,
  type InferTreatyQueryOutput,
} from '@ap0nia/eden-svelte-query'
import type { App } from '$server/index'

export const eden = createEdenTreatySvelteQuery<App>()

export type InferInput = InferTreatyQueryInput<App>

export type InferOutput = InferTreatyQueryOutput<App>
```

### Response
N/A (Client-side setup)
```

--------------------------------

### GET /posts/:id

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/src/snippets/apps/server-1.mdx

Retrieves a specific post by its ID.

```APIDOC
## GET /posts/:id

### Description
Retrieves a specific post by its ID.

### Method
GET

### Endpoint
/posts/:id

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the post.

### Request Example
None

### Response
#### Success Response (200)
- **post** (object) - The requested post object.
  - **id** (string) - The ID of the post.
  - **message** (string) - The content of the post.

#### Response Example
```json
{
  "id": "post1",
  "message": "This is the first post."
}
```
```

--------------------------------

### Elysia Application Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/links/http-link.mdx

Sets up a basic ElysiaJS application with a root GET route. This serves as the server-side endpoint for the httpLink.

```typescript
import { Elysia, t } from 'elysia'

export const app = new Elysia().get('/', () => 'Hello, World!')

export type App = typeof app
```

--------------------------------

### Configure SplitLink for Conditional Batching in TypeScript

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/links/split-link.mdx

This example demonstrates setting up `splitLink` to conditionally choose between `httpLink` (for non-batched requests) and `httpBatchLink` (for batched requests) based on the `skipBatch` context property. It includes client setup and a React component usage example.

```typescript
// @filename: server.ts
// @include: eq-links-split-application

// @filename: eden.ts
// ---cut---
import {
  createEdenTreatyReactQuery,
  httpBatchLink,
  httpLink,
  splitLink,
} from '@ap0nia/eden-react-query'
import type { App } from './server'

const domain = 'http://localhost:3000'

export const eden = createEdenTreatyReactQuery<App>()

export const client = eden.createClient({
  links: [
    splitLink({
      condition(operation) {
        // Check for context property `skipBatch`.
        return Boolean(operation.context.skipBatch)
      },

      // When condition is true, use normal request.
      true: httpLink({ domain }),

      // When condition is false, use batching.
      false: httpBatchLink({ domain }),
    }),
  ],
})

// @filename: index.tsx
// ---cut---
import React from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink, httpLink, splitLink } from '@ap0nia/eden-react-query'
import { client, eden } from './eden'

const queryClient = new QueryClient()

/**
 * Make sure that this component is used inside a context with the correct client.
 */
export function MyComponent() {
  const postsQuery = eden.posts.get.useQuery(undefined, {
    eden: {
      context: {
        skipBatch: true,
      },
    }
  });

  return (
    <pre>{JSON.stringify(postsQuery.data ?? null, null, 4)}</pre>
  )
}

/**
 * Example of page that sets the correct context values.
 */
export default function Page() {
  return (
    <eden.Provider client={client} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <MyComponent />
      </QueryClientProvider>
    </eden.Provider>
  )
}
```

--------------------------------

### Initialize Elysia.js Server with API Routes

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden-svelte-query/README.md

Sets up an Elysia.js server with a '/api' prefix. It defines GET and POST routes for '/greeting' to handle fetching and updating a greeting message.

```ts
// src/lib/server/index.ts

import { t, Elysia } from 'elysia'

let greeting = 'Hello, World!'

export const app = new Elysia({ prefix: '/api' })
  .get('/greeting', () => greeting)
  .post(
    '/greeting',
    (context) => {
      console.log('Received new greeting: ', context.body)
      greeting = context.body
      return 'OK'
    },
    {
      body: t.String(),
    },
  )

export type App = typeof app
```

--------------------------------

### Initialize QueryClient and Eden Client in Elysia Layout

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/setup.mdx

Sets up the QueryClient and EdenClient for server-side rendering in ElysiaJS. This ensures each request receives a clean cache by initializing the clients in `+layout.ts`. It includes setting up HTTP batch links with fetcher and authorization headers.

```typescript
// @include: apps-svelte-client-1

// @filename: +layout.ts
// ---cut---
import { httpBatchLink } from '@ap0nia/eden-svelte-query'
import { QueryClient } from '@tanstack/svelte-query'
import type { RequestEvent } from '@sveltejs/kit'
import { eden } from '$lib/eden'

function getAuthCookie() {
  return undefined
}

export const load = async (event: RequestEvent) => {
  const queryClient = new QueryClient()

  const client = eden.createClient({
    links: [
      httpBatchLink({
        fetcher: event.fetch,

        // You can pass any HTTP headers you wish here
        async headers() {
          return {
            authorization: getAuthCookie(),
          }
        },
      }),
    ],
  })

  return { queryClient, client }
}
```

--------------------------------

### Eden-Query Fetch Implementation Example

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/index.mdx

This code illustrates the fetch implementation of Eden-Query for creating a query. It shows how to specify the route path, HTTP method, and parameters for the query using the fetch syntax.

```typescript
eden.createQuery('/greeting/:name', { method: 'GET', params: { name: 'Elysia' } })
```

--------------------------------

### Server Setup for createUtils

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createUtils.mdx

Sets up the Elysia server application, likely including routes and query definitions required for `createUtils` to function. This snippet is crucial for the server-side context where `createUtils` is intended to be used.

```typescript
import { Elysia } from 'elysia'

import { eden } from '@elysiajs/eden'
import { edenFs } from '@elysiajs/file-upload'

const app = new Elysia()
  .use(edenFs())
  .decorate('db', {
    post: {
      all: async () => [
        {
          id: 1,
          title: 'Hello',
          body: 'World'
        }
      ],
      find: async (id: string) => {
        return {
          id: 1,
          title: 'Hello',
          body: 'World'
        }
      }
    }
  })
  .get('/', () => 'Hello Elysia')

export type App = typeof app

export default app
```

--------------------------------

### Define Elysia Server for Posts

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQuery.mdx

Sets up an ElysiaJS server with GET and POST endpoints for managing 'posts'. It includes basic CRUD operations and uses a Zod schema for request body validation. This server serves as the backend for the Eden-Svelte-Query examples.

```typescript
import { Elysia, t } from 'elysia'

const postSchema = t.Object({
  id: t.String(),
  message: t.String(),
})

type Post = typeof postSchema.static

const data: Record<string, Post> = {}

const app = new Elysia()
    .get('/', async () => {
      return 'Hello, Elysia'
    })
    .get('/posts', async () => {
      return data
    })
    .get('/posts/:id', async ({ params: { id } }) => {
      return data[id]
    })
    .post('/posts/:id', async ({ body, params: { id } }) => {
      data[id] = body
      return data[id]
    }, {
      body: postSchema
    })
    .delete('/posts/:id', async ({ params: { id } }) => {
      delete data[id]
    })

export type App = typeof app
```

--------------------------------

### Elysia Server Setup for Eden-Query Batching

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/batching.mdx

Demonstrates how to set up an ElysiaJS server to handle batched requests using the eden-react-query server plugin. It shows multiple ways to enable batching, including direct use of the batchPlugin or configuring it within the edenPlugin, with options for custom endpoints.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin, edenPlugin } from '@ap0nia/eden-react-query/server'

/**
 * Option 1: Use the eden plugin and opt into batching.
 * This is the recommended way because eden plugin will apply all desired plugins,
 * e.g. batch and transform, in the correct order and in a single plugin call.
 */
const app = new Elysia()
  .use(edenPlugin({ batch: true }))
  .get('/a', () => 'A')
  .get('/b', () => 'B')

/**
 * Option 2: Use the batchPlugin directly.
 */
const app1 = new Elysia()
  .use(batchPlugin())
  .get('/a', () => 'A')
  .get('/b', () => 'B')

/**
 * Both plugins also accept an object with options for batching.
 */
const app2 = new Elysia()
  .use(edenPlugin({ batch: { endpoint: '/api/batch' } }))
  .get('/a', () => 'A')
  .get('/b', () => 'B')

export type App = typeof app
```

--------------------------------

### Transform Elysia Leaf Nodes for Query/Mutation (TypeScript)

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden-svelte-query/README.md

This mapped type extends the previous example by transforming identified leaf nodes. It uses MappedElysiaLeaf to differentiate route methods ('get' maps to a query-like structure, others to mutation-like). This allows for distinct handling of read and write operations.

```typescript
import { Elysia, type RouteSchema } from 'elysia'

const app = new Elysia().get('/a/b', () => 'ab').post('/a/b/c', () => 'abc')

type App = typeof app

type MappedElysiaLeaf<TMethod extends PropertyKey, TRoute extends RouteSchema> = TMethod extends 'get' ? { method: 'GET'; route: TRoute } : TMethod extends 'post' ? { method: 'POST'; route: TRoute } : { method: 'N/A'; route: TRoute }

type MappedElysia<T> = {
  [K in keyof T]: T[K] extends RouteSchema ? MappedElysiaLeaft<K, T[K]> : MappedElysia<T[K]>
}

type MappedApp = MappedElysia<App>
```

--------------------------------

### Set Up Svelte Query Client and Eden Context

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden-svelte-query/README.md

Initializes the Svelte Query client and sets it as the context for eden-svelte-query. This allows eden functions to access the query client for managing query states.

```html
<script>
  // src/routes/+layout.svelte

  import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query'
  import { eden } from '$lib/eden'

  const queryClient = new QueryClient()

  eden.setContext(queryClient)
</script>

<QueryClientProvider client="{queryClient}">
  <slot />
</QueryClientProvider>
```

--------------------------------

### Elysia.js Server Example with Eden-Query Compatibility

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/index.mdx

This TypeScript code defines an Elysia.js server with two routes: a GET request to retrieve a nendoroid's name and a PUT request to update nendoroid details. The server is designed to be compatible with Eden-Query, exposing types that can be leveraged by the client-side library for end-to-end type-safety.

```typescript
import { Elysia, t } from 'elysia'

const app = new Elysia()
  .get('/nendoroid/:id/name', () => {
    return 'Skadi'
  })
  .put(
    '/nendoroid/:id',
    (context) => {
      return { status: 'OK', received: context.body }
    },
    {
      body: t.Object({
        name: t.String(),
        from: t.String(),
      }),
    },
  )
  .listen(3000)

export type App = typeof app

```

--------------------------------

### Elysia Server Setup for Eden-Query

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/headers.mdx

This snippet shows how to set up an Elysia server application that is compatible with Eden-Query. It includes importing necessary modules and defining basic routes for a server application. This serves as the backend for Eden-Query clients.

```typescript
import { Elysia } from 'elysia'
import { edenPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia()
  .use(edenPlugin({ batch: true }))
  .get('/', () => 'Hello, World!')
  .post('/auth/login', () => {
    return { token: 'new access token' }
  })

export type App = typeof app

```

--------------------------------

### Elysia Server Setup with Batch Plugin

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/links/logger-link.mdx

This snippet demonstrates how to set up an Elysia server application and integrate the batchPlugin from '@ap0nia/eden-react-query/server'. This is a prerequisite for using certain Eden-Query features on the server side.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia().use(batchPlugin()).get('/', () => 'Hello, World!')

export type App = typeof app
```

--------------------------------

### Request Batching with httpBatchLink in React

Source: https://context7.com/ap0nia/eden-query/llms.txt

Implements request batching using `httpBatchLink` from `@ap0nia/eden-react-query` to combine multiple outgoing requests into a single HTTP call. This reduces network overhead and improves performance. The example includes backend setup with Elysia's `edenPlugin` and frontend configuration for the batch link and batched queries.

```typescript
import { Elysia } from 'elysia'
import { edenPlugin } from '@ap0nia/eden-react-query/server'
import { httpBatchLink } from '@ap0nia/eden-react-query'
import SuperJSON from 'superjson'

// Backend - Enable batch plugin
const app = new Elysia({ prefix: '/api' })
  .use(edenPlugin({
    batch: true,
    transformer: SuperJSON
  }))
  .get('/users/:id', ({ params }) => ({ id: params.id, name: `User ${params.id}` }))
  .get('/posts/:id', ({ params }) => ({ id: params.id, title: `Post ${params.id}` }))

export type App = typeof app

// Frontend - Configure batch link
import { createEdenTreatyReactQuery } from '@ap0nia/eden-react-query'

const eden = createEdenTreatyReactQuery<App>()

const client = eden.createClient({
  links: [
    httpBatchLink({
      endpoint: '/api/batch',
      domain: 'http://localhost:3000',
      transformer: SuperJSON,
      maxURLLength: 2048,
      method: 'POST'
    })
  ]
})

function MyApp() {
  return (
    <eden.Provider client={client} queryClient={queryClient}>
      <BatchedRequests />
    </eden.Provider>
  )
}

function BatchedRequests() {
  // These three queries will be automatically batched into one HTTP request
  const user1 = eden.api.users({ id: '1' }).get.useQuery()
  const user2 = eden.api.users({ id: '2' }).get.useQuery()
  const post = eden.api.posts({ id: '1' }).get.useQuery()

  return (
    <div>
      <div>{user1.data?.name}</div>
      <div>{user2.data?.name}</div>
      <div>{post.data?.title}</div>
    </div>
  )
}
```

--------------------------------

### TypeScript: Using EdenClient with HTTP Link

Source: https://github.com/ap0nia/eden-query/blob/main/packages/eden-svelte-query/README.md

Illustrates how to initialize an EdenClient with an HTTP link and make a query. This demonstrates the basic usage of the client for making API requests.

```typescript
import { EdenClient, httpLink } from '@ap0nia/eden-svelte-query'

const client = new EdenClient({
  links: [httpLink()],
})

const result = await client.query({ endpoint: '/api/a/b' })

console.log('result: ', result)
```

--------------------------------

### RSPress Custom Theme Setup (TypeScript/JavaScript)

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/src/snippets/apps/basic-1.mdx

Exports the `Layout` component and `setup` function for RSPress custom themes. The `setup` function is called during page initialization for global event monitoring. Ensure both are exported for theme configuration to work.

```typescript
import React from 'react';

function Layout() {
  return <div>Custom Theme Layout</div>;
}

// The setup function will be called when the page is initialized. It is generally used to monitor global events, and it can be an empty function
const setup = () => {};

// Export all content of the default theme to ensure that your theme configuration can work properly
export * from 'rspress/theme';

// Export Layout component and setup function
// Note: both must export
export default { Layout, setup };
```

--------------------------------

### Basic Query Example in Svelte Component

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/svelte/createQuery.mdx

Demonstrates how to use the `createQuery` hook from Eden-Svelte-Query in a Svelte component to fetch data from the '/index' endpoint of the Elysia server. It displays the fetched data or a loading state.

```svelte
<script lang="ts" module>
// @include: apps-svelte-client-1

// @filename: src/routes/+page.ts
// ---
</script>

<script lang="ts">
  import { eden } from '$lib/eden'

  const query = eden.index.get.createQuery()
</script>

<div>
  <p>Query: {$query.data}</p>
</div>
```

--------------------------------

### Install eden-query with npm, yarn, or pnpm

Source: https://github.com/ap0nia/eden-query/blob/main/README.md

This snippet shows the commands to install the necessary packages for using eden-query with Elysia and React.

```sh
# npm
npm install elysia @ap0nia/eden-react-query

# yarn
yarn add elysia @ap0nia/eden-react-query

# pnpm
pnpm add elysia @ap0nia/eden-react-query
```

--------------------------------

### Elysia Server Setup with Eden-React-Query Batch Plugin

Source: https://github.com/ap0nia/eden-query/blob/main/documentation/docs/eden-query/react/useUtils.mdx

Sets up an Elysia server and integrates the `@ap0nia/eden-react-query/server` batch plugin. It defines several routes for fetching and editing posts, and fetching users. This code serves as the backend for the React query client.

```typescript
import { Elysia, t } from 'elysia'
import { batchPlugin } from '@ap0nia/eden-react-query/server'

export const app = new Elysia()
  .use(batchPlugin())
  .get('/post/all', (context) => {
    return {
      posts: [
        { id: 1, title: 'everlong' },
        { id: 2, title: 'After Dark' },
      ],
    }
  })
  .post(
    '/post/edit',
    (context) => {
      return { post: { id: context.body.id, title: context.body.title } }
    },
    {
      body: t.Object({
        id: t.Number(),
        title: t.String(),
      }),
    },
  )
  .get('/post/:id', (context) => {
    return { post: { id: context.params.id, title: 'Look me up!' } }
  })
  .get('/user/all', () => {
    return { users: [{ name: 'Dave Grohl' }, { name: 'Haruki Murakami' }] }
  })

export type App = typeof app

```