feat(react-query): support react query v5

.changeset/twelve-mugs-reflect.md

@@ -0,0 +1,5 @@
+---
+'@graphql-codegen/typescript-react-query': major
+---
+
+Support react-query v5

.vscode/settings.json

@@ -19,5 +19,8 @@
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }

dev-test/githunt/types.react-query.ts

@@ -460,12 +460,13 @@ export const CommentDocument = `
   }
 }
     ${CommentsPageCommentFragmentDoc}`;
+
 export const useCommentQuery = <TData = CommentQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   variables: CommentQueryVariables,
   options?: UseQueryOptions<CommentQuery, TError, TData>,
-) =>
-  useQuery<CommentQuery, TError, TData>(
+) => {
+  return useQuery<CommentQuery, TError, TData>(
     ['Comment', variables],
     fetcher<CommentQuery, CommentQueryVariables>(
       dataSource.endpoint,
@@ -475,12 +476,14 @@ export const useCommentQuery = <TData = CommentQuery, TError = unknown>(
     ),
     options,
   );
+};
+
 export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   variables: CommentQueryVariables,
   options?: UseInfiniteQueryOptions<CommentQuery, TError, TData>,
-) =>
-  useInfiniteQuery<CommentQuery, TError, TData>(
+) => {
+  return useInfiniteQuery<CommentQuery, TError, TData>(
     ['Comment.infinite', variables],
     metaData =>
       fetcher<CommentQuery, CommentQueryVariables>(
@@ -491,6 +494,7 @@ export const useInfiniteCommentQuery = <TData = CommentQuery, TError = unknown>(
       )(),
     options,
   );
+};
 
 export const CurrentUserForProfileDocument = `
     query CurrentUserForProfile {
@@ -500,12 +504,13 @@ export const CurrentUserForProfileDocument = `
   }
 }
     `;
+
 export const useCurrentUserForProfileQuery = <TData = CurrentUserForProfileQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   variables?: CurrentUserForProfileQueryVariables,
   options?: UseQueryOptions<CurrentUserForProfileQuery, TError, TData>,
-) =>
-  useQuery<CurrentUserForProfileQuery, TError, TData>(
+) => {
+  return useQuery<CurrentUserForProfileQuery, TError, TData>(
     variables === undefined ? ['CurrentUserForProfile'] : ['CurrentUserForProfile', variables],
     fetcher<CurrentUserForProfileQuery, CurrentUserForProfileQueryVariables>(
       dataSource.endpoint,
@@ -515,15 +520,17 @@ export const useCurrentUserForProfileQuery = <TData = CurrentUserForProfileQuery
     ),
     options,
   );
+};
+
 export const useInfiniteCurrentUserForProfileQuery = <
   TData = CurrentUserForProfileQuery,
   TError = unknown,
 >(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   variables?: CurrentUserForProfileQueryVariables,
   options?: UseInfiniteQueryOptions<CurrentUserForProfileQuery, TError, TData>,
-) =>
-  useInfiniteQuery<CurrentUserForProfileQuery, TError, TData>(
+) => {
+  return useInfiniteQuery<CurrentUserForProfileQuery, TError, TData>(
     variables === undefined
       ? ['CurrentUserForProfile.infinite']
       : ['CurrentUserForProfile.infinite', variables],
@@ -536,6 +543,7 @@ export const useInfiniteCurrentUserForProfileQuery = <
       )(),
     options,
   );
+};
 
 export const FeedDocument = `
     query Feed($type: FeedType!, $offset: Int, $limit: Int) {
@@ -547,12 +555,13 @@ export const FeedDocument = `
   }
 }
     ${FeedEntryFragmentDoc}`;
+
 export const useFeedQuery = <TData = FeedQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   variables: FeedQueryVariables,
   options?: UseQueryOptions<FeedQuery, TError, TData>,
-) =>
-  useQuery<FeedQuery, TError, TData>(
+) => {
+  return useQuery<FeedQuery, TError, TData>(
     ['Feed', variables],
     fetcher<FeedQuery, FeedQueryVariables>(
       dataSource.endpoint,
@@ -562,12 +571,14 @@ export const useFeedQuery = <TData = FeedQuery, TError = unknown>(
     ),
     options,
   );
+};
+
 export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   variables: FeedQueryVariables,
   options?: UseInfiniteQueryOptions<FeedQuery, TError, TData>,
-) =>
-  useInfiniteQuery<FeedQuery, TError, TData>(
+) => {
+  return useInfiniteQuery<FeedQuery, TError, TData>(
     ['Feed.infinite', variables],
     metaData =>
       fetcher<FeedQuery, FeedQueryVariables>(
@@ -578,6 +589,7 @@ export const useInfiniteFeedQuery = <TData = FeedQuery, TError = unknown>(
       )(),
     options,
   );
+};
 
 export const SubmitRepositoryDocument = `
     mutation submitRepository($repoFullName: String!) {
@@ -586,6 +598,7 @@ export const SubmitRepositoryDocument = `
   }
 }
     `;
+
 export const useSubmitRepositoryMutation = <TError = unknown, TContext = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   options?: UseMutationOptions<
@@ -594,8 +607,8 @@ export const useSubmitRepositoryMutation = <TError = unknown, TContext = unknown
     SubmitRepositoryMutationVariables,
     TContext
   >,
-) =>
-  useMutation<SubmitRepositoryMutation, TError, SubmitRepositoryMutationVariables, TContext>(
+) => {
+  return useMutation<SubmitRepositoryMutation, TError, SubmitRepositoryMutationVariables, TContext>(
     ['submitRepository'],
     (variables?: SubmitRepositoryMutationVariables) =>
       fetcher<SubmitRepositoryMutation, SubmitRepositoryMutationVariables>(
@@ -606,13 +619,16 @@ export const useSubmitRepositoryMutation = <TError = unknown, TContext = unknown
       )(),
     options,
   );
+};
+
 export const SubmitCommentDocument = `
     mutation submitComment($repoFullName: String!, $commentContent: String!) {
   submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
     ...CommentsPageComment
   }
 }
     ${CommentsPageCommentFragmentDoc}`;
+
 export const useSubmitCommentMutation = <TError = unknown, TContext = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   options?: UseMutationOptions<
@@ -621,8 +637,8 @@ export const useSubmitCommentMutation = <TError = unknown, TContext = unknown>(
     SubmitCommentMutationVariables,
     TContext
   >,
-) =>
-  useMutation<SubmitCommentMutation, TError, SubmitCommentMutationVariables, TContext>(
+) => {
+  return useMutation<SubmitCommentMutation, TError, SubmitCommentMutationVariables, TContext>(
     ['submitComment'],
     (variables?: SubmitCommentMutationVariables) =>
       fetcher<SubmitCommentMutation, SubmitCommentMutationVariables>(
@@ -633,6 +649,8 @@ export const useSubmitCommentMutation = <TError = unknown, TContext = unknown>(
       )(),
     options,
   );
+};
+
 export const VoteDocument = `
     mutation vote($repoFullName: String!, $type: VoteType!) {
   vote(repoFullName: $repoFullName, type: $type) {
@@ -644,11 +662,12 @@ export const VoteDocument = `
   }
 }
     `;
+
 export const useVoteMutation = <TError = unknown, TContext = unknown>(
   dataSource: { endpoint: string; fetchParams?: RequestInit },
   options?: UseMutationOptions<VoteMutation, TError, VoteMutationVariables, TContext>,
-) =>
-  useMutation<VoteMutation, TError, VoteMutationVariables, TContext>(
+) => {
+  return useMutation<VoteMutation, TError, VoteMutationVariables, TContext>(
     ['vote'],
     (variables?: VoteMutationVariables) =>
       fetcher<VoteMutation, VoteMutationVariables>(
@@ -659,3 +678,4 @@ export const useVoteMutation = <TError = unknown, TContext = unknown>(
       )(),
     options,
   );
+};

packages/plugins/typescript/react-query/src/config.ts

@@ -4,38 +4,12 @@ export type HardcodedFetch = { endpoint: string; fetchParams?: string | Record<s
 export type CustomFetch = { func: string; isReactHook?: boolean } | string;
 export type GraphQlRequest = 'graphql-request' | { clientImportPath: string };
 
-/**
- * @description This plugin generates `React-Query` Hooks with TypeScript typings.
- *
- * It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
- *
- * > **If you are using the `react-query` package instead of the `@tanstack/react-query` package in your project, please set the `legacyMode` option to `true`.**
- *
- */
-export interface ReactQueryRawPluginConfig
-  extends Omit<
-    RawClientSideBasePluginConfig,
-    | 'documentMode'
-    | 'noGraphQLTag'
-    | 'gqlImport'
-    | 'documentNodeImport'
-    | 'noExport'
-    | 'importOperationTypesFrom'
-    | 'importDocumentNodeExternallyFrom'
-    | 'useTypeImports'
-    | 'legacyMode'
-  > {
+export interface BaseReactQueryPluginConfig {
   /**
-   * @description Customize the fetcher you wish to use in the generated file. React-Query is agnostic to the data-fetching layer, so you should provide it, or use a custom one.
-   *
-   * The following options are available to use:
-   *
-   * - 'fetch' - requires you to specify endpoint and headers on each call, and uses `fetch` to do the actual http call.
-   * - `{ endpoint: string, fetchParams: RequestInit }`: hardcode your endpoint and fetch options into the generated output, using the environment `fetch` method. You can also use `process.env.MY_VAR` as endpoint or header value.
-   * - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
-   * - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
+   * @default unknown
+   * @description Changes the default "TError" generic type.
    */
-  fetcher?: 'fetch' | HardcodedFetch | GraphQlRequest | CustomFetch;
+  errorType?: string;
 
   /**
    * @default false
@@ -98,23 +72,30 @@ export interface ReactQueryRawPluginConfig
   exposeFetcher?: boolean;
 
   /**
-   * @default unknown
-   * @description Changes the default "TError" generic type.
+   * @default false
+   * @description Adds an Infinite Query along side the standard one
    */
-  errorType?: string;
+  addInfiniteQuery?: boolean;
 
   /**
    * @default false
-   * @description Adds an Infinite Query along side the standard one
+   * @description Adds a Suspense Query along side the standard one
    */
-  addInfiniteQuery?: boolean;
+  addSuspenseQuery?: boolean;
 
   /**
    * @default false
    * @description If true, it imports `react-query` not `@tanstack/react-query`, default is false.
+   * @deprecated Please use `reactQueryVersion` instead.
    */
   legacyMode?: boolean;
 
+  /**
+   * @default 4
+   * @description The version of react-query to use. Will override the legacyMode option.
+   */
+  reactQueryVersion?: 3 | 4 | 5;
+
   /**
    * @default empty
    * @description Add custom import for react-query.
@@ -126,3 +107,38 @@ export interface ReactQueryRawPluginConfig
    */
   reactQueryImportFrom?: string;
 }
+
+/**
+ * @description This plugin generates `React-Query` Hooks with TypeScript typings.
+ *
+ * It extends the basic TypeScript plugins: `@graphql-codegen/typescript`, `@graphql-codegen/typescript-operations` - and thus shares a similar configuration.
+ *
+ * > **If you are using the `react-query` package instead of the `@tanstack/react-query` package in your project, please set the `legacyMode` option to `true`.**
+ *
+ */
+export interface ReactQueryRawPluginConfig
+  extends Omit<
+      RawClientSideBasePluginConfig,
+      | 'documentMode'
+      | 'noGraphQLTag'
+      | 'gqlImport'
+      | 'documentNodeImport'
+      | 'noExport'
+      | 'importOperationTypesFrom'
+      | 'importDocumentNodeExternallyFrom'
+      | 'useTypeImports'
+      | 'legacyMode'
+    >,
+    BaseReactQueryPluginConfig {
+  /**
+   * @description Customize the fetcher you wish to use in the generated file. React-Query is agnostic to the data-fetching layer, so you should provide it, or use a custom one.
+   *
+   * The following options are available to use:
+   *
+   * - 'fetch' - requires you to specify endpoint and headers on each call, and uses `fetch` to do the actual http call.
+   * - `{ endpoint: string, fetchParams: RequestInit }`: hardcode your endpoint and fetch options into the generated output, using the environment `fetch` method. You can also use `process.env.MY_VAR` as endpoint or header value.
+   * - `file#identifier` - You can use custom fetcher method that should implement the exported `ReactQueryFetcher` interface. Example: `./my-fetcher#myCustomFetcher`.
+   * - `graphql-request`: Will generate each hook with `client` argument, where you should pass your own `GraphQLClient` (created from `graphql-request`).
+   */
+  fetcher?: 'fetch' | HardcodedFetch | GraphQlRequest | CustomFetch;
+}