7nohe / openapi-react-query-codegen

OpenAPI React Query Codegen is a code generator for creating React Query (also known as TanStack Query) hooks based on your OpenAPI schema.
https://openapi-react-query-codegen.vercel.app
MIT License
298 stars 30 forks source link

Query key different in generated prefetch.ts vs generated queries.ts #121

Closed TomWebbio closed 5 months ago

TomWebbio commented 5 months ago

Describe the bug I generated the files for nextjs approuter using fetch. I noticed the prefetch isnt working, because the queryKey is generated differently in the generated code, meaning that React-query think it's 2 different queries.

See the querykey in the prefetch.ts:

queryClient.prefetchQuery({ queryKey: [ Common.useQuestionairesServiceQuestionaireControllerFindKey, [{ filterId, limit, page, search, searchBy, sortBy }] ], queryFn: () => QuestionairesService.questionaireControllerFind({ filterId, limit, page, search, searchBy, sortBy }) });

Now see the querykey in the queries.ts:

useQuery<TData, TError>({ queryKey: Common.UseQuestionairesServiceQuestionaireControllerFindKeyFn( { filterId, limit, page, search, searchBy, sortBy }, queryKey ), queryFn: () => QuestionairesService.questionaireControllerFind({ filterId, limit, page, search, searchBy, sortBy }) as TData, ...options });

This results in 2 different keys in queries:

image

To Reproduce Steps to reproduce the behavior:

Generate the files using this script:

"codegen": "rimraf ./openapi && openapi-rq -i https://our-url/api.json -c fetch && prettier --write .",

I can easily fix this in the generated code by using the same querykey generation method in the queries.ts as in the prefetch.ts

If there's any way for you guys to fix this, or to give me a solid work around, that'd be great!

7nohe commented 5 months ago

This is a duplicate of #102. Currently working on #103.

TomWebbio commented 5 months ago

Thanks, I will close this issue and keep track of those.