eden-query

elysia.js-eden + tanstack-query integrations

📋 Overview

eden-query allows you to connect to your elysia backend with end-to-end type-safety and powerful asynchronous state management from your frontend.

Features

• 🌎 Framework agnostic.
• 🦺 Full end-to-end type-safety.
• ✅ Fully supports REST API standards.
• 🖥️SSR support and examples.
• ✨ Reactive and infinite queries.
• ⚡ Batching requests on both the client and server.
• 🔗 Links for customizing the flow of data.
• 👀 Data transformers for enhanced JSON handling.

🚀 Get Started

Installation

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

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

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

Usage (React)

import { eden } from './eden'

export function Products() {
  const { data } = eden.api.products.get.useQuery()

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

eden.ts

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

export const eden = createEdenTreatyReactQuery<App>()

server.ts

import { Elysia } from 'elysia'

const app = new Elysia().get('/api/products', () => {
  return [
    {
      id: 0,
      name: 'Product 0',
    },
    {
      id: 1,
      name: 'Product 1',
    },
    {
      id: 2,
      name: 'Product 2',
    },
  ]
})

export type App = typeof app

Framework Integrations

More documentation for framework-specific packages can be found in their respective project directories as well as the documentation.

• React
• Svelte

General Purpose Integrations

• Eden

A custom implementation of the eden client is maintained here with the same core functionality as the officially documented one.

📖 Learn More

To see more advanced examples and usage of the integration, read the full documentation.

Core Technologies

eden-query is a combination of three technologies:

Elysia.js

TypeScript server framework supercharged by Bun with End-to-End Type Safety, unified type system, and outstanding developer experience. Learn more about it from the official documentation.

Eden

A type-safeREST client that offers end-to-end typesafety. Learn more about it from the official documentation.

Tanstack-Query

A full featured asynchronous state management solution. Learn more about it from the offical documentation.

👷 Contributing

Please read the contributing guidelines before opening an issue or pull request to begin developing. The guide will provide an overview of steps to initialize the local development environment, as well as architecture of the project.

⭐Star History