First Class React Query support

[eyueldk]

I love Eden, so cool so slick... but for production applications I rarely use the client raw, I mostly use it with React Query.

One problem I had with wrapping Eden Treaty or Eden Fetch in a React Query mutation/query is that it doesn't natively throw errors, it returns them as query objects thus requiring me to wrap them and conditionally throw errors for React Query to identify them as Errors.

const query = useQuery({ queryFn: eden.api.something.get }); // this would never have errors because no exception is thrown

I believe it would be fantastic if there was first class support for React Query (maybe an EdenQuery like EdenFetch).

A killer feature would be for users to define query keys in their routes and the React Query client would invalidate accordingly.

That's my 2 cents. Love the library, love the work.

[theoludwig]

I agree that would be awesome to have first class React Query support.

A killer feature would be for users to define query keys in their routes and the React Query client would invalidate accordingly.

We don't even need that? As key could be the route path, HTTP method, and the json stringified input.

[rejoanahmed]

for now this is how I use

import type { App } from '@api/index'
import { type Treaty, treaty } from '@elysiajs/eden'
import {
  type QueryKey,
  type UseQueryOptions,
  useQuery as useTanstackQuery
} from '@tanstack/react-query'

const api = treaty<App>('localhost:3000', {
  fetch: {
    credentials: 'include',
    mode: 'cors'
  }
})

/**
 * Typed useQuery hook for Eden Treaty endpoints
 * Automatically infers data and error types from the Treaty response
 * Usage: const { data, error } = useQuery(['user', 'profile'], () => api.user.profile.get())
 */
export function useQuery<
  T extends Record<number, unknown> = Record<number, unknown>
>(
  queryKey: QueryKey,
  treatyFn: () => Promise<Treaty.TreatyResponse<T>>,
  options?: Omit<
    UseQueryOptions<
      Treaty.Data<Treaty.TreatyResponse<T>>,
      Treaty.Error<Treaty.TreatyResponse<T>>
    >,
    'queryKey' | 'queryFn'
  >
) {
  return useTanstackQuery<
    Treaty.Data<Treaty.TreatyResponse<T>>,
    Treaty.Error<Treaty.TreatyResponse<T>>
  >({
    queryKey,
    queryFn: async () => {
      const response = await treatyFn()

      if (response.error) {
        throw response.error
      }

      if (response.data !== undefined) {
        return response.data as Treaty.Data<Treaty.TreatyResponse<T>>
      }

      throw new Error('No data returned from API')
    },
    ...options
  })
}

export default api