Eden TanStack Query

https://github.com/xkelxmc/eden-tanstack-query
Admin
Type-safe TanStack Query integration for Elysia Eden - provides React Query hooks with full type...
Tokens:33,961
Snippets:385
Trust Score:8
License:Apache-2.0
Update:5 months ago
Show doc for...
Tokens:
Raw
### Run an Example Project

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

Navigate to an example directory, install its dependencies, and run the development server using bun.

```bash
cd examples/basic
bun install
bun run dev
```

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

### AI Assistant Prompt for Quick Start

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/llms.mdx

Example prompt to ask an AI assistant for a quick start example by reading a specific documentation page.

```markdown
> Read https://eden-tanstack-query.vercel.app/docs.mdx and show me a quick start example.
```

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

### One-Time Setup for Local Development

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/CONTRIBUTING.md

Clone the repository, add the upstream remote, and install dependencies. Ensure 'origin' points to your fork and 'upstream' to the main repository.

```bash
git clone https://github.com/<your-username>/eden-tanstack-query.git
cd eden-tanstack-query
git remote add upstream https://github.com/xkelxmc/eden-tanstack-query.git
git remote -v
bun install
```

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

### Quick Reference - Query Routes

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

Examples of how to use query routes for GET, HEAD, and OPTIONS requests.

```APIDOC
## Query Routes (GET, HEAD, OPTIONS)

### Description
Examples of using query routes with `useEden` hook.

### Usage
```ts
const eden = useEden()

// Available methods on query routes
eden.users.get.queryOptions(input?, opts?)     // For useQuery
eden.users.get.queryKey(input?)                // For cache operations
eden.users.get.queryFilter(input?, filters?)   // For invalidation

// For paginated data (when input has cursor)
eden.posts.get.infiniteQueryOptions(input, opts)  // For useInfiniteQuery
eden.posts.get.infiniteQueryKey(input?)           // For cache operations
eden.posts.get.infiniteQueryFilter(input?, filters?)
```
```

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

### Install eden-tanstack-react-query

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

Install the necessary packages for eden-tanstack-react-query, @tanstack/react-query, and @elysiajs/eden using bun.

```bash
bun add eden-tanstack-react-query @tanstack/react-query @elysiajs/eden
```

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

### Install Dependencies

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Install the necessary packages for Eden TanStack Query, TanStack Query, Elysia, and Eden.

```bash
npm i eden-tanstack-react-query @tanstack/react-query @elysiajs/eden elysia
```

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

### Migration: Setup Provider

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/comparisons/index.mdx

Shows the necessary setup for the EdenProvider when migrating to eden-tanstack-react-query, including creating the client and wrapping the application with QueryClientProvider and EdenProvider.

```tsx
const { EdenProvider, useEden } = createEdenTanStackQuery<App>()
const edenClient = treaty<App>('http://localhost:3000')

<QueryClientProvider client={queryClient}>
  <EdenProvider client={edenClient} queryClient={queryClient}>
    <App />
  </EdenProvider>
</QueryClientProvider>
```

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

### Define Elysia Server

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

Set up your Elysia server with routes and type definitions. This example includes GET and POST routes for users.

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

const app = new Elysia()
  .get('/users', () => [
    { id: '1', name: 'Alice' },
    { id: '2', name: 'Bob' }
  ])
  .get('/users/:id', ({ params }) => ({
    id: params.id,
    name: `User ${params.id}`
  }))
  .post('/users', ({ body }) => ({
    id: String(Date.now()),
    ...body
  }), {
    body: t.Object({ name: t.String() })
  })
  .listen(3000)

export type App = typeof app

```

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

### Install Testing Dependencies

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/testing.mdx

Install necessary development dependencies for testing with Vitest and Testing Library.

```bash
bun add -D vitest @testing-library/react @testing-library/jest-dom @testing-library/user-event jsdom @vitejs/plugin-react
```

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

### Quick Reference - Mutation Routes

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

Examples of how to use mutation routes for POST, PUT, PATCH, and DELETE requests.

```APIDOC
## Mutation Routes (POST, PUT, PATCH, DELETE)

### Description
Examples of using mutation routes with `useEden` hook.

### Usage
```ts
// Available methods on mutation routes
eden.users.post.mutationOptions(opts?)  // For useMutation
eden.users.post.mutationKey()           // For cache operations
```
```

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

### Running Bun Server

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/CLAUDE.md

Command to start the Bun server with hot-reloading enabled.

```sh
bun --hot ./index.ts
```

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

### Development Commands

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

Common development commands for the project, including installing dependencies, running tests, building the project, and type checking.

```bash
# Install dependencies
bun install

# Run tests
bun test

# Build
bun run build

# Type check
bun run test:types
```

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

### Install Packages with Bun

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

Install the necessary packages for Eden TanStack React Query using Bun. Ensure peer dependencies like @tanstack/react-query and @elysiajs/eden are included.

```bash
bun add eden-tanstack-react-query @tanstack/react-query @elysiajs/eden elysia
```

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

### Install Packages with NPM

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

Install the necessary packages for Eden TanStack React Query using npm. Ensure peer dependencies like @tanstack/react-query and @elysiajs/eden are included.

```bash
npm install eden-tanstack-react-query @tanstack/react-query @elysiajs/eden elysia
```

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

### Install Packages with Yarn

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

Install the necessary packages for Eden TanStack React Query using Yarn. Ensure peer dependencies like @tanstack/react-query and @elysiajs/eden are included.

```bash
yarn add eden-tanstack-react-query @tanstack/react-query @elysiajs/eden elysia
```

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

### Basic Query with useQuery

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/queries.mdx

Use `useQuery` with `queryOptions()` to fetch data for routes that do not require parameters. This example demonstrates fetching a list of users.

```tsx
import { useQuery } from '@tanstack/react-query'
import { useEden } from './lib/eden'

function UserList() {
  const eden = useEden()

  const { data, isLoading, error } = useQuery(
    eden.users.get.queryOptions()
  )

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {data?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}
```

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

### Setup Vitest Test Environment

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/testing.mdx

Configure the test environment by importing necessary libraries and setting up cleanup and mock restoration after each test.

```typescript
import '@testing-library/jest-dom/vitest'
import { afterEach, vi } from 'vitest'
import { cleanup } from '@testing-library/react'

afterEach(() => {
  cleanup()
  vi.restoreAllMocks()
})
```

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

### Infinite Queries

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

Example of how to use `useInfiniteQuery` with `eden-tanstack-react-query` for paginated data fetching.

```APIDOC
### Infinite Queries

For paginated data:

```typescript
import { useInfiniteQuery } from '@tanstack/react-query'

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  eden.posts.get.infiniteQueryOptions(
    { limit: 10 },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
      initialPageParam: null,
    }
  )
)
```
```

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

### Install Packages with PNPM

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

Install the necessary packages for Eden TanStack React Query using pnpm. Ensure peer dependencies like @tanstack/react-query and @elysiajs/eden are included.

```bash
pnpm add eden-tanstack-react-query @tanstack/react-query @elysiajs/eden elysia
```

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

### AI Assistant Prompt for Mutations

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/llms.mdx

Example prompt to ask an AI assistant to explain how to use mutations with Eden TanStack Query by reading the full documentation.

```markdown
> Read https://eden-tanstack-query.vercel.app/llms-full.txt and explain how to use Eden TanStack Query with mutations.
```

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

### EdenQueryKey Type Examples

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Illustrates the structure of query keys used for TanStack Query cache organization.

```typescript
type EdenQueryKey<TInput = unknown> =
  | [path: string[]]
  | [path: string[], meta: EdenQueryKeyMeta<TInput>]

// Examples:
[['users', 'get']]
[['users', 'get'], { input: { role: 'admin' } }]
[['posts', 'get'], { input: { limit: 10 }, type: 'infinite' }]
```

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

### EdenMutationKey Type Example

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Shows the structure of mutation keys for TanStack Query cache.

```typescript
type EdenMutationKey = [path: string[]]

// Example:
[['users', 'post']]
```

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

### Infinite Query Options with useInfiniteQuery

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/use-eden.mdx

Use `infiniteQueryOptions` for cursor-based pagination with `useInfiniteQuery`. This example shows how to configure `getNextPageParam` and `initialCursor` for fetching paginated data.

```tsx
const eden = useEden()

const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  eden.posts.get.infiniteQueryOptions(
    { limit: 10 },
    {
      getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
      initialCursor: null,
    }
  )
)
```

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

### Provider Setup for TanStack Query

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/create-eden-tanstack-query.mdx

Wrap your application with EdenProvider and QueryClientProvider. Pass the Eden client and query client instances to the EdenProvider.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { EdenProvider, edenClient } from './lib/eden'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <EdenProvider client={edenClient} queryClient={queryClient}>
        <YourApp />
      </EdenProvider>
    </QueryClientProvider>
  )
}
```

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

### Query Key Structure Examples

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/query-keys.mdx

Demonstrates the structure of query keys generated by Eden TanStack Query, showing variations with and without input parameters.

```typescript
// queryKey() returns:
[['path', 'segments', 'method'], { input: { ... }, type: 'query' }]

// Examples:
// eden.users.get.queryKey()
// => [['users', 'get'], { type: 'query' }]

// eden.users.get.queryKey({ role: 'admin' })
// => [['users', 'get'], { input: { role: 'admin' }, type: 'query' }]

// eden.users({ id: '1' }).get.queryKey()
// => [['users', 'get'], { input: { id: '1' }, type: 'query' }]
```

```typescript
// The `type` field differentiates regular queries from infinite queries:
// eden.posts.get.infiniteQueryKey({ limit: 10 })
// => [['posts', 'get'], { input: { limit: 10 }, type: 'infinite' }]
```

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

### GetRoute Type Utility Example

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Demonstrates how to retrieve a specific route type using `GetRoute`.

```typescript
type UserRoute = GetRoute<typeof app, '/users/:id', 'get'>
```

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

### Query Options with useQuery

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

Use `.queryOptions()` with `useQuery` for GET, HEAD, and OPTIONS requests. The `.queryKey()` method can be used for cache operations.

```typescript
// Options for `useQuery`
.queryOptions(input?, opts?)
// Query key for cache operations
.queryKey(input?)

```

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

### Implement Infinite Queries for Paginated Data

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Example of using `useInfiniteQuery` with `infiniteQueryOptions` to fetch paginated data, including configuration for `getNextPageParam` and `initialPageParam`.

```tsx
import { useInfiniteQuery } from '@tanstack/react-query'

// const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
//   eden.posts.get.infiniteQueryOptions(
//     { limit: 10 },
//     {
//       getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
//       initialPageParam: null,
//     }
//   )
// )
```

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

### Quick Start with Type-Safe Queries and Mutations

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

Demonstrates how to set up EdenProvider and use the useEden hook to create fully typed queries and mutations with TanStack Query in a React component. Ensure your App type is correctly imported.

```typescript
import { createEdenTanStackQuery } from 'eden-tanstack-react-query'
import { useQuery, useMutation } from '@tanstack/react-query'
import type { App } from './server'

const { EdenProvider, useEden } = createEdenTanStackQuery<App>()

function UserList() {
  const eden = useEden()

  // Fully typed queries
  const { data: users } = useQuery(eden.users.get.queryOptions())

  // Fully typed mutations
  const createUser = useMutation(eden.users.post.mutationOptions())

  return (/* ... */)
}
```

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

### Create a Mock Eden Client

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/testing.mdx

Generates a mock Eden client with mocked methods for users. Includes mock data for GET and POST requests.

```typescript
import { vi } from 'vitest'

export function createMockEdenClient() {
  return {
    users: Object.assign(
      (params: { id: string }) => ({
        get: vi.fn().mockResolvedValue({
          data: { id: params.id, name: 'User', email: 'user@example.com' },
          error: null
        }),
      }),
      {
        get: vi.fn().mockResolvedValue({
          data: [
            { id: '1', name: 'Alice', email: 'alice@example.com' },
            { id: '2', name: 'Bob', email: 'bob@example.com' }
          ],
          error: null
        }),
        post: vi.fn().mockResolvedValue({
          data: { id: '3', name: 'New User', email: 'new@example.com' },
          error: null
        }),
      }
    )
  }
}
```

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

### EdenFetchError Usage Example

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Demonstrates how to handle `EdenFetchError` when using `useMutation` from TanStack Query.

```tsx
import { useMutation } from '@tan/react-query'
import type { EdenFetchError } from 'eden-tanstack-react-query'

const { mutate, error } = useMutation(eden.users.post.mutationOptions())

// error is typed as EdenFetchError
if (error) {
  if (error.status === 400) {
    // Validation error
    console.log('Validation:', error.value)
  } else if (error.status === 500) {
    // Server error
    console.log('Server error:', error.value)
  }
}
```

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

### Configure Vitest for React and JSDOM

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/testing.mdx

Configure Vitest to use the JSDOM environment and the React plugin. Ensure setup files are included.

```typescript
import { defineConfig } from 'vitest/config'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./test/setup.ts'],
    globals: true
  }
})
```

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

### Define Route with Path and Query Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/path-parameters.mdx

Define a GET route that accepts both path parameters and query parameters. Path parameters are in `params`, query parameters in `query`.

```typescript
const app = new Elysia()
  .get('/users/:id/posts', ({ params, query }) => ({
    userId: params.id,
    posts: [],
    page: query.page ?? 1,
    limit: query.limit ?? 10
  }), {
    params: t.Object({
      id: t.String()
    }),
    query: t.Object({
      page: t.Optional(t.Number()),
      limit: t.Optional(t.Number())
    })
  })
```

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

### Markdown Documentation URL

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/llms.mdx

Append .mdx to any documentation URL to get the page content in Markdown format, suitable for AI assistants.

```text
/docs.mdx
```

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

### Server Route for Cursor-Based Pagination

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/infinite-queries.mdx

A typical server route setup for cursor-based pagination, expecting `limit` and `cursor` query parameters and returning items with a `nextCursor`.

```typescript
app.get('/posts', ({ query }) => {
  const { limit, cursor } = query
  const posts = getPosts({ limit, after: cursor })

  return {
    items: posts,
    nextCursor: posts.length === limit ? posts[posts.length - 1].id : null,
  }
}, {
  query: t.Object({
    limit: t.Number({ default: 10 }),
    cursor: t.Optional(t.String()),
  })
})
```

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

### Mutation Options with useMutation

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/use-eden.mdx

Use `mutationOptions` to create type-safe options for TanStack Query's `useMutation`. This example demonstrates creating a mutation, executing it, and invalidating related queries upon successful completion.

```tsx
const eden = useEden()
const queryClient = useQueryClient()

const createUser = useMutation({
  ...eden.users.post.mutationOptions(),
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: eden.users.get.queryKey() })
  }
})

createUser.mutate({ name: 'Alice', email: 'alice@example.com' })
```

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

### Define Elysia Server

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Set up a basic Elysia server with GET and POST routes for users. This serves as the backend for the TanStack Query integration.

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

const app = new Elysia()
  .get('/users', () => [
    { id: '1', name: 'Alice' },
    { id: '2', name: 'Bob' }
  ])
  .get('/users/:id', ({ params }) => ({
    id: params.id,
    name: `User ${params.id}`
  }))
  .post('/users', ({ body }) => ({
    id: String(Date.now()),
    ...body
  }), {
    body: t.Object({ name: t.String() })
  })
  .listen(3000)

export type App = typeof app
```

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

### Client Code Comparison: eden-tanstack-query vs tRPC

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/comparisons/index.mdx

Compares client-side code for fetching data and performing mutations using eden-tanstack-query and tRPC. Both examples show fetching a list of users and creating a user with cache invalidation.

```tsx
const eden = useEden()
const { data } = useQuery(eden.users.get.queryOptions())

const createUser = useMutation({
  ...eden.users.post.mutationOptions(),
  onSuccess: () => queryClient.invalidateQueries(eden.users.get.queryFilter())
})
```

```tsx
const { data } = trpc.users.list.useQuery()

const utils = trpc.useUtils()
const createUser = trpc.users.create.useMutation({
  onSuccess: () => utils.users.list.invalidate()
})
```

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

### Use Eden Hooks in Components

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

Utilize `useQuery`, `useMutation`, and `useQueryClient` from TanStack Query along with `useEden` to interact with your Elysia API. Includes examples for basic queries, queries with path parameters, and mutations with cache invalidation.

```typescript
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useEden } from './lib/eden'

function UserList() {
  const eden = useEden()
  const queryClient = useQueryClient()

  // Query
  const { data: users } = useQuery(eden.users.get.queryOptions())

  // Query with path params
  const { data: user } = useQuery(
    eden.users({ id: '1' }).get.queryOptions()
  )

  // Mutation with cache invalidation
  const createUser = useMutation({
    ...eden.users.post.mutationOptions(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: eden.users.get.queryKey() })
    }
  })

  return (
    <div>
      <ul>
        {users?.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
      <button onClick={() => createUser.mutate({ name: 'New User' })}>
        Add User
      </button>
    </div>
  )
}

```

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

### Start a New Feature or Fix Branch

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/CONTRIBUTING.md

Fetch upstream changes, rebase the local main branch, and create a new branch for your changes. Follow the suggested naming conventions.

```bash
git fetch upstream
git switch main
git rebase upstream/main
git switch -c fix/short-description
```

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

### Cache Operations with Infinite Query Keys and Filters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/infinite-queries.mdx

Illustrates how to use `infiniteQueryKey` to get the query key and `infiniteQueryFilter` to invalidate specific cached infinite queries. This is useful for cache management and data synchronization.

```tsx
const queryClient = useQueryClient()
const eden = useEden()

// Get the infinite query key
const key = eden.posts.get.infiniteQueryKey({ limit: 10 })

// Invalidate infinite query
queryClient.invalidateQueries({
  queryKey: eden.posts.get.infiniteQueryKey()
})

// Using infiniteQueryFilter
queryClient.invalidateQueries(
  eden.posts.get.infiniteQueryFilter({ category: 'tech' })
)
```

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

### Quick Reference - Path Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

How to handle routes with path parameters.

```APIDOC
## Path Parameters

### Description
Handling routes with dynamic path segments.

### Usage
```ts
// For routes with path params like /users/:id
eden.users({ id: '123' }).get.queryOptions()

// Nested params: /posts/:postId/comments/:commentId
eden.posts({ postId: '1' }).comments({ commentId: '2' }).get.queryOptions()
```
```

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

### Set Up QueryClientProvider and EdenProvider

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

Wrap your application with both QueryClientProvider from TanStack Query and EdenProvider from Eden TanStack Query to provide the necessary context.

```tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { EdenProvider, edenClient } from './lib/eden'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <EdenProvider client={edenClient} queryClient={queryClient}>
        <YourApp />
      </EdenProvider>
    </QueryClientProvider>
  )
}
```

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

### Importing Core APIs

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

Demonstrates how to import all public APIs from the main package entry point, including the main factory, low-level factories, query key utilities, and types.

```typescript
import {
  // Main factory
  createEdenTanStackQuery,

  // Low-level factories (for advanced use)
  edenQueryOptions,
  edenMutationOptions,
  edenInfiniteQueryOptions,

  // Query key utilities
  getQueryKey,
  getMutationKey,

  // Types
  type EdenQueryKey,
  type EdenMutationKey,
  type EdenFetchError,
  type RouteDefinition,
  type EdenOptionsProxy,
  // ... and more
} from 'eden-tanstack-react-query'
```

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

### Server Code Comparison: Elysia vs tRPC

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/comparisons/index.mdx

Compares server-side API definitions using Elysia with eden-tanstack-query and tRPC. Both define routes for getting users, getting a specific user by ID, and creating a user, including input validation.

```ts
const app = new Elysia()
  .get('/users', () => db.users.findMany())
  .get('/users/:id', ({ params }) => db.users.findUnique({
    where: { id: params.id }
  }))
  .post('/users', ({ body }) => db.users.create({ data: body }), {
    body: t.Object({ name: t.String(), email: t.String({ format: 'email' }) })
  })

export type App = typeof app
```

```ts
const appRouter = t.router({
  users: t.router({
    list: t.procedure.query(() => db.users.findMany()),
    get: t.procedure
      .input(z.object({ id: z.string() }))
      .query(({ input }) => db.users.findUnique({ where: { id: input.id } })),
    create: t.procedure
      .input(z.object({ name: z.string(), email: z.string().email() }))
      .mutation(({ input }) => db.users.create({ data: input }))
  })
})

export type AppRouter = typeof appRouter
```

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

### Basic Infinite Query Usage

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/infinite-queries.mdx

Demonstrates the basic implementation of `useInfiniteQuery` with `infiniteQueryOptions` to fetch and display paginated posts, including loading states and a 'Load More' button.

```tsx
import { useInfiniteQuery } from '@tanstack/react-query'
import { useEden } from './lib/eden'

function PostList() {
  const eden = useEden()

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
  } = useInfiniteQuery(
    eden.posts.get.infiniteQueryOptions(
      { limit: 10 },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
        initialCursor: null,
      }
    )
  )

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      {data?.pages.map((page) =>
        page.items.map((post) => (
          <article key={post.id}>
            <h2>{post.title}</h2>
          </article>
        ))
      )}

      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
      </button>
    </div>
  )
}
```

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

### Bun Server with HTML Imports and WebSockets

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/CLAUDE.md

Sets up a Bun server that serves an HTML file and supports basic WebSocket communication. It utilizes Bun's built-in routing and hot module replacement for development.

```typescript
import index from "./index.html"

Bun.serve({
  routes: {
    "/": index,
    "/api/users/:id": {
      GET: (req) => {
        return new Response(JSON.stringify({ id: req.params.id }));
      },
    },
  },
  // optional websocket support
  websocket: {
    open: (ws) => {
      ws.send("Hello, world!");
    },
    message: (ws, message) => {
      ws.send(message);
    },
    close: (ws) => {
      // handle close
    }
  },
  development: {
    hmr: true,
    console: true,
  }
})
```

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

### PathParamsToObject Type Utility Example

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Creates a type for a parameters object from a route path string.

```typescript
type Params = PathParamsToObject<'/users/:id/posts/:postId'>
// => { id: string; postId: string }
```

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

### ExtractPathParams Type Utility Example

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Extracts path parameter names from a route path string.

```typescript
type Params = ExtractPathParams<'/users/:id/posts/:postId'>
// => 'id' | 'postId'
```

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

### Set Up Providers for TanStack Query and Eden

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

Wrap your application with `QueryClientProvider` from TanStack Query and `EdenProvider` from eden-tanstack-react-query. Pass the `edenClient` and `queryClient` instances.

```tsx
// App.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { EdenProvider, edenClient } from './lib/eden'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <EdenProvider client={edenClient} queryClient={queryClient}>
        <YourApp />
      </EdenProvider>
    </QueryClientProvider>
  )
}

```

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

### Error Types

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/types.mdx

Details the error type for Eden requests, including status code and error value, with a usage example.

```APIDOC
## EdenFetchError

Error type for Eden requests. Contains status code and error value.

```ts
interface EdenFetchError<TStatus extends number = number, TValue = unknown> {
  status: TStatus
  value: TValue
}
```

### Usage

```tsx
import { useMutation } from '@tanstack/react-query'
import type { EdenFetchError } from 'eden-tanstack-react-query'

const { mutate, error } = useMutation(eden.users.post.mutationOptions())

// error is typed as EdenFetchError
if (error) {
  if (error.status === 400) {
    // Validation error
    console.log('Validation:', error.value)
  } else if (error.status === 500) {
    // Server error
    console.log('Server error:', error.value)
  }
}
```
```

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

### Combining Path Parameters with Infinite Queries

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/infinite-queries.mdx

Shows how to integrate path parameters, such as a user ID, with infinite queries to fetch paginated data specific to a resource.

```tsx
// GET /users/:id/posts
function UserPosts({ userId }: { userId: string }) {
  const eden = useEden()

  const { data } = useInfiniteQuery(
    eden.users({ id: userId }).posts.get.infiniteQueryOptions(
      { limit: 10 },
      {
        getNextPageParam: (page) => page.nextCursor ?? undefined,
        initialCursor: null,
      }
    )
  )
}
```

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

### Query Route Methods

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

Demonstrates available methods on query routes for fetching data, managing cache, and filtering. Includes options for standard queries and paginated data using `useInfiniteQuery`.

```typescript
const eden = useEden()

// Available methods on query routes
eden.users.get.queryOptions(input?, opts?)     // For useQuery
eden.users.get.queryKey(input?)                // For cache operations
eden.users.get.queryFilter(input?, filters?)   // For invalidation

// For paginated data (when input has cursor)
eden.posts.get.infiniteQueryOptions(input, opts)  // For useInfiniteQuery
eden.posts.get.infiniteQueryKey(input?)           // For cache operations
eden.posts.get.infiniteQueryFilter(input?, filters?)
```

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

### Complete LLM Documentation URL

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/llms.mdx

Use this URL to access the complete documentation in a single file for AI assistants.

```text
https://eden-tanstack-query.vercel.app/llms-full.txt
```

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

### Define Multiple Path Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/path-parameters.mdx

Define a GET route with multiple path parameters at the same level. Both parameters are accessible via the `params` object.

```typescript
const app = new Elysia()
  .get('/files/:category/:filename', ({ params }) => ({
    category: params.category,
    filename: params.filename,
    url: `/cdn/${params.category}/${params.filename}`
  }), {
    params: t.Object({
      category: t.String(),
      filename: t.String()
    })
  })
```

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

### Basic HTML Structure for Bun Frontend

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/CLAUDE.md

A minimal HTML file that imports a frontend script. Bun's bundler will automatically transpile and bundle the imported script.

```html
<html>
  <body>
    <h1>Hello, world!</h1>
    <script type="module" src="./frontend.tsx"></script>
  </body>
</html>
```

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

### Handling Path Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

Illustrates how to construct query options for routes that include path parameters, including nested parameters.

```typescript
// For routes with path params like /users/:id
eden.users({ id: '123' }).get.queryOptions()

// Nested params: /posts/:postId/comments/:commentId
eden.posts({ postId: '1' }).comments({ commentId: '2' }).get.queryOptions()
```

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

### Define Basic Path Parameter Route

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/path-parameters.mdx

Define a GET route with a single path parameter ':id'. The parameter is validated and accessible via `params.id`.

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

const app = new Elysia()
  .get('/users/:id', ({ params }) => ({
    id: params.id,
    name: `User ${params.id}`,
    email: `user${params.id}@example.com`
  }), {
    params: t.Object({
      id: t.String()
    })
  })
  .listen(3000)

export type App = typeof app
```

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

### Create Eden TanStack Query Instance

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

Set up the Eden TanStack Query instance and treaty client. Import the 'App' type from your Elysia server to ensure type safety.

```typescript
import { createEdenTanStackQuery } from 'eden-tanstack-react-query'
import { treaty } from '@elysiajs/eden'
import type { App } from '../../server'

export const { EdenProvider, useEden } = createEdenTanStackQuery<App>()
export const edenClient = treaty<App>('http://localhost:3000')
```

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

### Export App Type in Monorepo Server Package

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/getting-started/index.mdx

In a monorepo setup, export the 'App' type from your server package to make it available for client-side type inference.

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

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

### Query with Input Parameters and Options

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Shows how to pass query parameters or request bodies to your queries and how to combine them with TanStack Query options like `staleTime`.

```typescript
// Query params: GET /users?role=admin
// eden.users.get.queryOptions({ role: 'admin' })

// With TanStack Query options
// eden.users.get.queryOptions(
//   { role: 'admin' },
//   { staleTime: 5 * 60 * 1000 }
// )
```

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

### Define Nested Path Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/path-parameters.mdx

Define a GET route with nested path parameters at different levels. Parameters are accessed via chained function calls on the proxy.

```typescript
const app = new Elysia()
  .get('/posts/:postId/comments/:commentId', ({ params }) => ({
    postId: params.postId,
    commentId: params.commentId,
    content: 'Comment content here'
  }), {
    params: t.Object({
      postId: t.String(),
      commentId: t.String()
    })
  })
```

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

### Manual npm Publish

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/RELEASING.md

A fallback procedure for publishing to npm manually. Ensure you are in the package directory and logged in to npm.

```bash
cd packages/eden-tanstack-query
npm login
bun publish --access public
```

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

### Correct EdenProvider Usage

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/troubleshooting.mdx

Demonstrates the correct placement of `useEden` within the `EdenProvider` component tree to avoid 'useEden must be used within an EdenProvider' errors.

```tsx
// Wrong — use Eden is outside provider
function App() {
  const eden = useEden() // Error!
  return (
    <EdenProvider client={edenClient} queryClient={queryClient}>
      <YourApp />
    </EdenProvider>
  )
}

// Correct — use Eden inside provider
function App() {
  return (
    <EdenProvider client={edenClient} queryClient={queryClient}>
      <YourApp /> {/* useEden works here */}
    </EdenProvider>
  )
}
```

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

### Tracking Mutation State

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/mutations.mdx

Use `useMutationState` to track the state of mutations, such as pending or error states, by filtering based on `mutationKey` and `status`. You can also get the mutation key directly using `mutationKey()`.

```tsx
import { useMutationState } from '@tanstack/react-query'

const eden = useEden()

// Get mutation key
const key = eden.users.post.mutationKey()

// Track pending mutations
const pendingMutations = useMutationState({
  filters: {
    mutationKey: eden.users.post.mutationKey(),
    status: 'pending',
  },
})
```

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

### Next.js App Router Providers Component

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/ssr.mdx

Sets up `QueryClientProvider` and `EdenProvider` for the application. This component should be used in the root layout to provide query and Eden clients to the entire app.

```tsx
'use client'

import { useState } from 'react'
import { QueryClientProvider } from '@tanstack/react-query'
import { getQueryClient } from '@/lib/query-client'
import { EdenProvider, edenClient } from '@/lib/eden'

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(() => getQueryClient())

  return (
    <QueryClientProvider client={queryClient}>
      <EdenProvider client={edenClient} queryClient={queryClient}>
        {children}
      </EdenProvider>
    </QueryClientProvider>
  )
}
```

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

### Use Eden Hooks in Components

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Demonstrates fetching data with `useQuery`, handling mutations with `useMutation`, and invalidating cache after a mutation using hooks provided by Eden TanStack Query and TanStack Query.

```tsx
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useEden } from './lib/eden'

function UserList() {
  const eden = useEden()
  const queryClient = useQueryClient()

  // Query
  const { data: users } = useQuery(eden.users.get.queryOptions())

  // Query with path params
  const { data: user } = useQuery(
    eden.users({ id: '1' }).get.queryOptions()
  )

  // Mutation with cache invalidation
  const createUser = useMutation({
    ...eden.users.post.mutationOptions(),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: eden.users.get.queryKey() })
    }
  })

  return (
    <div>
      <ul>
        {users?.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
      <button onClick={() => createUser.mutate({ name: 'New User' })}>
        Add User
      </button>
    </div>
  )
}
```

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

### Basic Query Comparison

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/comparisons/index.mdx

Compares basic query syntax between eden-tanstack-query and @elysiajs/eden-query. eden-tanstack-query uses standard TanStack Query hooks with generated options, while @elysiajs/eden-query uses custom wrapper hooks.

```tsx
const eden = useEden()
const { data } = useQuery(eden.users.get.queryOptions())
```

```tsx
const { data } = eden.users.get.useQuery()
```

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

### Infinite Query Key Generation

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/query-keys.mdx

Demonstrates how to generate query keys specifically for infinite queries using the `infiniteQueryKey()` method.

```typescript
// eden.posts.get.infiniteQueryKey()
// eden.posts.get.infiniteQueryKey({ limit: 10 })
```

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

### Create a Test Wrapper Component

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/testing.mdx

Provides a wrapper component for tests that includes QueryClientProvider and EdenProvider. Accepts a mock Eden client.

```typescript
import { ReactNode } from 'react'
import { QueryClientProvider } from '@tanstack/react-query'
import { createEdenTanStackQuery } from 'eden-tanstack-react-query'
import type { App } from '@/lib/server'

export function createTestWrapper(mockClient: any) {
  const queryClient = createTestQueryClient()
  const { EdenProvider } = createEdenTanStackQuery<App>()

  function Wrapper({ children }: { children: ReactNode }) {
    return (
      <QueryClientProvider client={queryClient}>
        <EdenProvider client={mockClient} queryClient={queryClient}>
          {children}
        </EdenProvider>
      </QueryClientProvider>
    )
  }

  return { Wrapper, queryClient }
}
```

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

### Query Key Generation Methods

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/query-keys.mdx

Illustrates the usage of `queryKey()` for generating specific query keys, including variations with different input parameters and path parameters.

```typescript
// eden.users.get.queryKey()                              // all users queries
// eden.users.get.queryKey({ role: 'admin' })  // specific input
// eden.users({ id: '1' }).get.queryKey()                 // specific path params
```

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

### Query with Input Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/queries.mdx

Pass query parameters as the first argument to `queryOptions()` to filter or specify the data to be fetched. Additional TanStack Query options can be passed as the second argument.

```tsx
// GET /users?role=admin&status=active
const { data } = useQuery(
  eden.users.get.queryOptions({ role: 'admin', status: 'active' })
)
```

```tsx
const { data } = useQuery(
  eden.users.get.queryOptions(
    { role: 'admin' },
    { staleTime: 5 * 60 * 1000 }
  )
)
```

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

### Access Routes with Path Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Demonstrates how to access routes with path parameters by treating them as function calls on the Eden proxy. This applies to nested routes as well.

```typescript
// Route: /users/:id
eden.users({ id: '123' }).get.queryOptions()

// Nested: /posts/:postId/comments/:commentId
// eden.posts({ postId: '1' }).comments({ commentId: '2' }).get.queryOptions()
```

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

### Creating Multiple API Instances

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/create-eden-tanstack-query.mdx

Instantiate createEdenTanStackQuery multiple times for different API backends. You can then use separate providers, potentially nested, to manage these instances.

```typescript
// Internal API
const internalApi = createEdenTanStackQuery<InternalApp>()

// External API
const externalApi = createEdenTanStackQuery<ExternalApp>()
```

```tsx
<internalApi.EdenProvider client={internalClient} queryClient={queryClient}>
  <externalApi.EdenProvider client={externalClient} queryClient={queryClient}>
    <App />
  </externalApi.EdenProvider>
</internalApi.EdenProvider>
```

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

### Verify Query Keys for Path Parameters

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/troubleshooting.mdx

Logs the query keys generated for different path parameters to ensure they are distinct and correctly cache data. Update the library if keys are unexpectedly identical.

```typescript
console.log(eden.users({ id: '1' }).get.queryKey())
// [['users', 'get'], { input: { id: '1' }, type: 'query' }]

console.log(eden.users({ id: '2' }).get.queryKey())
// [['users', 'get'], { input: { id: '2' }, type: 'query' }]
```

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

### Commit and Push Changes

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/RELEASING.md

Stage all changes, commit them with a release message, and push to the remote repository.

```bash
git add .
git commit -m "chore: release vX.Y.Z"
git push
```

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

### Passing Input Parameters to Infinite Query

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/guides/infinite-queries.mdx

Demonstrates how to pass query input parameters, excluding the cursor, to `infiniteQueryOptions`. The library automatically appends the cursor for subsequent requests.

```tsx
eden.posts.get.infiniteQueryOptions(
  { limit: 10, category: 'technology' },
  {
    getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,
    initialCursor: null,
  }
)
```

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

### Create and Push Git Tag

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/RELEASING.md

Create a new Git tag for the release version and push it to the remote repository to trigger the automated publishing workflow.

```bash
git tag vX.Y.Z
git push --tags
```

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

### Basic Test with Vitest

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/CLAUDE.md

A simple test case using Vitest, demonstrating basic assertion.

```typescript
import { describe, it, expect } from "vitest";

describe("example", () => {
  it("should work", () => {
    expect(1).toBe(1);
  });
});
```

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

### Low-level Infinite Query Options

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/use-eden.mdx

Provides low-level options for `useInfiniteQuery` to be used outside React context. Requires explicit fetch function, initial page param, and options for pagination.

```typescript
// edenInfiniteQueryOptions
const opts = edenInfiniteQueryOptions({
  path: ['posts', 'get'],
  input: { limit: 10 },
  initialPageParam: null as string | null,
  fetch: async (inputWithCursor, signal) => { /* ... */ },
  opts: { getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined }
})
```

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

### useEden

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Returns the Eden options proxy with methods for each route, facilitating TanStack Query hooks.

```APIDOC
## useEden

Returns the Eden options proxy with methods for each route.

### Query Methods (GET, HEAD, OPTIONS)

| Method | Description |
|--------|-------------|
| `.queryOptions(input?, opts?)` | Options for `useQuery` |
| `.queryKey(input?)` | Query key for cache operations |
| `.infiniteQueryOptions(input, opts)` | Options for `useInfiniteQuery` |

### Mutation Methods (POST, PUT, PATCH, DELETE)

| Method | Description |
|--------|-------------|
| `.mutationOptions(opts?)` | Options for `useMutation` |
| `.mutationKey()` | Mutation key |
```

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

### Core API - Options Factories

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/index.mdx

Methods for creating options for queries, mutations, and infinite queries.

```APIDOC
## queryOptions

### Description
Method on query routes for creating query options.

### Export
`queryOptions`
```

```APIDOC
## mutationOptions

### Description
Method on mutation routes for creating mutation options.

### Export
`mutationOptions`
```

```APIDOC
## infiniteQueryOptions

### Description
Method on query routes for creating infinite query options.

### Export
`infiniteQueryOptions`
```

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

### Query Options with useQuery

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/api-reference/use-eden.mdx

Use `queryOptions` to create type-safe options for TanStack Query's `useQuery` and `useSuspenseQuery`. Supports basic queries, queries with parameters, path parameters, and conditional fetching using `skipToken`.

```tsx
const eden = useEden()

// Basic
const { data } = useQuery(eden.users.get.queryOptions())

// With query params and TQ options
const { data } = useQuery(
  eden.users.get.queryOptions(
    { role: 'admin' },
    { staleTime: 5 * 60 * 1000 }
  )
)

// Path params
const { data } = useQuery(
  eden.users({ id: '123' }).get.queryOptions()
)

// Conditional with skipToken
const { data } = useQuery(
  eden.users({ id: userId ?? '' }).get.queryOptions(
    userId ? undefined : skipToken
  )
)
```

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

### Create Eden TanStack Query Instance

Source: https://github.com/xkelxmc/eden-tanstack-query/blob/main/apps/docs/content/docs/index.mdx

Instantiate the `createEdenTanStackQuery` function, passing your Elysia app type to generate typed hooks and providers.

```typescript
const { EdenProvider, useEden, useEdenClient } = createEdenTanStackQuery<App>()
```
Tokens:
Raw