Parameters

We need to send a payload to the server eventually.

To handle this, Eden Treaty’s methods accept 2 parameters to send data to the server.

Both parameters are type-safe and will be guided by TypeScript automatically:

body
additional parameters
- query
- headers
- fetch

import { Elysia, t } from 'elysia'
import { treaty } from '@elysia/eden'

const app = new Elysia()
    .post('/user', {
        body: t.Object({
            name: t.String()
        })
    }, ({ body }) => body)
    .listen(3000)

const api = treaty<typeof app>('localhost:3000')

// works
api.user.post({
    name: 'Elysia'
})

// also works
api.user.post({
    name: 'Elysia'
}, {
    // This is optional as not specified in schema
    headers: {
        authorization: 'Bearer 12345'
    },
    query: {
        id: 2
    }
})

If the method is “GET” or “HEAD”:

Additional parameters
- query
- headers
- fetch

import { Elysia } from 'elysia'
import { treaty } from '@elysia/eden'

const app = new Elysia()
    .get('/hello', () => 'hi')
    .listen(3000)

const api = treaty<typeof app>('localhost:3000')

// works
api.hello.get({
    // This is optional as not specified in schema
    headers: {
        hello: 'world'
    }
})

Empty body

If the body is optional or not needed, but query or headers are required, you may pass the body as null or undefined instead.

import { Elysia, t } from 'elysia'
import { treaty } from '@elysia/eden'

const app = new Elysia()
    .post('/user', {
        query: t.Object({
            name: t.String()
        })
    }, () => 'hi')
    .listen(3000)

const api = treaty<typeof app>('localhost:3000')

api.user.post(null, {
    query: {
        name: 'Ely'
    }
})

Fetch parameters

Eden Treaty is a fetch wrapper; we may add any valid Fetch parameters to Eden by passing them to fetch:

import { Elysia, t } from 'elysia'
import { treaty } from '@elysia/eden'

const app = new Elysia()
    .get('/hello', () => 'hi')
    .listen(3000)

const api = treaty<typeof app>('localhost:3000')

const controller = new AbortController()

const cancelRequest = setTimeout(() => {
    controller.abort()
}, 5000)

await api.hello.get({
    fetch: {
        signal: controller.signal
    }
})

clearTimeout(cancelRequest)

File upload

We may pass any of the following to attach file(s):

File
File[]
FileList
Blob

Attaching a file will result in content-type being multipart/form-data. The route schema still controls the accepted TypeScript type. For t.Files(), convert an input’s FileList to File[]; use a File when the schema requires a file rather than a plain Blob.

Suppose we have the server as follows:

import { Elysia, t } from 'elysia'

const app = new Elysia()
    .post('/image', {
        body: t.Object({
            title: t.String(),
            image: t.Files()
        })
    }, ({ body: { image, title } }) => title)
    .listen(3000)

export type App = typeof app

Then upload from the client:

import { treaty } from '@elysia/eden'
import type { App } from './server'

const api = treaty<App>('localhost:3000')

const images = document.getElementById('images') as HTMLInputElement

const { data } = await api.image.post({
    title: "Misono Mika",
    image: Array.from(images.files ?? []),
})