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;
+}