dotansimha / dotansimha/graphql-code-generator-community

typescript-react-query uses deprecated (v3.x) `useQuery` arguments

Open
#389 3 comments 3 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.