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

Helpers to prefetch data #91

Closed
nopitown opened this issue Apr 25, 2024 · 5 comments · Fixed by #92
Closed

Helpers to prefetch data #91

nopitown opened this issue Apr 25, 2024 · 5 comments · Fixed by #92
Labels
enhancement New feature or request

Comments

@nopitown
Copy link
Contributor

nopitown commented Apr 25, 2024

Is your feature request related to a problem? Please describe.
Currently, I'm prefetching data in a server component so it can later be used in a client component. But creating the code is a manual process that could be easier if we have helpers (similar to the hooks).

Describe the solution you'd like

It would be nice to have something like:

await useFooServiceFindOnePrefetch(//...keys); // or await prefetchFooServiceFindOne(//...keys)

Instead of building it from scratch:

  await queryClient.prefetchQuery({
    queryKey: [
      useFooServiceFindOnePrefetchKey,
     // more keys
    ],
    queryFn: () => {
      return FooService.findOne(//...keys);
    },
  });

Any chance to consider this?
Describe alternatives you've considered
N/A

Additional context
I'm prefetching data using the guidelines from here

@seriouslag
Copy link
Collaborator

seriouslag commented Apr 25, 2024

@nopitown, thank you for the suggestion!
We could generate these.

I have not used prefetch with Tanstack before.
We would need the user to pass the queryClient to each method.
My understanding is that this is only for GET requests.

My rough draft of how the generated code will look like and how to use it.

/** generated code */
const prefetchUseFooServiceFindOne = (queryClient: QueryClient, options = {
  // properties here
}) => queryClient.prefetchQuery({
  queryKey: [
    useFooServiceFindOnePrefetchKey,
    // options
  ],
  queryFn: () => {
      return FooService.findOne({
        // options
      });
    },
});

/** use */
const queryClient = new QueryClient({});
// using defaults
await prefetchUseFooServiceFindOne(queryClient);
// using overrides
await prefetchUseFooServiceFindOne(queryClient, {
  page: 1,
  limit: 10,
});

I opened a PR to start addressing this: #92
Any suggestions or testing would be great.

@nopitown
Copy link
Contributor Author

This looks fantastic! Let me give it a try 🙏🏼

@seriouslag
Copy link
Collaborator

Reopening as this is not released yet. @7nohe

@seriouslag seriouslag reopened this Apr 29, 2024
@7nohe
Copy link
Owner

7nohe commented Apr 30, 2024

Sorry for the delay. v1.2.1 has been released!

@7nohe 7nohe closed this as completed Apr 30, 2024
@nopitown
Copy link
Contributor Author

nopitown commented May 2, 2024

Posted something that could make the hook more useful #102

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

Successfully merging a pull request may close this issue.

3 participants