7nohe / openapi-react-query-codegen

OpenAPI React Query Codegen is a code generator for creating React Query (also known as TanStack Query) hooks based on your OpenAPI schema.
https://openapi-react-query-codegen.vercel.app
MIT License
302 stars 31 forks source link

Allow generation of simple query functions instead of hooks #123

Closed bryanjtc closed 4 weeks ago

bryanjtc commented 5 months ago

Is your feature request related to a problem? Please describe. I cannot use a hook outside a component. This is not ideal when I use react router loaders.

Describe the solution you'd like

// Current query definition
export const useContactDetailsServiceGetContactDetails = ({ client }, queryKey?, options?) => 
  useQuery({ 
    queryKey: Common.UseContactDetailsServiceGetContactDetailsKeyFn({ client }, queryKey), 
    queryFn: () => ContactDetailsService.getContactDetails({ client }), ...options 
  });

// New query definition Option
export const UseContactDetailsSimpleServiceGetContactDetails = async (queryClient, { client }, queryKey?, options?) => 
  await queryClient.ensureQueryData({
    queryKey: Common.UseContactDetailsServiceGetContactDetailsKeyFn({ client }, queryKey),
    queryFn: () => ContactDetailsService.getContactDetails({ client }),
  })

// This will allow me to do this
export const loader =
  (queryClient) =>
  async ({ params }) => {
    return await UseContactDetailsSimpleServiceGetContactDetails(queryClient, { params.client })
  }

Adding a cli option to generate one type of query or both can be added.

Describe alternatives you've considered Manually creating the new query definition

Additional context Add any other context or screenshots about the feature request here.

seriouslag commented 5 months ago

I like the idea of adding an option to pass the queryClient per request. If not provided, it defaults to a global singleton instance.

omridevk commented 5 months ago

can't this be done using prefetch? maybe exporting queryClient.fetchQuery? as well prefetch?

seriouslag commented 5 months ago

Upon reading this again, I believe I missed your point.

We could generate the ensureQueryData function calls. Could you describe when you use them so we can build a realistic example?

bryanjtc commented 5 months ago

I use them in react router loaders. The function allows me to fetch the data before the route renders.

Marsunpaisti commented 3 months ago

I was also browsing this repo as a candidate codegen to use with tanstack router. Adding generated functions for ensureQueryData or just the queryOptions that can then be used with ensureQueryData, invalidateQueries, etc. would be immensely helpful.

Direct link to tanstack router docs example of what a basic use case looks like: https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading#a-more-realistic-example-using-tanstack-query

7nohe commented 2 months ago

It seems these can be implemented similarly to the already existing prefetchQuery functionality.