Prefetch hook keys aren't properly set

[nopitown]

trafficstars

Describe the bug I started using the prefetch hooks introduced a few days ago, but the dynamic key is hardcoded, making it challenging to use the prefetched data because the keys do not match.

To Reproduce Just generate the hooks and check the prefetch code.

Here is an example of the code generated:

export const prefetchUseFooServiceGetBar = (queryClient: QueryClient) =>
  queryClient.prefetchQuery({
    queryKey: [Common.useUseFooServiceGetBarKey, []],
    queryFn: () => FooService.getBar(),
  });

OpenAPI spec file N/A

Expected behavior Similar to a query hook, the keys must be dynamic so we can tell React Query what key should be used for caching:

export const prefetchUseFooServiceGetBar = (queryClient: QueryClient, queryKey?: TQueryKey) =>
  queryClient.prefetchQuery({
    queryKey: Common.useUseFooServiceGetBarKeyFn(queryKey),
    queryFn: () => FooService.getBar(),
  });

Screenshots

• OS: MacOS
• Version: 14.4.1

Additional context N/A

[seriouslag]

Please check out #97

https://github.com/7nohe/openapi-react-query-codegen/pull/97

I believe that should help you

[nopitown]

@seriouslag Got it!

But for prefetching to work correctly, it should use the same keys created in the query. Right now, the implementation is different, so the result is that it doesn't use the cache. In my case, I have a query: useQueryAuthServiceGetToken(), and this creates the key AuthServiceGetToken, but the prefetch hooks create the key AuthServiceGetToken, [] so since both are different React Query doesn't use the cached values; it assumes it is a different query.

I hope that makes more sense. Thanks for your quick response 🙏🏼

[seriouslag]

@seriouslag Got it!

But for prefetching to work correctly, it should use the same keys created in the query. Right now, the implementation is different, so the result is that it doesn't use the cache. In my case, I have a query: useQueryAuthServiceGetToken(),, and this creates the key AuthServiceGetToken, but the prefetch hooks create the key AuthServiceGetToken, [] so since both are different React Query doesn't use the cached values; it assumes it is a different query.

I hope that makes more sense. Thanks for your quick response 🙏🏼

I see, so prefetch isn't using the new queryKey functions. This is a bug.

[nopitown]

@seriouslag Yes, I think that's the issue here 👍🏼

[seriouslag]

If you wanna give a PR a go that would be awesome. I won't be able to look at this for at least a day.

[nopitown]

@seriouslag I just sent a draft PR but it will take until tomorrow to make sure it works as intended as I'm getting familiar with the codebase. Feel free to let me know if I'm heading in the wrong direction tho. Thanks!