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

packages/plugins/typescript/react-query/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@graphql-codegen/typescript-react-query",
- "version": "5.0.0",
+ "version": "5.0.1",
  "type": "module",
  "description": "GraphQL Code Generator plugin for generating a ready-to-use React-Query Hooks based on GraphQL operations",
  "repository": {

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

@@ -115,6 +115,12 @@ export interface ReactQueryRawPluginConfig
  */
  legacyMode?: boolean;
 
+ /**
+ * @default 4
+ * @description The version of react-query to use. Default is 4. legacyMode must be false to active this flag.
+ */
+ reactQueryVersion?: 4 | 5;
+
  /**
  * @default empty
  * @description Add custom import for react-query.

packages/plugins/typescript/react-query/src/fetcher-custom-mapper.ts

@@ -1,3 +1,4 @@
+import autoBind from 'auto-bind';
 import { OperationDefinitionNode } from 'graphql';
 import {
  buildMapperImport,
@@ -6,23 +7,20 @@ import {
 } from '@graphql-codegen/visitor-plugin-common';
 import { CustomFetch } from './config.js';
 import { FetcherRenderer } from './fetcher.js';
-import {
- generateInfiniteQueryKey,
- generateMutationKey,
- generateQueryKey,
-} from './variables-generator.js';
 import { ReactQueryVisitor } from './visitor.js';
 
-export class CustomMapperFetcher implements FetcherRenderer {
+export class CustomMapperFetcher extends FetcherRenderer {
  private _mapper: ParsedMapper;
  private _isReactHook: boolean;
 
- constructor(private visitor: ReactQueryVisitor, customFetcher: CustomFetch) {
+ constructor(protected visitor: ReactQueryVisitor, customFetcher: CustomFetch) {
+ super(visitor);
  if (typeof customFetcher === 'string') {
  customFetcher = { func: customFetcher };
  }
  this._mapper = parseMapper(customFetcher.func);
  this._isReactHook = customFetcher.isReactHook;
+ autoBind(this);
  }
 
  private getFetcherFnName(operationResultType: string, operationVariablesTypes: string): string {
@@ -54,13 +52,19 @@ export class CustomMapperFetcher implements FetcherRenderer {
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+ const variables = this.generateInfiniteQueryVariablesSignature(
+ hasRequiredVariables,
+ operationVariablesTypes,
+ );
 
  const hookConfig = this.visitor.queryMethodMap;
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
 
- const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+ const options = this.generateInfiniteQueryOptionsSignature(
+ hookConfig.infiniteQuery.options,
+ operationResultType,
+ );
 
  const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
  const implHookOuter = this._isReactHook
@@ -79,9 +83,10 @@ export class CustomMapperFetcher implements FetcherRenderer {
  ) =>{
  ${implHookOuter}
  return ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
- ${generateInfiniteQueryKey(node, hasRequiredVariables)},
- ${impl},
- options
+ ${this.generateInfiniteQueryFormattedParameters(
+ this.generateInfiniteQueryKey(node, hasRequiredVariables),
+ impl,
+ )}
  )};`;
  }
 
@@ -114,9 +119,10 @@ export class CustomMapperFetcher implements FetcherRenderer {
  ${options}
  ) =>
  ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
- ${generateQueryKey(node, hasRequiredVariables)},
- ${impl},
- options
+ ${this.generateQueryFormattedParameters(
+ this.generateQueryKey(node, hasRequiredVariables),
+ impl,
+ )}
  );`;
  }
 
@@ -146,9 +152,7 @@ export class CustomMapperFetcher implements FetcherRenderer {
  ${
  hookConfig.mutation.hook
  }<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
- ${generateMutationKey(node)},
- ${impl},
- options
+ ${this.generateMutationFormattedParameters(this.generateMutationKey(node), impl)}
  );`;
  }
 

packages/plugins/typescript/react-query/src/fetcher-fetch-hardcoded.ts

@@ -1,16 +1,14 @@
+import autoBind from 'auto-bind';
 import { OperationDefinitionNode } from 'graphql';
 import { HardcodedFetch } from './config.js';
 import { FetcherRenderer } from './fetcher.js';
-import {
- generateInfiniteQueryKey,
- generateMutationKey,
- generateQueryKey,
- generateQueryVariablesSignature,
-} from './variables-generator.js';
 import { ReactQueryVisitor } from './visitor.js';
 
-export class HardcodedFetchFetcher implements FetcherRenderer {
- constructor(private visitor: ReactQueryVisitor, private config: HardcodedFetch) {}
+export class HardcodedFetchFetcher extends FetcherRenderer {
+ constructor(protected visitor: ReactQueryVisitor, private config: HardcodedFetch) {
+ super(visitor);
+ autoBind(this);
+ }
 
  private getEndpoint(): string {
  try {
@@ -67,15 +65,18 @@ ${this.getFetchParams()}
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = generateQueryVariablesSignature(
+ const variables = this.generateInfiniteQueryVariablesSignature(
  hasRequiredVariables,
  operationVariablesTypes,
  );
  const hookConfig = this.visitor.queryMethodMap;
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
 
- const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+ const options = this.generateInfiniteQueryOptionsSignature(
+ hookConfig.infiniteQuery.options,
+ operationResultType,
+ );
 
  return `export const useInfinite${operationName} = <
  TData = ${operationResultType},
@@ -85,9 +86,10 @@ ${this.getFetchParams()}
  ${options}
  ) =>
  ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
- ${generateInfiniteQueryKey(node, hasRequiredVariables)},
- (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
- options
+ ${this.generateInfiniteQueryFormattedParameters(
+ this.generateInfiniteQueryKey(node, hasRequiredVariables),
+ `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+ )}
  );`;
  }
 
@@ -99,7 +101,7 @@ ${this.getFetchParams()}
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = generateQueryVariablesSignature(
+ const variables = this.generateQueryVariablesSignature(
  hasRequiredVariables,
  operationVariablesTypes,
  );
@@ -117,9 +119,10 @@ ${this.getFetchParams()}
  ${options}
  ) =>
  ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
- ${generateQueryKey(node, hasRequiredVariables)},
- fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
- options
+ ${this.generateQueryFormattedParameters(
+ this.generateQueryKey(node, hasRequiredVariables),
+ `fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)`,
+ )}
  );`;
  }
 
@@ -145,9 +148,10 @@ ${this.getFetchParams()}
  ${
  hookConfig.mutation.hook
  }<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
- ${generateMutationKey(node)},
- (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
- options
+ ${this.generateMutationFormattedParameters(
+ this.generateMutationKey(node),
+ `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)()`,
+ )}
  );`;
  }
 
@@ -159,7 +163,7 @@ ${this.getFetchParams()}
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = generateQueryVariablesSignature(
+ const variables = this.generateQueryVariablesSignature(
  hasRequiredVariables,
  operationVariablesTypes,
  );

packages/plugins/typescript/react-query/src/fetcher-fetch.ts

@@ -1,15 +1,13 @@
+import autoBind from 'auto-bind';
 import { OperationDefinitionNode } from 'graphql';
 import { FetcherRenderer } from './fetcher.js';
-import {
- generateInfiniteQueryKey,
- generateMutationKey,
- generateQueryKey,
- generateQueryVariablesSignature,
-} from './variables-generator.js';
 import { ReactQueryVisitor } from './visitor.js';
 
-export class FetchFetcher implements FetcherRenderer {
- constructor(private visitor: ReactQueryVisitor) {}
+export class FetchFetcher extends FetcherRenderer {
+ constructor(protected visitor: ReactQueryVisitor) {
+ super(visitor);
+ autoBind(this);
+ }
 
  generateFetcherImplementaion(): string {
  return `
@@ -42,15 +40,18 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = generateQueryVariablesSignature(
+ const variables = this.generateInfiniteQueryVariablesSignature(
  hasRequiredVariables,
  operationVariablesTypes,
  );
  const hookConfig = this.visitor.queryMethodMap;
  this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.infiniteQuery.hook);
  this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.infiniteQuery.options);
 
- const options = `options?: ${hookConfig.infiniteQuery.options}<${operationResultType}, TError, TData>`;
+ const options = this.generateInfiniteQueryOptionsSignature(
+ hookConfig.infiniteQuery.options,
+ operationResultType,
+ );
 
  return `export const useInfinite${operationName} = <
  TData = ${operationResultType},
@@ -61,9 +62,10 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
  ${options}
  ) =>
  ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
- ${generateInfiniteQueryKey(node, hasRequiredVariables)},
- (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
- options
+ ${this.generateInfiniteQueryFormattedParameters(
+ this.generateInfiniteQueryKey(node, hasRequiredVariables),
+ `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+ )}
  );`;
  }
 
@@ -75,7 +77,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = generateQueryVariablesSignature(
+ const variables = this.generateQueryVariablesSignature(
  hasRequiredVariables,
  operationVariablesTypes,
  );
@@ -94,9 +96,10 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
  ${options}
  ) =>
  ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
- ${generateQueryKey(node, hasRequiredVariables)},
- fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
- options
+ ${this.generateQueryFormattedParameters(
+ this.generateQueryKey(node, hasRequiredVariables),
+ `fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)`,
+ )}
  );`;
  }
 
@@ -125,9 +128,10 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
  ${
  hookConfig.mutation.hook
  }<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
- ${generateMutationKey(node)},
- (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
- options
+ ${this.generateMutationFormattedParameters(
+ this.generateMutationKey(node),
+ `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)()`,
+ )}
  );`;
  }
 
@@ -139,7 +143,7 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
  operationVariablesTypes: string,
  hasRequiredVariables: boolean,
  ): string {
- const variables = generateQueryVariablesSignature(
+ const variables = this.generateQueryVariablesSignature(
  hasRequiredVariables,
  operationVariablesTypes,
  );