Skip to content

Allow generation of simple query functions instead of hooks #123

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

Closed
bryanjtc opened this issue May 31, 2024 · 6 comments
Closed

Allow generation of simple query functions instead of hooks #123

bryanjtc opened this issue May 31, 2024 · 6 comments
Assignees
Labels
enhancement New feature or request

Comments

@bryanjtc
Copy link
Contributor

bryanjtc commented May 31, 2024

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.

@7nohe 7nohe added the enhancement New feature or request label Jun 7, 2024
@seriouslag
Copy link
Collaborator

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
Copy link

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

@seriouslag
Copy link
Collaborator

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
Copy link
Contributor Author

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

@Marsunpaisti
Copy link

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
Copy link
Owner

7nohe commented Sep 16, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

5 participants