support `useSuspenseQuery` from react-query v5

[MarkLyck]

Is your feature request related to a problem? Please describe.

I'm upgrading my application from react-query v4 to v5.

I've added the reactQueryVersion: 5 to my codegen config, and solved most issues.

However react-query v5, has deprecated the suspense: boolean option on useQuery in favor of a separate useSuspenseQuery hook.

This means all of my queries that did use suspense: true are now broken, since graphql-codegen generate all my queries as useQuery.

I saw a similar issue was created, but that was specifically for apollo which has a workaround. I don't use apollo, I use react-query, so unfortunately the solution there is not helpful.

Describe the solution you'd like

I'm not entirely sure what the best solution to this problem is. Ideally I would like to be able to make "some" but not all of my queries use suspense.

Essentially I need it to generate a useSuspenseQuery for some queries, instead of useQuery.

Describe alternatives you've considered

From the changelog and migration steps. I don't see any other alternative ways to accomplish this? But please let me know if there's a way.

Edit: I asked Tanner Linsley (creator of react-query) he confirmed there's no other way to do this now, and graphql-code-generator should update to use useSuspenseQuery when needed.

Is your feature request related to a problem? Please describe.

https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#new-hooks-for-suspense

https://tanstack.com/query/latest/docs/react/guides/suspense

[fmhurizen]

hey @MarkLyck i am also stuck some where here, i am migrating to react-query v5, also added reactQueryVersion: 5 in my codegen config, but it didn't resolved any of my error.

export const useGetTestQuery = <TData = Types.GetTestQuery, TError = unknown>(
  variables: Types.GetTestQueryVariables,
  options?: UseQueryOptions<Types.GetTestQuery, TError, TData>
) =>
  useQuery<Types.GetTestQuery, TError, TData>(
    ['getService', variables],
    fetcher<Types.GetTestQuery, Types.GetTestQueryVariables>(GetTestDocument, variables),
    options
    ^
  );

like it is generating hook with error Expected 1-2 arguments, but got 3.ts, seems like it is still using v4 version of react-query.

let my know if anyone can help me here?

[jayzes]

I believe this already exists in the plugin - there is an addSuspenseQuery option: https://github.com/dotansimha/graphql-code-generator-community/pull/434/files#diff-38f7b7f89098e5486e40c54e00569d09eb7b873bc8d4a7118aa39a1ce1c1be68R47

[cleferman]

@jayzes can confirm, I added addSuspenseQuery: true in my codegen.yml and now the generate scripts adds two functions, one with suspense and one without

[Tbaut]

in case this is not clear, it needs to be added in the config, for me it's in the config file .json:

{
  "overwrite": true,
  "schema": "localhost:4350/graphql",
  "documents": "src/**/*.graphql",
  "generates": {
    "src/gql/": {
      "preset": "client",
      "plugins": []
    },
    "types-and-hooks.tsx": {
      "plugins": ["typescript", "typescript-operations", "typescript-react-query"],
      "config": {
        "addSuspeneQuery": true, // <-----
        "reactQueryVersion": 5, // <-----
        "fetcher": "./src/fetcher#fetchData"
      }
    }
  }
}

[justAdevTV]

@jayzes can confirm, I added addSuspeneQuery: true in my codegen.yml and now the generate scripts adds two functions, one with suspense and one without

Is "Suspene" a typo? addSuspeneQuery vs addSuspenseQuery

[cleferman]

@justAdevTV yes, addSuspeneQuery was a typo. The correct name for it is addSuspenseQuery. I will update my comment.