dotansimha / dotansimha/graphql-code-generator-community
typescript-react-query uses deprecated (v3.x) `useQuery` arguments
- Dominant language
- TypeScript
- Stars
- 137
- Forks
- 195
- Avg merge
- 6h 20m
- Merged PRs (30d)
- 16
Description
**Is your feature request related to a problem? Please describe.**
typescript-react-query generates query hooks that call `useQuery` using [the old v3.x syntax](https://tanstack.com/query/v3/docs/react/reference/useQuery) of `useQuery(queryKey, queryFn, options)`, which is deprecated and [support will be removed in v5](https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object).
While this syntax still works in `@tanstack/react-query` v4.x, [the official v4.x syntax](https://tanstack.com/query/v4/docs/react/reference/useQuery) (and [v5.x beta](https://tanstack.com/query/v5/docs/react/reference/useQuery)) is to just pass one object, `useQuery(options)`, which can contain `queryKey` and `queryFn` as properties.
The main practical impact of this are:
- v5.x ([currently in beta](https://github.com/TanStack/query/releases?q=v5)) will [remove support for this syntax](https://tanstack.com/query/v5/docs/react/guides/migrating-to-v5#supports-a-single-signature-one-object), so generated hooks will not be compatible with v5
- It causes a limitation where it is not currently possible to pass a custom fetcher function to a generated hook. Calling `useSomeGeneratedQuery(variables, { queryFn: somefn })` doesn't work as expected. `someFn` is never used (presumably because in the old v.3.x syntax, `queryFn` wasn't a supported option, it was passed as the second argument which is hardcoded in generated hooks).
**Describe the solution you'd like**
An option to generate `useQuery` hooks that use the >=4.x syntax. They'd probably look like this:
```ts
export const useSomeDataQuery = (
variables?: SomeDataVariables,
options?: UseQueryOptions
) =>
useQuery>({
queryKey: variables === undefined ? ['SomeData'] : ['SomeData', variables],
queryFn: fetchData(SomeDataDocument, variables)
...options // spread last so, unlike in the current implementation, options.queryFn will be applied and used
})
```
That should be compatible with v5.x, match the docs for v4.x, and enable usage like this (which isn't currently possible):
```ts
const { data, isLoading, ...etc } = useSomeDataQuery(variables, {
// with the current syntax, this is supposedly a valid option but doesn't do anything
queryFn: someDifferentFnForThisCase
})
```
**Describe alternatives you've considered**
This could also be the default behaviour since it's the documented syntax for v4.x but that might be a breaking change so it's probably best to make it an opt-in option, then become the default in this package's v5.x release?
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.