|
2 | 2 |
|
3 | 3 | TanStack Query integration for [Elysia Eden](https://github.com/elysiajs/eden) - type-safe queries and mutations with zero boilerplate. |
4 | 4 |
|
| 5 | +Highlights: |
| 6 | + |
| 7 | +- Auto-generated `queryKey`, `queryOptions`, `mutationOptions`, and cache helpers |
| 8 | +- Type-safe data and error inference from your Elysia routes |
| 9 | +- Works with any TanStack Query adapter (React, Svelte, Vue, Solid) |
| 10 | + |
5 | 11 | ## Installation |
6 | 12 |
|
7 | 13 | ```bash |
@@ -34,6 +40,18 @@ const query = createQuery(() => |
34 | 40 | // query.data is typed as your Elysia response type! |
35 | 41 | ``` |
36 | 42 |
|
| 43 | +React example: |
| 44 | + |
| 45 | +```ts |
| 46 | +import { useQuery } from '@tanstack/react-query' |
| 47 | + |
| 48 | +const query = useQuery( |
| 49 | + eden.users({ id: '123' }).get.queryOptions({ |
| 50 | + params: { id: '123' } |
| 51 | + }) |
| 52 | +) |
| 53 | +``` |
| 54 | + |
37 | 55 | ### Infinite Queries |
38 | 56 |
|
39 | 57 | ```ts |
@@ -107,6 +125,23 @@ utils.users({ id: '123' }).get.setData({ params: { id: '123' } }, { id: '123', n |
107 | 125 | const cached = utils.users({ id: '123' }).get.getData({ params: { id: '123' } }) |
108 | 126 | ``` |
109 | 127 |
|
| 128 | +### Error Handling |
| 129 | + |
| 130 | +`queryFn` and `mutationFn` throw when the Eden response has `error`, so TanStack |
| 131 | +Query error states are populated automatically: |
| 132 | + |
| 133 | +```ts |
| 134 | +const options = eden.users({ id: '123' }).get.queryOptions({ |
| 135 | + params: { id: '123' } |
| 136 | +}) |
| 137 | + |
| 138 | +try { |
| 139 | + const data = await options.queryFn() |
| 140 | +} catch (error) { |
| 141 | + // error is typed from your Elysia response map |
| 142 | +} |
| 143 | +``` |
| 144 | + |
110 | 145 | ## API |
111 | 146 |
|
112 | 147 | ### `createEdenTQ<App>(domain, config?)` |
@@ -137,6 +172,20 @@ Each HTTP method (`get`, `post`, `put`, `delete`, `patch`) has: |
137 | 172 | | `.setData(queryClient, input, updater)` | Manually set cache data | |
138 | 173 | | `.getData(queryClient, input)` | Read from cache | |
139 | 174 |
|
| 175 | +### Query Key Shape |
| 176 | + |
| 177 | +Query keys are deterministic and include routing information: |
| 178 | + |
| 179 | +``` |
| 180 | +[ |
| 181 | + ...queryKeyPrefix, // default ['eden'] |
| 182 | + method, // 'get', 'post', ... |
| 183 | + pathTemplate, // e.g. ['users', ':id'] |
| 184 | + params ?? null, |
| 185 | + query ?? null |
| 186 | +] |
| 187 | +``` |
| 188 | + |
140 | 189 | ### Query Options Overrides |
141 | 190 |
|
142 | 191 | You can pass standard TanStack Query options as overrides: |
|
0 commit comments