orval-labs/orval

Feature request: useQueryOptionsHook for react-query

Opened this issue · 0 comments

First of all, thanks for this amazing library!

I have a feature request for the react-query generator. I would like to use the generated query options with useQueries, while also using a hook mutator.

What happens?

A currently generated function is, for example:

export const useListPetsQueryOptions = <
TData = Awaited<ReturnType<ReturnType<typeof useListPetsHook>>>,
TError = Error,
>(
params?: ListPetsParams,
options?: {
query?: UseQueryOptions<
Awaited<ReturnType<ReturnType<typeof useListPetsHook>>>,
TError,
TData
>;
},
) => {
const { query: queryOptions } = options ?? {};
const queryKey = queryOptions?.queryKey ?? getListPetsQueryKey(params);
const listPets = useListPetsHook();
const queryFn: QueryFunction<
Awaited<ReturnType<ReturnType<typeof useListPetsHook>>>
> = ({ signal }) => listPets(params, signal);
return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
Awaited<ReturnType<ReturnType<typeof useListPetsHook>>>,
TError,
TData
> & { queryKey: QueryKey };
};

The useListPetsQueryOptions function accepts parameters, and returns the query options. But you cannot run hooks in a loop.

What were you expecting to happen?

I would expect that there is a way to get an option generator.

For example, this already exists for the query function itself. The useListPetsHook returns a function.

In the same style, I would also expect a useListPetsQueryOptionsHook or useListPetsQueryOptionsGenerator or useGetListPetsQueryOptions, that could be used like this:

const getListPetsQueryOptions = useListPetsQueryOptionsHook();

const queries = useQueries({
  queries: Array(5).keys().map(length => getListPetsQueryOptions({ length }))
});

For me, it would also be okay if the current use*QueryOptions is changed instead of introducing a new hook - but that would of course be a breaking change.