@graphql-codegen/typescript-vue-urql
Version:
GraphQL Code Generator plugin for generating ready-to-use Vue-Urql composition functions based on GraphQL operations
76 lines (75 loc) • 4.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UrqlVisitor = void 0;
const tslib_1 = require("tslib");
const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
const change_case_all_1 = require("change-case-all");
const visitor_plugin_common_1 = require("@graphql-codegen/visitor-plugin-common");
class UrqlVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
constructor(schema, fragments, rawConfig) {
super(schema, fragments, rawConfig, {
withComposition: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.withComposition, true),
urqlImportFrom: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.urqlImportFrom, '@urql/vue'),
});
this._externalImportPrefix = '';
if (this.config.importOperationTypesFrom) {
this._externalImportPrefix = `${this.config.importOperationTypesFrom}.`;
if (this.config.documentMode !== visitor_plugin_common_1.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"');
}
}
(0, auto_bind_1.default)(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(visitor_plugin_common_1.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 ? '' : (0, change_case_all_1.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');
}
}
exports.UrqlVisitor = UrqlVisitor;