Allow generation of simple query functions instead of hooks
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.
I like the idea of adding an option to pass the queryClient per request. If not provided, it defaults to a global singleton instance.
can't this be done using prefetch? maybe exporting queryClient.fetchQuery? as well prefetch?
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?
I use them in react router loaders. The function allows me to fetch the data before the route renders.
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
It seems these can be implemented similarly to the already existing prefetchQuery functionality.