Elysia.js
Eden-Query
Eden-Query

Reactive Inputs

To create queries that are reactive to an external source, wrap your input in a store, e.g. writable, readable, or derived from svelte.

TIP

To get the type of input for the route, use the inference helpers

Setup

Elysia Server Application

src/server/index.ts
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

Eden-Query Hooks

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>

Svelte

src/routes/+page.svelte
<script lang="ts" context="module"> </script> <script lang="ts"> import { writable } from 'svelte/store' import { eden, type InferInput } from '$lib/eden' const input = writable({ id: '' }) const post = eden.posts(input).get.createQuery() </script> <input bind:value={$input.id}>