[Feature Request] Better support for prefetching with hooks (`react-query`)

[rcwestlake]

Is your feature request related to a problem? Please describe. I'm building a Next.js app and using zenstack + react-query hooks. I want to prefetch a query when hovering over the link. Both Next.js and React Query have the ability to do that but when using hooks generated by zenstack, it's challenging because: a) since querying is happening client side, the Next.js prefetch doesn't help b) the queryKey used by zenstack is complex

Describe the solution you'd like Add an alternative key structure that is simpler

Describe alternatives you've considered

• Potentially support additional keys or tags for hooks so that we can add a custom key e.g. deal-${id} so we can easily refetch

For now, I plan to not use the provided hook and create my own that I can prefetch / invalidate.

Additional context For example, when I use a hook to query a record, the queryKey used by zenstack is long and complex

["zenstack","Workspace","findFirst",{"include":{"Pipeline":{"include":{"Deals":true,"PipelineStages":true}}},"where":{"id":4}},{"infinite":false,"optimisticUpdate":true}]

I can hardcode for that but it seems brittle.

[ymc9]

Is your feature request related to a problem? Please describe. I'm building a Next.js app and using zenstack + react-query hooks. I want to prefetch a query when hovering over the link. Both Next.js and React Query have the ability to do that but when using hooks generated by zenstack, it's challenging because: a) since querying is happening client side, the Next.js prefetch doesn't help b) the queryKey used by zenstack is complex

Describe the solution you'd like Add an alternative key structure that is simpler

Describe alternatives you've considered

• Potentially support additional keys or tags for hooks so that we can add a custom key e.g. deal-${id} so we can easily refetch

For now, I plan to not use the provided hook and create my own that I can prefetch / invalidate.

Additional context For example, when I use a hook to query a record, the queryKey used by zenstack is long and complex

["zenstack","Workspace","findFirst",{"include":{"Pipeline":{"include":{"Deals":true,"PipelineStages":true}}},"where":{"id":4}},{"infinite":false,"optimisticUpdate":true}]

I can hardcode for that but it seems brittle.

Hi @rcwestlake , ZenStack hooks support the flexibility of Prisma queries, and this also means the query key needs to fully preserve the query conditions - that's why you see the lengthy key there. More details here: https://zenstack.dev/docs/next/reference/plugins/tanstack-query#query-key

You can use the exported getQueryKey function to compute the key instead of doing it manually.

I think to make prefetching easier, we can also generate a series of prefetcher functions like prefetchFindFirst, prefetchFindMany, etc., which deals with key computation internally. Do you think that'll be helpful?

[rcwestlake]

@ymc9 that would definitely be helpful. For context, I'm following this guide from react-query: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr.

To properly handle the prefetch, we would need easy access to both the queryKey and the queryFn which are used in the the regular hook in the client component.

If I'm misunderstanding the value of this or if there's another way to do this now, very open to using that approach, just not sure as of now.

[ymc9]

@ymc9 that would definitely be helpful. For context, I'm following this guide from react-query: https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr.

To properly handle the prefetch, we would need easy access to both the queryKey and the queryFn which are used in the the regular hook in the client component.

If I'm misunderstanding the value of this or if there's another way to do this now, very open to using that approach, just not sure as of now.

Currently there's no easy way to achieve it, mainly because the queryFn is not exported. If we extend the plugin to generate the prefetch functions, the fetch details can be hidden inside them.

How urgent is this for you? I believe we should definitely have this feature for V2, but I'd also like to see if it's blocking you now.

[rcwestlake]

It's not immediately urgent. I can live with the client-side queries and just have the loading screens hang for an extra 300-500ms. Once it's available, I would switch to it.

[Arkanii]

I wanted to try to implement this, but actually there is no prefetching method for vue and svelte.

I did a ticket here : https://github.com/TanStack/query/discussions/7900

Can you upvote my comment ? Maybe it can be useful.

[Arkanii]

I tried to start something here: https://github.com/zenstackhq/zenstack/pull/1715