@graphql-codegen/typescript-react-query 3.5.15 → 3.6.0-alpha-bd464a586.0

package/esm/fetcher-custom-mapper.js

@@ -0,0 +1,104 @@
+import { buildMapperImport, parseMapper } from '@graphql-codegen/visitor-plugin-common';
+import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey } from './variables-generator.js';
+export class CustomMapperFetcher {
+    constructor(visitor, customFetcher) {
+        this.visitor = visitor;
+        if (typeof customFetcher === 'string') {
+            customFetcher = { func: customFetcher };
+        }
+        this._mapper = parseMapper(customFetcher.func);
+        this._isReactHook = customFetcher.isReactHook;
+    }
+    getFetcherFnName(operationResultType, operationVariablesTypes) {
+        return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
+    }
+    generateFetcherImplementaion() {
+        if (this._mapper.isExternal) {
+            return buildMapperImport(this._mapper.source, [
+                {
+                    identifier: this._mapper.type,
+                    asDefault: this._mapper.default,
+                },
+            ], this.visitor.config.useTypeImports);
+        }
+        return null;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = `variables${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 typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const implHookOuter = this._isReactHook ? `const query = ${typedFetcher}(${documentVariableName})` : '';
+        const impl = this._isReactHook
+            ? `(metaData) => query({...variables, ...(metaData.pageParam ?? {})})`
+            : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      ${variables},
+      ${options}
+    ) =>{
+    ${implHookOuter}
+    return ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      ${impl},
+      options
+    )};`;
+    }
+    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = `variables${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>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
+            : `${typedFetcher}(${documentVariableName}, variables)`;
+        return `export const use${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
+      ${generateQueryKey(node, hasRequiredVariables)},
+      ${impl},
+      options
+    );`;
+    }
+    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>`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = this._isReactHook
+            ? `${typedFetcher}(${documentVariableName})`
+            : `(${variables}) => ${typedFetcher}(${documentVariableName}, variables)()`;
+        return `export const use${operationName} = <
+      TError = ${this.visitor.config.errorType},
+      TContext = unknown
+    >(${options}) =>
+    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
+      ${impl},
+      options
+    );`;
+    }
+    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        // We can't generate a fetcher field since we can't call react hooks outside of a React Fucntion Component
+        // Related: https://reactjs.org/docs/hooks-rules.html
+        if (this._isReactHook)
+            return '';
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = `${typedFetcher}(${documentVariableName}, variables, options)`;
+        return `\nuse${operationName}.fetcher = (${variables}, options?: RequestInit['headers']) => ${impl};`;
+    }
+}

package/esm/fetcher-fetch-hardcoded.js

@@ -0,0 +1,104 @@
+import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
+export class HardcodedFetchFetcher {
+    constructor(visitor, config) {
+        this.visitor = visitor;
+        this.config = config;
+    }
+    getEndpoint() {
+        try {
+            new URL(this.config.endpoint);
+            return JSON.stringify(this.config.endpoint);
+        }
+        catch (e) {
+            return `${this.config.endpoint} as string`;
+        }
+    }
+    getFetchParams() {
+        let fetchParamsPartial = '';
+        if (this.config.fetchParams) {
+            const fetchParamsString = typeof this.config.fetchParams === 'string' ? this.config.fetchParams : JSON.stringify(this.config.fetchParams);
+            fetchParamsPartial = `\n    ...(${fetchParamsString}),`;
+        }
+        return `    method: "POST",${fetchParamsPartial}`;
+    }
+    generateFetcherImplementaion() {
+        return `
+function fetcher<TData, TVariables>(query: string, variables?: TVariables) {
+  return async (): Promise<TData> => {
+    const res = await fetch(${this.getEndpoint()}, {
+${this.getFetchParams()}
+      body: JSON.stringify({ query, variables }),
+    });
+
+    const json = await res.json();
+
+    if (json.errors) {
+      const { message } = json.errors[0];
+
+      throw new Error(message);
+    }
+
+    return json.data;
+  }
+}`;
+    }
+    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}
+    >(
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      options
+    );`;
+    }
+    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}
+    >(
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
+      ${generateQueryKey(node, hasRequiredVariables)},
+      fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables),
+      options
+    );`;
+    }
+    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
+    >(${options}) =>
+    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
+      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)(),
+      options
+    );`;
+    }
+    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        return `\nuse${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
+    }
+}

package/esm/fetcher-fetch.js

@@ -0,0 +1,92 @@
+import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
+export class FetchFetcher {
+    constructor(visitor) {
+        this.visitor = visitor;
+    }
+    generateFetcherImplementaion() {
+        return `
+function fetcher<TData, TVariables>(endpoint: string, requestInit: RequestInit, query: string, variables?: TVariables) {
+  return async (): Promise<TData> => {
+    const res = await fetch(endpoint, {
+      method: 'POST',
+      ...requestInit,
+      body: JSON.stringify({ query, variables }),
+    });
+
+    const json = await res.json();
+
+    if (json.errors) {
+      const { message } = json.errors[0];
+
+      throw new Error(message);
+    }
+
+    return json.data;
+  }
+}`;
+    }
+    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.query.options}<${operationResultType}, TError, TData>`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options}
+    ) =>
+    ${hookConfig.infiniteQuery.hook}<${operationResultType}, TError, TData>(
+      ${generateInfiniteQueryKey(node, hasRequiredVariables)},
+      (metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})(),
+      options
+    );`;
+    }
+    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}
+    >(
+      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
+    );`;
+    }
+    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
+    >(
+      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
+    );`;
+    }
+    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        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

@@ -0,0 +1,88 @@
+import { generateInfiniteQueryKey, generateMutationKey, generateQueryKey, generateQueryVariablesSignature, } from './variables-generator.js';
+export class GraphQLRequestClientFetcher {
+    constructor(visitor) {
+        this.visitor = visitor;
+    }
+    generateFetcherImplementaion() {
+        return `
+function fetcher<TData, TVariables>(client: GraphQLClient, query: string, variables?: TVariables, headers?: RequestInit['headers']) {
+  return async (): Promise<TData> => client.request<TData, TVariables>(query, variables, headers);
+}`;
+    }
+    generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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>`;
+        return `export const useInfinite${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      pageParamKey: keyof ${operationVariablesTypes},
+      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
+    );`;
+    }
+    generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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>`;
+        return `export const use${operationName} = <
+      TData = ${operationResultType},
+      TError = ${this.visitor.config.errorType}
+    >(
+      client: GraphQLClient,
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    ) =>
+    ${hookConfig.query.hook}<${operationResultType}, TError, TData>(
+      ${generateQueryKey(node, hasRequiredVariables)},
+      fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers),
+      options
+    );`;
+    }
+    generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = `variables?: ${operationVariablesTypes}`;
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        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>`;
+        return `export const use${operationName} = <
+      TError = ${this.visitor.config.errorType},
+      TContext = unknown
+    >(
+      client: GraphQLClient,
+      ${options},
+      headers?: RequestInit['headers']
+    ) =>
+    ${hookConfig.mutation.hook}<${operationResultType}, TError, ${operationVariablesTypes}, TContext>(
+      ${generateMutationKey(node)},
+      (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)(),
+      options
+    );`;
+    }
+    generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        const variables = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+        const typeImport = this.visitor.config.useTypeImports ? 'import type' : 'import';
+        this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
+        return `\nuse${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;
+    }
+}

package/esm/fetcher.js

@@ -0,0 +1 @@
+export {};

package/esm/index.js

@@ -0,0 +1,34 @@
+import { Kind, concatAST } from 'graphql';
+import { oldVisit } from '@graphql-codegen/plugin-helpers';
+import { ReactQueryVisitor } from './visitor.js';
+import { extname } from 'path';
+export const plugin = (schema, documents, config) => {
+    const allAst = concatAST(documents.map(v => v.document));
+    const allFragments = [
+        ...allAst.definitions.filter(d => d.kind === Kind.FRAGMENT_DEFINITION).map(fragmentDef => ({
+            node: fragmentDef,
+            name: fragmentDef.name.value,
+            onType: fragmentDef.typeCondition.name.value,
+            isExternal: false,
+        })),
+        ...(config.externalFragments || []),
+    ];
+    const visitor = new ReactQueryVisitor(schema, allFragments, config, documents);
+    const visitorResult = oldVisit(allAst, { leave: visitor });
+    if (visitor.hasOperations) {
+        return {
+            prepend: [...visitor.getImports(), visitor.getFetcherImplementation()],
+            content: [visitor.fragments, ...visitorResult.definitions.filter(t => typeof t === 'string')].join('\n'),
+        };
+    }
+    return {
+        prepend: [...visitor.getImports()],
+        content: [visitor.fragments, ...visitorResult.definitions.filter(t => typeof t === 'string')].join('\n'),
+    };
+};
+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"!`);
+    }
+};
+export { ReactQueryVisitor };

package/esm/variables-generator.js

@@ -0,0 +1,27 @@
+export function generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes) {
+    return `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+}
+export function generateInfiniteQueryKey(node, hasRequiredVariables) {
+    if (hasRequiredVariables)
+        return `['${node.name.value}.infinite', variables]`;
+    return `variables === undefined ? ['${node.name.value}.infinite'] : ['${node.name.value}.infinite', variables]`;
+}
+export function generateInfiniteQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables) {
+    const signature = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    return `\nuseInfinite${operationName}.getKey = (${signature}) => ${generateInfiniteQueryKey(node, hasRequiredVariables)};\n`;
+}
+export function generateQueryKey(node, hasRequiredVariables) {
+    if (hasRequiredVariables)
+        return `['${node.name.value}', variables]`;
+    return `variables === undefined ? ['${node.name.value}'] : ['${node.name.value}', variables]`;
+}
+export function generateQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables) {
+    const signature = generateQueryVariablesSignature(hasRequiredVariables, operationVariablesTypes);
+    return `\nuse${operationName}.getKey = (${signature}) => ${generateQueryKey(node, hasRequiredVariables)};\n`;
+}
+export function generateMutationKey(node) {
+    return `['${node.name.value}']`;
+}
+export function generateMutationKeyMaker(node, operationName) {
+    return `\nuse${operationName}.getKey = () => ${generateMutationKey(node)};\n`;
+}

package/esm/visitor.js

@@ -0,0 +1,138 @@
+import { ClientSideBaseVisitor, DocumentMode, getConfigValue, } from '@graphql-codegen/visitor-plugin-common';
+import { generateMutationKeyMaker, generateQueryKeyMaker, generateInfiniteQueryKeyMaker, } from './variables-generator.js';
+import { CustomMapperFetcher } from './fetcher-custom-mapper.js';
+import { FetchFetcher } from './fetcher-fetch.js';
+import { GraphQLRequestClientFetcher } from './fetcher-graphql-request.js';
+import { HardcodedFetchFetcher } from './fetcher-fetch-hardcoded.js';
+import autoBind from 'auto-bind';
+import { pascalCase } from 'change-case-all';
+export class ReactQueryVisitor extends ClientSideBaseVisitor {
+    constructor(schema, fragments, rawConfig, documents) {
+        super(schema, fragments, rawConfig, {
+            documentMode: DocumentMode.string,
+            errorType: getConfigValue(rawConfig.errorType, 'unknown'),
+            exposeDocument: getConfigValue(rawConfig.exposeDocument, false),
+            exposeQueryKeys: getConfigValue(rawConfig.exposeQueryKeys, false),
+            exposeMutationKeys: getConfigValue(rawConfig.exposeMutationKeys, false),
+            exposeFetcher: getConfigValue(rawConfig.exposeFetcher, false),
+            addInfiniteQuery: getConfigValue(rawConfig.addInfiniteQuery, false),
+        });
+        this.rawConfig = rawConfig;
+        this.reactQueryHookIdentifiersInUse = new Set();
+        this.reactQueryOptionsIdentifiersInUse = new Set();
+        this.queryMethodMap = {
+            infiniteQuery: {
+                hook: 'useInfiniteQuery',
+                options: 'UseInfiniteQueryOptions',
+            },
+            query: {
+                hook: 'useQuery',
+                options: 'UseQueryOptions',
+            },
+            mutation: {
+                hook: 'useMutation',
+                options: 'UseMutationOptions',
+            },
+        };
+        this._externalImportPrefix = this.config.importOperationTypesFrom ? `${this.config.importOperationTypesFrom}.` : '';
+        this._documents = documents;
+        this.fetcher = this.createFetcher(rawConfig.fetcher || 'fetch');
+        autoBind(this);
+    }
+    get imports() {
+        return this._imports;
+    }
+    createFetcher(raw) {
+        if (raw === 'fetch') {
+            return new FetchFetcher(this);
+        }
+        if (typeof raw === 'object' && 'endpoint' in raw) {
+            return new HardcodedFetchFetcher(this, raw);
+        }
+        if (raw === 'graphql-request') {
+            return new GraphQLRequestClientFetcher(this);
+        }
+        return new CustomMapperFetcher(this, raw);
+    }
+    get hasOperations() {
+        return this._collectedOperations.length > 0;
+    }
+    getImports() {
+        const baseImports = super.getImports();
+        if (!this.hasOperations) {
+            return baseImports;
+        }
+        if (this.config.addInfiniteQuery) {
+            this.reactQueryOptionsIdentifiersInUse.add('QueryFunctionContext');
+        }
+        const hookAndTypeImports = [
+            ...Array.from(this.reactQueryHookIdentifiersInUse),
+            ...Array.from(this.reactQueryOptionsIdentifiersInUse).map(identifier => `${this.config.useTypeImports ? 'type ' : ''}${identifier}`),
+        ];
+        return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from 'react-query';`];
+    }
+    getFetcherImplementation() {
+        return this.fetcher.generateFetcherImplementaion();
+    }
+    _getHookSuffix(name, operationType) {
+        if (this.config.omitOperationSuffix) {
+            return '';
+        }
+        if (!this.config.dedupeOperationSuffix) {
+            return pascalCase(operationType);
+        }
+        if (name.includes('Query') || name.includes('Mutation') || name.includes('Subscription')) {
+            return '';
+        }
+        return pascalCase(operationType);
+    }
+    buildOperation(node, documentVariableName, operationType, operationResultType, operationVariablesTypes, hasRequiredVariables) {
+        var _a, _b;
+        const nodeName = (_b = (_a = node.name) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+        const suffix = this._getHookSuffix(nodeName, operationType);
+        const operationName = this.convertName(nodeName, {
+            suffix,
+            useTypesPrefix: false,
+            useTypesSuffix: false,
+        });
+        operationResultType = this._externalImportPrefix + operationResultType;
+        operationVariablesTypes = this._externalImportPrefix + operationVariablesTypes;
+        if (operationType === 'Query') {
+            let query = this.fetcher.generateQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            if (this.config.exposeDocument) {
+                query += `\nuse${operationName}.document = ${documentVariableName};\n`;
+            }
+            if (this.config.exposeQueryKeys) {
+                query += `\n${generateQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables)};\n`;
+            }
+            if (this.config.addInfiniteQuery) {
+                query += `\n${this.fetcher.generateInfiniteQueryHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables)}\n`;
+                if (this.config.exposeQueryKeys) {
+                    query += `\n${generateInfiniteQueryKeyMaker(node, operationName, operationVariablesTypes, hasRequiredVariables)};\n`;
+                }
+            }
+            // The reason we're looking at the private field of the CustomMapperFetcher to see if it's a react hook
+            // is to prevent calling generateFetcherFetch for each query since all the queries won't be able to generate
+            // a fetcher field anyways.
+            if (this.config.exposeFetcher && !this.fetcher._isReactHook) {
+                query += this.fetcher.generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            }
+            return query;
+        }
+        if (operationType === 'Mutation') {
+            let query = this.fetcher.generateMutationHook(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            if (this.config.exposeMutationKeys) {
+                query += generateMutationKeyMaker(node, operationName);
+            }
+            if (this.config.exposeFetcher && !this.fetcher._isReactHook) {
+                query += this.fetcher.generateFetcherFetch(node, documentVariableName, operationName, operationResultType, operationVariablesTypes, hasRequiredVariables);
+            }
+            return query;
+        }
+        if (operationType === 'Subscription') {
+            // eslint-disable-next-line no-console
+            console.warn(`Plugin "typescript-react-query" does not support GraphQL Subscriptions at the moment! Ignoring "${node.name.value}"...`);
+        }
+        return null;
+    }
+}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@graphql-codegen/typescript-react-query",
-  "version": "3.5.15",
+  "version": "3.6.0-alpha-bd464a586.0",
   "description": "GraphQL Code Generator plugin for generating a ready-to-use React-Query Hooks based on GraphQL operations",
   "peerDependencies": {
     "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
-    "@graphql-codegen/plugin-helpers": "^2.4.0",
-    "@graphql-codegen/visitor-plugin-common": "2.10.0",
+    "@graphql-codegen/plugin-helpers": "^2.5.0-alpha-bd464a586.0",
+    "@graphql-codegen/visitor-plugin-common": "2.11.0-alpha-bd464a586.0",
     "auto-bind": "~4.0.0",
     "change-case-all": "1.0.14",
     "tslib": "~2.4.0"
@@ -18,21 +18,28 @@
     "directory": "packages/plugins/typescript/react-query"
   },
   "license": "MIT",
-  "main": "index.js",
-  "module": "index.mjs",
-  "typings": "index.d.ts",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
+  "typings": "typings/index.d.ts",
   "typescript": {
-    "definition": "index.d.ts"
+    "definition": "typings/index.d.ts"
   },
+  "type": "module",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
-      "require": "./index.js",
-      "import": "./index.mjs"
+      "require": {
+        "types": "./typings/index.d.ts",
+        "default": "./cjs/index.js"
+      },
+      "import": {
+        "types": "./typings/index.d.ts",
+        "default": "./esm/index.js"
+      },
+      "default": {
+        "types": "./typings/index.d.ts",
+        "default": "./esm/index.js"
+      }
     },
-    "./*": {
-      "require": "./*.js",
-      "import": "./*.mjs"
-    }
+    "./package.json": "./package.json"
   }
-}
+}