@graphql-codegen/typescript-react-query 5.1.0-alpha-20231024141714-d4d2e5e06 → 6.0.0

package/esm/fetcher-fetch.js

@@ -1,9 +1,12 @@
-import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
-export class FetchFetcher {
+import autoBind from 'auto-bind';
+import { FetcherRenderer } from './fetcher.js';
+export class FetchFetcher extends FetcherRenderer {
     constructor(visitor) {
+        super(visitor);
         this.visitor = visitor;
+        autoBind(this);
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         return `
 function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
   return async (): Promise<TData> => {
@@ -25,67 +28,44 @@ function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit,
   }
 }`;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(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>`;
-        return `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    generateInfiniteQueryHook(config, isSuspense = false) {
+        const { generateBaseInfiniteQueryHook, variables, options } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseInfiniteQueryHook({
+            implArguments: `
       dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
-      options
-    );`;
+    `,
+            implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+        });
     }
-    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
-        return `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    generateQueryHook(config, isSuspense = false) {
+        const { generateBaseQueryHook, variables, options } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseQueryHook({
+            implArguments: `
       dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${variables},
       ${options}
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables),
-      options
-    );`;
+    `,
+            implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)`,
+        });
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables?: ${operationVariablesTypes}`;
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
-        const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
-        return `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(
+    generateMutationHook(config) {
+        const { generateBaseMutationHook, variables, options } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseMutationHook({
+            implArguments: `
       dataSource: { endpoint: string, fetchParams?: RequestInit },
       ${options}
-    ) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)(),
-      options
-    );`;
+    `,
+            implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)()`,
+        });
     }
-    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
         return `\nuse${operationName}.fetcher = (dataSource: { endpoint: string, fetchParams?: RequestInit }, ${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables);`;
     }
 }

package/esm/fetcher-graphql-request.js

@@ -1,10 +1,13 @@
-import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
-export class GraphQLRequestClientFetcher {
+import autoBind from 'auto-bind';
+import { FetcherRenderer } from './fetcher.js';
+export class GraphQLRequestClientFetcher extends FetcherRenderer {
     constructor(visitor, config) {
+        super(visitor);
         this.visitor = visitor;
         this.clientPath = typeof config === 'object' ? config.clientImportPath : null;
+        autoBind(this);
     }
-    generateFetcherImplementaion() {
+    generateFetcherImplementation() {
         return this.clientPath
             ? `
 function fetcher<TData, TVariables extends { [key: string]: any }>(query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
@@ -23,125 +26,87 @@ function fetcher<TData, TVariables extends { [key: string]: any }>(client: Graph
   });
 }`;
     }
-    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    generateInfiniteQueryHook(config, isSuspense = false) {
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
-        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 { generateBaseInfiniteQueryHook, variables, options } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
-            ? `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+            ? generateBaseInfiniteQueryHook({
+                implArguments: `
       pageParamKey: keyof ${operationVariablesTypes},
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
-      options
-    );`
-            : `export const useInfinite${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    `,
+                implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam}, headers)()`,
+            })
+            : generateBaseInfiniteQueryHook({
+                implArguments: `
       client: GraphQLClient,
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
-      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
-      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)(),
-      options
-    );`;
+    `,
+                implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)()`,
+            });
     }
-    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    generateQueryHook(config, isSuspense = false) {
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
         this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.query.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.query.options);
-        const options = `options?: ${hookConfig.query.options}<${operationResultType}, TError, TData>`;
+        const { generateBaseQueryHook, variables, options } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
-            ? `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+            ? generateBaseQueryHook({
+                implArguments: `
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers),
-      options
-    );`
-            : `export const use${operationName} = <
-      TData = ${operationResultType},
-      TError = ${this.visitor.config.errorType}
-    >(
+    `,
+                implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)`,
+            })
+            : generateBaseQueryHook({
+                implArguments: `
       client: GraphQLClient,
       ${variables},
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
-      ${generateQueryKey(node, hasRequiredVariables)},
-      fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers),
-      options
-    );`;
+    `,
+                implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)`,
+            });
     }
-    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = `variables?: ${operationVariablesTypes}`;
+    generateMutationHook(config) {
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);
         this.visitor.imports.add(`${typeImport} { GraphQLClient } from 'graphql-request';`);
-        const hookConfig = this.visitor.queryMethodMap;
-        this.visitor.reactQueryHookIdentifiersInUse.add(hookConfig.mutation.hook);
-        this.visitor.reactQueryOptionsIdentifiersInUse.add(hookConfig.mutation.options);
-        const options = `options?: ${hookConfig.mutation.options}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+        const { generateBaseMutationHook, variables, options } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
         return this.clientPath
-            ? `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(
+            ? generateBaseMutationHook({
+                implArguments: `
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)(),
-      options
-    );`
-            : `export const use${operationName} = <
-      TError = ${this.visitor.config.errorType},
-      TContext = unknown
-    >(
+    `,
+                implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)()`,
+            })
+            : generateBaseMutationHook({
+                implArguments: `
       client: GraphQLClient,
       ${options},
       headers?: RequestInit['headers']
-    ) =>
-    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
-      ${generateMutationKey(node)},
-      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)(),
-      options
-    );`;
+    `,
+                implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)()`,
+            });
     }
-    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
-        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
         const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
         if (this.clientPath)
             this.visitor.imports.add(this.clientPath);

package/esm/fetcher.js

@@ -0,0 +1,215 @@
+import autoBind from 'auto-bind';
+export class FetcherRenderer {
+    constructor(visitor) {
+        this.visitor = visitor;
+        autoBind(this);
+    }
+    createQueryMethodMap(isSuspense = false) {
+        const suspenseText = isSuspense ? 'Suspense' : '';
+        const queryMethodMap = {
+            infiniteQuery: {
+                getHook: (operationName = 'Query') => `use${suspenseText}Infinite${operationName}`,
+                getOptions: () => `Use${suspenseText}InfiniteQueryOptions`,
+                getOtherTypes: () => ({ infiniteData: 'InfiniteData' }),
+            },
+            query: {
+                getHook: (operationName = 'Query') => `use${suspenseText}${operationName}`,
+                getOptions: () => `Use${suspenseText}QueryOptions`,
+            },
+            mutation: {
+                getHook: (operationName = 'Mutation') => `use${operationName}`,
+                getOptions: () => `UseMutationOptions`,
+            },
+        };
+        return queryMethodMap;
+    }
+    generateInfiniteQueryHelper(config, isSuspense) {
+        const { operationResultType, operationName } = config;
+        const { infiniteQuery } = this.createQueryMethodMap(isSuspense);
+        const isNextVersion = this.visitor.config.reactQueryVersion >= 5;
+        this.visitor.reactQueryHookIdentifiersInUse.add(infiniteQuery.getHook());
+        this.visitor.reactQueryOptionsIdentifiersInUse.add(infiniteQuery.getOptions());
+        if (isNextVersion) {
+            this.visitor.reactQueryOptionsIdentifiersInUse.add(infiniteQuery.getOtherTypes().infiniteData);
+        }
+        const variables = this.generateInfiniteQueryVariablesSignature(config);
+        const options = this.generateInfiniteQueryOptionsSignature(config, isSuspense);
+        const generateBaseInfiniteQueryHook = (hookConfig) => {
+            const { implArguments, implHookOuter = '', implFetcher } = hookConfig;
+            const argumentsResult = implArguments !== null && implArguments !== void 0 ? implArguments : `
+      ${variables},
+      ${options}
+    `;
+            return `export const ${infiniteQuery.getHook(operationName)} = <
+      TData = ${isNextVersion
+                ? `${infiniteQuery.getOtherTypes().infiniteData}<${operationResultType}>`
+                : operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(${argumentsResult}) => {
+    ${implHookOuter}
+    return ${infiniteQuery.getHook()}<${operationResultType}, TError, TData>(
+      ${this.generateInfiniteQueryFormattedParameters(this.generateInfiniteQueryKey(config, isSuspense), implFetcher)}
+    )};`;
+        };
+        return { generateBaseInfiniteQueryHook, variables, options };
+    }
+    generateQueryHelper(config, isSuspense) {
+        const { operationName, operationResultType } = config;
+        const { query } = this.createQueryMethodMap(isSuspense);
+        this.visitor.reactQueryHookIdentifiersInUse.add(query.getHook());
+        this.visitor.reactQueryOptionsIdentifiersInUse.add(query.getOptions());
+        const variables = this.generateQueryVariablesSignature(config);
+        const options = this.generateQueryOptionsSignature(config, isSuspense);
+        const generateBaseQueryHook = (hookConfig) => {
+            const { implArguments, implHookOuter = '', implFetcher } = hookConfig;
+            const argumentsResult = implArguments !== null && implArguments !== void 0 ? implArguments : `
+      ${variables},
+      ${options}
+    `;
+            return `export const ${query.getHook(operationName)} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(${argumentsResult}) => {
+    ${implHookOuter}
+    return ${query.getHook()}<${operationResultType}, TError, TData>(
+      ${this.generateQueryFormattedParameters(this.generateQueryKey(config, isSuspense), implFetcher)}
+    )};`;
+        };
+        return {
+            generateBaseQueryHook,
+            variables,
+            options,
+        };
+    }
+    generateMutationHelper(config) {
+        const { operationResultType, operationVariablesTypes, operationName } = config;
+        const { mutation } = this.createQueryMethodMap();
+        this.visitor.reactQueryHookIdentifiersInUse.add(mutation.getHook());
+        this.visitor.reactQueryOptionsIdentifiersInUse.add(mutation.getOptions());
+        const variables = `variables?: ${operationVariablesTypes}`;
+        const options = `options?: ${mutation.getOptions()}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>`;
+        const generateBaseMutationHook = (hookConfig) => {
+            const { implArguments, implHookOuter = '', implFetcher } = hookConfig;
+            const argumentsResult = implArguments !== null && implArguments !== void 0 ? implArguments : `${options}`;
+            return `export const ${mutation.getHook(operationName)} = <
+      TError = ${this.visitor.config.errorType},
+      TContext = unknown
+    >(${argumentsResult}) => {
+    ${implHookOuter}
+    return ${mutation.getHook()}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${this.generateMutationFormattedParameters(this.generateMutationKey(config), implFetcher)}
+    )};`;
+        };
+        return {
+            generateBaseMutationHook,
+            variables,
+            options,
+        };
+    }
+    generateQueryVariablesSignature({ hasRequiredVariables, operationVariablesTypes, }) {
+        return `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+    }
+    generateQueryOptionsSignature({ operationResultType }, isSuspense) {
+        const { query } = this.createQueryMethodMap(isSuspense);
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `options?: ${query.getOptions()}<${operationResultType}, TError, TData>`;
+        }
+        return `options?: Omit<${query.getOptions()}<${operationResultType}, TError, TData>, 'queryKey'> & { queryKey?: ${query.getOptions()}<${operationResultType}, TError, TData>['queryKey'] }`;
+    }
+    generateInfiniteQueryVariablesSignature(config) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `variables${config.hasRequiredVariables ? '' : '?'}: ${config.operationVariablesTypes}`;
+        }
+        return `variables: ${config.operationVariablesTypes}`;
+    }
+    generateInfiniteQueryOptionsSignature({ operationResultType }, isSuspense) {
+        const { infiniteQuery } = this.createQueryMethodMap(isSuspense);
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `options?: ${infiniteQuery.getOptions()}<${operationResultType}, TError, TData>`;
+        }
+        return `options: Omit<${infiniteQuery.getOptions()}<${operationResultType}, TError, TData>, 'queryKey'> & { queryKey?: ${infiniteQuery.getOptions()}<${operationResultType}, TError, TData>['queryKey'] }`;
+    }
+    generateInfiniteQueryKey(config, isSuspense) {
+        const identifier = isSuspense ? 'infiniteSuspense' : 'infinite';
+        if (config.hasRequiredVariables)
+            return `['${config.node.name.value}.${identifier}', variables]`;
+        return `variables === undefined ? ['${config.node.name.value}.${identifier}'] : ['${config.node.name.value}.${identifier}', variables]`;
+    }
+    generateInfiniteQueryOutput(config, isSuspense = false) {
+        const { infiniteQuery } = this.createQueryMethodMap(isSuspense);
+        const signature = this.generateQueryVariablesSignature(config);
+        const { operationName, node } = config;
+        return {
+            hook: this.generateInfiniteQueryHook(config, isSuspense),
+            getKey: `${infiniteQuery.getHook(operationName)}.getKey = (${signature}) => ${this.generateInfiniteQueryKey(config, isSuspense)};`,
+            rootKey: `${infiniteQuery.getHook(operationName)}.rootKey = '${node.name.value}.infinite';`,
+        };
+    }
+    generateQueryKey(config, isSuspense) {
+        const identifier = isSuspense ? `${config.node.name.value}Suspense` : config.node.name.value;
+        if (config.hasRequiredVariables)
+            return `['${identifier}', variables]`;
+        return `variables === undefined ? ['${identifier}'] : ['${identifier}', variables]`;
+    }
+    generateQueryOutput(config, isSuspense = false) {
+        const { query } = this.createQueryMethodMap(isSuspense);
+        const signature = this.generateQueryVariablesSignature(config);
+        const { operationName, node, documentVariableName } = config;
+        return {
+            hook: this.generateQueryHook(config, isSuspense),
+            document: `${query.getHook(operationName)}.document = ${documentVariableName};`,
+            getKey: `${query.getHook(operationName)}.getKey = (${signature}) => ${this.generateQueryKey(config, isSuspense)};`,
+            rootKey: `${query.getHook(operationName)}.rootKey = '${node.name.value}';`,
+        };
+    }
+    generateMutationKey({ node }) {
+        return `['${node.name.value}']`;
+    }
+    generateMutationOutput(config) {
+        const { mutation } = this.createQueryMethodMap();
+        const { operationName } = config;
+        return {
+            hook: this.generateMutationHook(config),
+            getKey: `${mutation.getHook(operationName)}.getKey = () => ${this.generateMutationKey(config)};`,
+        };
+    }
+    generateInfiniteQueryFormattedParameters(queryKey, queryFn) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `${queryKey},
+      ${queryFn},
+      options`;
+        }
+        return `(() => {
+    const { queryKey: optionsQueryKey, ...restOptions } = options;
+    return {
+      queryKey: optionsQueryKey ?? ${queryKey},
+      queryFn: ${queryFn},
+      ...restOptions
+    }
+  })()`;
+    }
+    generateQueryFormattedParameters(queryKey, queryFn) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `${queryKey},
+      ${queryFn},
+      options`;
+        }
+        return `{
+    queryKey: ${queryKey},
+    queryFn: ${queryFn},
+    ...options
+  }`;
+    }
+    generateMutationFormattedParameters(mutationKey, mutationFn) {
+        if (this.visitor.config.reactQueryVersion <= 4) {
+            return `${mutationKey},
+      ${mutationFn},
+      options`;
+        }
+        return `{
+    mutationKey: ${mutationKey},
+    mutationFn: ${mutationFn},
+    ...options
+  }`;
+    }
+}

package/esm/index.js

@@ -19,6 +19,7 @@ export const plugin = (schema, documents, config) => {
         return {
             prepend: [...visitor.getImports(), visitor.getFetcherImplementation()],
             content: [
+                '',
                 visitor.fragments,
                 ...visitorResult.definitions.filter(t => typeof t === 'string'),
             ].join('\n'),
@@ -27,6 +28,7 @@ export const plugin = (schema, documents, config) => {
     return {
         prepend: [...visitor.getImports()],
         content: [
+            '',
             visitor.fragments,
             ...visitorResult.definitions.filter(t => typeof t === 'string'),
         ].join('\n'),
@@ -36,5 +38,8 @@ export const validate = async (schema, documents, config, outputFile) => {
     if (extname(outputFile) !== '.ts' && extname(outputFile) !== '.tsx') {
         throw new Error(`Plugin "typescript-react-query" requires extension to be ".ts" or ".tsx"!`);
     }
+    if (config.reactQueryVersion !== 5 && config.addSuspenseQuery) {
+        throw new Error(`Suspense queries are only supported in react-query@5. Please upgrade your react-query version.`);
+    }
 };
 export { ReactQueryVisitor };