Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Support queryClient Parameter in Generated React Query Hooks #1278

Open
KrisKnez opened this issue Mar 22, 2024 · 0 comments
Labels
enhancement New feature or request tanstack-query TanStack Query related issue

Comments

@KrisKnez
Copy link

KrisKnez commented Mar 22, 2024

What are the steps to reproduce this issue?

  1. Use Orval to generate a react-query client from an OpenAPI specification.
  2. Review the generated code for a query, such as useGetApiV3Ticker.

What happens?

The generated code structure for queries (e.g., useGetApiV3Ticker) does not provide a way to pass a queryClient as the second parameter to the useQuery hook from react-query. This limitation prevents the developer from customizing the query client at a hook level, which is necessary for certain scenarios.

Example generated hook

export const useGetApiV3Ticker = <TData = Awaited<ReturnType<typeof getApiV3Ticker>>, TError = AxiosError<Error>>(
 params?: GetApiV3TickerParams, options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof getApiV3Ticker>>, TError, TData>, axios?: AxiosRequestConfig}

  ):  UseQueryResult<TData, TError> & { queryKey: QueryKey } => {

  const queryOptions = getGetApiV3TickerQueryOptions(params,options)

  const query = useQuery(queryOptions) as  UseQueryResult<TData, TError> & { queryKey: QueryKey };

  query.queryKey = queryOptions.queryKey ;

  return query;
}

What were you expecting to happen?

I was expecting the generated code to provide a means to pass a custom queryClient as an optional second parameter to the generated hook. This would allow for greater flexibility and control over the query handling within the application, especially in cases where different components or hooks may require different query client configurations.

Expected generated hook

export const useGetApiV3Ticker = <TData = Awaited<ReturnType<typeof getApiV3Ticker>>, TError = AxiosError<Error>>(
 params?: GetApiV3TickerParams, options?: { query?:UseQueryOptions<Awaited<ReturnType<typeof getApiV3Ticker>>, TError, TData>, axios?: AxiosRequestConfig},
queryClient?: QueryClient

  ):  UseQueryResult<TData, TError> & { queryKey: QueryKey } => {

  const queryOptions = getGetApiV3TickerQueryOptions(params,options)

  const query = useQuery(queryOptions, queryClient) as  UseQueryResult<TData, TError> & { queryKey: QueryKey };

  query.queryKey = queryOptions.queryKey ;

  return query;
}

Any logs, error output, etc?

N/A - This issue pertains to the structure of the generated code rather than a runtime error.

Any other comments?

This limitation becomes particularly restrictive in frameworks like Astro, where sharing state between components using the Context API is not as straightforward as in other React environments. In such cases, being able to pass a custom queryClient directly to the useQuery hook becomes essential.

What versions are you using?

Operating System: N/A
Package Version: 6.25.0
Browser Version: N/A

@melloware melloware added the enhancement New feature or request label Mar 25, 2024
@melloware melloware added the tanstack-query TanStack Query related issue label Apr 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request tanstack-query TanStack Query related issue
Projects
None yet
Development

No branches or pull requests

2 participants