@graphql-codegen/typescript-solid-query 1.0.0-alpha-20240201110240-bdef5b40fe364d6a5b0276786062c582bd60d3cc

package/cjs/visitor.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SolidQueryVisitor = 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");
+const fetcher_custom_mapper_js_1 = require("./fetcher-custom-mapper.js");
+const fetcher_fetch_hardcoded_js_1 = require("./fetcher-fetch-hardcoded.js");
+const fetcher_fetch_js_1 = require("./fetcher-fetch.js");
+const fetcher_graphql_request_js_1 = require("./fetcher-graphql-request.js");
+class SolidQueryVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
+    constructor(schema, fragments, rawConfig, documents) {
+        super(schema, fragments, rawConfig, {
+            documentMode: visitor_plugin_common_1.DocumentMode.string,
+            errorType: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.errorType, 'unknown'),
+            exposeDocument: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeDocument, false),
+            exposeQueryKeys: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeQueryKeys, false),
+            exposeQueryRootKeys: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeQueryRootKeys, false),
+            exposeMutationKeys: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeMutationKeys, false),
+            exposeFetcher: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.exposeFetcher, false),
+            addInfiniteQuery: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.addInfiniteQuery, false),
+            addSuspenseQuery: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.addSuspenseQuery, false),
+            solidQueryImportFrom: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.solidQueryImportFrom, ''),
+        });
+        this.rawConfig = rawConfig;
+        this.solidQueryHookIdentifiersInUse = new Set();
+        this.solidQueryOptionsIdentifiersInUse = new Set();
+        this._externalImportPrefix = this.config.importOperationTypesFrom
+            ? `${this.config.importOperationTypesFrom}.`
+            : '';
+        this._documents = documents;
+        this.fetcher = this.createFetcher(rawConfig.fetcher || 'fetch');
+        (0, auto_bind_1.default)(this);
+    }
+    get imports() {
+        return this._imports;
+    }
+    createFetcher(raw) {
+        if (raw === 'fetch') {
+            return new fetcher_fetch_js_1.FetchFetcher(this);
+        }
+        if (typeof raw === 'object' && 'endpoint' in raw) {
+            return new fetcher_fetch_hardcoded_js_1.HardcodedFetchFetcher(this, raw);
+        }
+        if (raw === 'graphql-request' || (typeof raw === 'object' && 'clientImportPath' in raw)) {
+            return new fetcher_graphql_request_js_1.GraphQLRequestClientFetcher(this, raw);
+        }
+        return new fetcher_custom_mapper_js_1.CustomMapperFetcher(this, raw);
+    }
+    get hasOperations() {
+        return this._collectedOperations.length > 0;
+    }
+    getImports() {
+        const baseImports = super.getImports();
+        if (!this.hasOperations) {
+            return baseImports;
+        }
+        const hookAndTypeImports = [
+            ...Array.from(this.solidQueryHookIdentifiersInUse),
+            ...Array.from(this.solidQueryOptionsIdentifiersInUse).map(identifier => `${this.config.useTypeImports ? 'type ' : ''}${identifier}`),
+        ];
+        const moduleName = this.config.solidQueryImportFrom
+            ? this.config.solidQueryImportFrom
+            : '@tanstack/solid-query';
+        return [...baseImports, `import { ${hookAndTypeImports.join(', ')} } from '${moduleName}';`];
+    }
+    getFetcherImplementation() {
+        return this.fetcher.generateFetcherImplementation();
+    }
+    _getHookSuffix(name, operationType) {
+        if (this.config.omitOperationSuffix) {
+            return '';
+        }
+        if (!this.config.dedupeOperationSuffix) {
+            return (0, change_case_all_1.pascalCase)(operationType);
+        }
+        if (name.includes('Query') || name.includes('Mutation') || name.includes('Subscription')) {
+            return '';
+        }
+        return (0, change_case_all_1.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,
+        });
+        const generateConfig = {
+            node,
+            documentVariableName,
+            operationResultType,
+            operationVariablesTypes,
+            hasRequiredVariables,
+            operationName,
+        };
+        operationResultType = this._externalImportPrefix + operationResultType;
+        operationVariablesTypes = this._externalImportPrefix + operationVariablesTypes;
+        const queries = [];
+        const getOutputFromQueries = () => `\n${queries.join('\n\n')}\n`;
+        if (operationType === 'Query') {
+            const addQuery = (generateConfig, isSuspense = false) => {
+                const { hook, getKey, rootKey, document } = this.fetcher.generateQueryOutput(generateConfig, isSuspense);
+                queries.push(hook);
+                if (this.config.exposeDocument)
+                    queries.push(document);
+                if (this.config.exposeQueryKeys)
+                    queries.push(getKey);
+                if (this.config.exposeQueryRootKeys)
+                    queries.push(rootKey);
+            };
+            addQuery(generateConfig);
+            if (this.config.addSuspenseQuery)
+                addQuery(generateConfig, true);
+            if (this.config.addInfiniteQuery) {
+                const addInfiniteQuery = (generateConfig, isSuspense = false) => {
+                    const { hook, getKey, rootKey } = this.fetcher.generateInfiniteQueryOutput(generateConfig, isSuspense);
+                    queries.push(hook);
+                    if (this.config.exposeQueryKeys)
+                        queries.push(getKey);
+                    if (this.config.exposeQueryRootKeys)
+                        queries.push(rootKey);
+                };
+                addInfiniteQuery(generateConfig);
+                if (this.config.addSuspenseQuery) {
+                    addInfiniteQuery(generateConfig, true);
+                }
+            }
+            // The reason we're looking at the private field of the CustomMapperFetcher to see if it's a solid 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._isSolidHook) {
+                queries.push(this.fetcher.generateFetcherFetch(generateConfig));
+            }
+            return getOutputFromQueries();
+        }
+        if (operationType === 'Mutation') {
+            const { hook, getKey } = this.fetcher.generateMutationOutput(generateConfig);
+            queries.push(hook);
+            if (this.config.exposeMutationKeys)
+                queries.push(getKey);
+            if (this.config.exposeFetcher && !this.fetcher._isSolidHook) {
+                queries.push(this.fetcher.generateFetcherFetch(generateConfig));
+            }
+            return getOutputFromQueries();
+        }
+        if (operationType === 'Subscription') {
+            // eslint-disable-next-line no-console
+            console.warn(`Plugin "typescript-solid-query" does not support GraphQL Subscriptions at the moment! Ignoring "${node.name.value}"...`);
+        }
+        return null;
+    }
+}
+exports.SolidQueryVisitor = SolidQueryVisitor;

package/esm/fetcher-custom-mapper.js

@@ -0,0 +1,77 @@
+import autoBind from 'auto-bind';
+import { buildMapperImport, parseMapper, } from '@graphql-codegen/visitor-plugin-common';
+import { FetcherRenderer } from './fetcher.js';
+export class CustomMapperFetcher extends FetcherRenderer {
+    constructor(visitor, customFetcher) {
+        super(visitor);
+        this.visitor = visitor;
+        if (typeof customFetcher === 'string') {
+            customFetcher = { func: customFetcher };
+        }
+        this._mapper = parseMapper(customFetcher.func);
+        this._isSolidHook = customFetcher.isSolidHook;
+        autoBind(this);
+    }
+    getFetcherFnName(operationResultType, operationVariablesTypes) {
+        return `${this._mapper.type}<${operationResultType}, ${operationVariablesTypes}>`;
+    }
+    generateFetcherImplementation() {
+        if (this._mapper.isExternal) {
+            return buildMapperImport(this._mapper.source, [
+                {
+                    identifier: this._mapper.type,
+                    asDefault: this._mapper.default,
+                },
+            ], this.visitor.config.useTypeImports);
+        }
+        return null;
+    }
+    generateInfiniteQueryHook(config, isSuspense = false) {
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const implHookOuter = this._isSolidHook
+            ? `const query = ${typedFetcher}(${documentVariableName})`
+            : '';
+        const implFetcher = this._isSolidHook
+            ? `(metaData) => query({...variables, ...(metaData.pageParam ?? {})})`
+            : `(metaData) => ${typedFetcher}(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`;
+        const { generateBaseInfiniteQueryHook } = this.generateInfiniteQueryHelper(config, isSuspense);
+        return generateBaseInfiniteQueryHook({
+            implHookOuter,
+            implFetcher,
+        });
+    }
+    generateQueryHook(config, isSuspense = false) {
+        const { generateBaseQueryHook } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const implFetcher = this._isSolidHook
+            ? `${typedFetcher}(${documentVariableName}).bind(null, variables)`
+            : `${typedFetcher}(${documentVariableName}, variables)`;
+        return generateBaseQueryHook({
+            implFetcher,
+        });
+    }
+    generateMutationHook(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        const { generateBaseMutationHook, variables } = this.generateMutationHelper(config);
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const implFetcher = this._isSolidHook
+            ? `${typedFetcher}(${documentVariableName})`
+            : `(${variables}) => ${typedFetcher}(${documentVariableName}, variables)()`;
+        return generateBaseMutationHook({
+            implFetcher,
+        });
+    }
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, hasRequiredVariables, operationName, } = config;
+        // We can't generate a fetcher field since we can't call solid hooks outside of a Solid Fucntion Component
+        // Related: https://solidjs.org/docs/hooks-rules.html
+        if (this._isSolidHook)
+            return '';
+        const variables = `variables${hasRequiredVariables ? '' : '?'}: ${operationVariablesTypes}`;
+        const typedFetcher = this.getFetcherFnName(operationResultType, operationVariablesTypes);
+        const impl = `${typedFetcher}(${documentVariableName}, variables, options)`;
+        return `\ncreate${operationName}.fetcher = (${variables}, options?: RequestInit['headers']) => ${impl};`;
+    }
+}

package/esm/fetcher-fetch-hardcoded.js

@@ -0,0 +1,76 @@
+import autoBind from 'auto-bind';
+import { FetcherRenderer } from './fetcher.js';
+export class HardcodedFetchFetcher extends FetcherRenderer {
+    constructor(visitor, config) {
+        super(visitor);
+        this.visitor = visitor;
+        this.config = config;
+        autoBind(this);
+    }
+    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}`;
+    }
+    generateFetcherImplementation() {
+        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(config, isSuspense = false) {
+        const { generateBaseInfiniteQueryHook } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseInfiniteQueryHook({
+            implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+        });
+    }
+    generateQueryHook(config, isSuspense = false) {
+        const { generateBaseQueryHook } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseQueryHook({
+            implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)`,
+        });
+    }
+    generateMutationHook(config) {
+        const { generateBaseMutationHook, variables } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseMutationHook({
+            implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables)()`,
+        });
+    }
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
+        return `\ncreate${operationName}.fetcher = (${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables);`;
+    }
+}

package/esm/fetcher-fetch.js

@@ -0,0 +1,71 @@
+import autoBind from 'auto-bind';
+import { FetcherRenderer } from './fetcher.js';
+export class FetchFetcher extends FetcherRenderer {
+    constructor(visitor) {
+        super(visitor);
+        this.visitor = visitor;
+        autoBind(this);
+    }
+    generateFetcherImplementation() {
+        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(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}
+    `,
+            implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})})()`,
+        });
+    }
+    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}
+    `,
+            implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)`,
+        });
+    }
+    generateMutationHook(config) {
+        const { generateBaseMutationHook, variables, options } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return generateBaseMutationHook({
+            implArguments: `
+      dataSource: { endpoint: string, fetchParams?: RequestInit },
+      ${options}
+    `,
+            implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(dataSource.endpoint, dataSource.fetchParams || {}, ${documentVariableName}, variables)()`,
+        });
+    }
+    generateFetcherFetch(config) {
+        const { documentVariableName, operationResultType, operationVariablesTypes, operationName } = config;
+        const variables = this.generateQueryVariablesSignature(config);
+        return `\ncreate${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,118 @@
+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);
+    }
+    generateFetcherImplementation() {
+        return this.clientPath
+            ? `
+function fetcher<TData, TVariables extends { [key: string]: any }>(query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
+  return async (): Promise<TData> => graphqlClient.request({
+    document: query,
+    variables,
+    requestHeaders
+  });
+}`
+            : `
+function fetcher<TData, TVariables extends { [key: string]: any }>(client: GraphQLClient, query: string, variables?: TVariables, requestHeaders?: RequestInit['headers']) {
+  return async (): Promise<TData> => client.request({
+    document: query,
+    variables,
+    requestHeaders
+  });
+}`;
+    }
+    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 { generateBaseInfiniteQueryHook, variables, options } = this.generateInfiniteQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return this.clientPath
+            ? generateBaseInfiniteQueryHook({
+                implArguments: `
+      pageParamKey: keyof ${operationVariablesTypes},
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    `,
+                implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, {...variables, [pageParamKey]: metaData.pageParam}, headers)()`,
+            })
+            : generateBaseInfiniteQueryHook({
+                implArguments: `
+      client: GraphQLClient,
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    `,
+                implFetcher: `(metaData) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, {...variables, ...(metaData.pageParam ?? {})}, headers)()`,
+            });
+    }
+    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 { generateBaseQueryHook, variables, options } = this.generateQueryHelper(config, isSuspense);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return this.clientPath
+            ? generateBaseQueryHook({
+                implArguments: `
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    `,
+                implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)`,
+            })
+            : generateBaseQueryHook({
+                implArguments: `
+      client: GraphQLClient,
+      ${variables},
+      ${options},
+      headers?: RequestInit['headers']
+    `,
+                implFetcher: `fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)`,
+            });
+    }
+    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 { generateBaseMutationHook, variables, options } = this.generateMutationHelper(config);
+        const { documentVariableName, operationResultType, operationVariablesTypes } = config;
+        return this.clientPath
+            ? generateBaseMutationHook({
+                implArguments: `
+      ${options},
+      headers?: RequestInit['headers']
+    `,
+                implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers)()`,
+            })
+            : generateBaseMutationHook({
+                implArguments: `
+      client: GraphQLClient,
+      ${options},
+      headers?: RequestInit['headers']
+    `,
+                implFetcher: `(${variables}) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers)()`,
+            });
+    }
+    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);
+        this.visitor.imports.add(`${typeImport} { RequestInit } from 'graphql-request/dist/types.dom';`);
+        return this.clientPath
+            ? `\ncreate${operationName}.fetcher = (${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(${documentVariableName}, variables, headers);`
+            : `\ncreate${operationName}.fetcher = (client: GraphQLClient, ${variables}, headers?: RequestInit['headers']) => fetcher<${operationResultType}, ${operationVariablesTypes}>(client, ${documentVariableName}, variables, headers);`;
+    }
+}