@graphql-codegen/typescript-vue-urql/esm/visitor.js

GraphQL Code Generator plugin for generating ready-to-use Vue-Urql composition functions based on GraphQL operations

import autoBind from 'auto-bind';
import { pascalCase } from 'change-case-all';
import { ClientSideBaseVisitor, DocumentMode, getConfigValue, OMIT_TYPE, } from '@graphql-codegen/visitor-plugin-common';
export class UrqlVisitor extends ClientSideBaseVisitor {
    constructor(schema, fragments, rawConfig) {
        super(schema, fragments, rawConfig, {
            withComposition: getConfigValue(rawConfig.withComposition, true),
            urqlImportFrom: getConfigValue(rawConfig.urqlImportFrom, '@urql/vue'),
        });
        this._externalImportPrefix = '';
        if (this.config.importOperationTypesFrom) {
            this._externalImportPrefix = `${this.config.importOperationTypesFrom}.`;
            if (this.config.documentMode !== DocumentMode.external ||
                !this.config.importDocumentNodeExternallyFrom) {
                // eslint-disable-next-line no-console
                console.warn('"importOperationTypesFrom" should be used with "documentMode=external" and "importDocumentNodeExternallyFrom"');
            }
            if (this.config.importOperationTypesFrom !== 'Operations') {
                // eslint-disable-next-line no-console
                console.warn('importOperationTypesFrom only works correctly when left empty or set to "Operations"');
            }
        }
        autoBind(this);
    }
    getImports() {
        const baseImports = super.getImports();
        const imports = [];
        const hasOperations = this._collectedOperations.length > 0;
        if (!hasOperations) {
            return baseImports;
        }
        if (this.config.withComposition) {
            imports.push(`import * as Urql from '${this.config.urqlImportFrom}';`);
        }
        imports.push(OMIT_TYPE);
        return [...baseImports, ...imports];
    }
    _buildCompositionFn(node, operationType, documentVariableName, operationResultType, operationVariablesTypes) {
        var _a, _b;
        const operationName = this.convertName((_b = (_a = node.name) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '', {
            suffix: this.config.omitOperationSuffix ? '' : pascalCase(operationType),
            useTypesPrefix: false,
        });
        if (operationType === 'Mutation') {
            return `
export function use${operationName}() {
  return Urql.use${operationType}<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName});
};`;
        }
        if (operationType === 'Subscription') {
            return `
export function use${operationName}<R = ${operationResultType}>(options?: Omit<Urql.Use${operationType}Args<never, ${operationVariablesTypes} | undefined>, 'query'>, handler?: Urql.SubscriptionHandlerArg<${operationResultType}, R>) {
  return Urql.use${operationType}<${operationResultType}, R, ${operationVariablesTypes} | undefined>({ query: ${documentVariableName}, variables: undefined, ...options }, handler);
};`;
        }
        return `
export function use${operationName}(options?: Omit<Urql.Use${operationType}Args<never, ${operationVariablesTypes} | undefined>, 'query'>) {
  return Urql.use${operationType}<${operationResultType}, ${operationVariablesTypes} | undefined>({ query: ${documentVariableName}, variables: undefined, ...options });
};`;
    }
    buildOperation(node, documentVariableName, operationType, operationResultType, operationVariablesTypes) {
        const documentVariablePrefixed = this._externalImportPrefix + documentVariableName;
        const operationResultTypePrefixed = this._externalImportPrefix + operationResultType;
        const operationVariablesTypesPrefixed = this._externalImportPrefix + operationVariablesTypes;
        const composition = this.config.withComposition
            ? this._buildCompositionFn(node, operationType, documentVariablePrefixed, operationResultTypePrefixed, operationVariablesTypesPrefixed)
            : null;
        return [composition].filter(a => a).join('\n');
    }
}