react-query-lightbase-codegen 1.0.2 → 1.0.5

package/src/generateHooks.ts

@@ -0,0 +1,489 @@
+import lodash from 'lodash';
+const { get, groupBy } = lodash;
+import {
+  ComponentsObject,
+  OperationObject,
+  ParameterObject,
+  ReferenceObject,
+  ResponseObject,
+  SchemaObject,
+} from 'openapi3-ts';
+import { formatDescription, getResReqTypes, isReference, resolveValue } from './utils.js';
+import pasCase from 'case';
+import chalk from 'chalk';
+
+const { pascal, camel } = pasCase;
+
+const IdentifierRegexp = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+
+/**
+ * Return every params in a path
+ */
+const getParamsInPath = (path: string) => {
+  let n;
+  const output = [];
+  const templatePathRegex = /\{(\w+)}/g;
+  while ((n = templatePathRegex.exec(path)) !== null) {
+    output.push(n[1]);
+  }
+
+  return output;
+};
+
+/**
+ * Generate a react-query component from openapi operation specs
+ */
+export const createHook = ({
+  operation,
+  verb,
+  route,
+  operationIds,
+  parameters,
+  schemasComponents,
+  headerFilters,
+  overrides,
+}: {
+  operation: OperationObject;
+  verb: string;
+  route: string;
+  operationIds: string[];
+  parameters: (ReferenceObject | ParameterObject)[] | undefined;
+  schemasComponents?: ComponentsObject;
+  headerFilters?: string[];
+  overrides?: Record<
+    string,
+    { type: 'query' } | { type: 'mutation' } | { type: 'infiniteQuery'; infiniteQueryParm: string }
+  >;
+}) => {
+  const { operationId = route.replace('/', '') } = operation;
+  if (operationId === '*') {
+    throw new Error(`Invalid operationId/Route set for ${verb} ${route}`);
+  }
+  if (operationIds.includes(operationId)) {
+    return { implementation: '', imports: [], queryImports: [] };
+  }
+  operationIds.push(operationId);
+
+  route = route.replace(/\{/g, '${').replace('//', '/'); // `/pet/{id}` => `/pet/${id}`
+
+  // Remove the last param of the route if we are in the DELETE case
+  let lastParamInTheRoute: string | null = null;
+
+  const componentName = pascal(operationId!);
+
+  const isOk = ([statusCode]: [string, ResponseObject | ReferenceObject]) =>
+    statusCode.toString().startsWith('2');
+
+  const responseTypes = getResReqTypes(Object.entries(operation.responses).filter(isOk)) || 'void';
+  const requestBodyTypes = getResReqTypes([['body', operation.requestBody!]]);
+
+  let imports = [responseTypes];
+  let queryImports = [] as Array<'mutation' | 'query' | 'infiniteQuery'>;
+
+  const paramsInPath = getParamsInPath(route).filter(
+    (param) => !(verb === 'delete' && param === lastParamInTheRoute)
+  );
+
+  const {
+    query: queryParams = [],
+    path: pathParams = [],
+    header = [],
+  } = groupBy(
+    [...(parameters || []), ...(operation.parameters || [])].map<ParameterObject>((p) => {
+      if (isReference(p)) {
+        return get(schemasComponents, p.$ref.replace('#/components/', '').replace('/', '.'));
+      } else {
+        return p;
+      }
+    }),
+    'in'
+  );
+
+  const headerParams = header.filter((p) => !headerFilters?.includes(p.name));
+
+  let enabled = [] as any;
+
+  // TODO: extract all requestBody or remove useQuery variants
+  let enabledParam = '!!params';
+  [...queryParams, ...pathParams, ...headerParams].forEach((item) => {
+    if (item.required) {
+      enabled.push(`["${item.name}"]`);
+      if (enabledParam && enabledParam !== '!!params') {
+        enabledParam += `&& params['${item.name}'] != null`;
+      } else {
+        enabledParam = `params['${item.name}'] != null`;
+      }
+    }
+  });
+
+  // `!props${enabled.join('== null && !props')}`;
+
+  const paramsTypes = paramsInPath
+    .map((p) => {
+      try {
+        const { name, required, schema } = pathParams.find((i) => i.name === p)!;
+        return `${name}${required ? '' : '?'}: ${resolveValue(schema!)}`;
+      } catch (err) {
+        throw new Error(`The path params ${p} can't be found in parameters (${operationId})`);
+      }
+    })
+    .join('; ');
+
+  const queryParamsType = queryParams
+    .map((p) => {
+      const processedName = IdentifierRegexp.test(p.name) ? p.name : `"${p.name}"`;
+      return `${formatDescription(p.description)}
+      ${processedName}${p.required ? '' : '?'}: ${resolveValue(p.schema!)}`;
+    })
+    .join(';\n  ');
+
+  const headerType = headerParams
+    .map((p) => {
+      try {
+        const { name, required, schema } = headerParams.find((i) => i.name === p.name)!;
+        return `"${name}"${required ? '' : '?'}: ${resolveValue(schema!)}`;
+      } catch (err) {
+        throw new Error(`The path params ${p} can't be found in parameters (${operationId})`);
+      }
+    })
+    .join('; ');
+
+  // Retrieve the type of the param for delete verb
+  const lastParamInTheRouteDefinition =
+    operation.parameters && lastParamInTheRoute
+      ? (operation.parameters.find((p) => {
+          if (isReference(p)) {
+            return false;
+          }
+          return p.name === lastParamInTheRoute;
+        }) as ParameterObject | undefined) // Reference is not possible
+      : { schema: { type: 'string' } };
+
+  if (!lastParamInTheRouteDefinition) {
+    throw new Error(`The path params ${lastParamInTheRoute} can't be found in parameters (${operationId})`);
+  }
+
+  const defaultDescription = `type: ${verb}\noperationId: ${operationId}\nurl: ${route}`;
+
+  const description = formatDescription(
+    operation.summary && operation.description
+      ? `${defaultDescription}\n\n${operation.summary}\n\n${operation.description}`
+      : `${defaultDescription}`
+  );
+
+  let output = `\n\n${description}`;
+
+  const headerParam = headerType && headerType !== 'void' ? `${headerType};` : '';
+  const queryParam = queryParamsType && queryParamsType !== 'void' ? `${queryParamsType}` : '';
+  const requestBodyComponent = requestBodyTypes && requestBodyTypes !== 'void' ? `${requestBodyTypes}` : '';
+
+  if (requestBodyComponent) {
+    imports.push(requestBodyComponent);
+  }
+
+  const isUpdateRequest = ['post', 'patch', 'put'].includes(verb);
+
+  const fetchName = camel(componentName);
+
+  const createQueryHooks = (emptyParams?: boolean) => {
+    const params = emptyParams ? '' : `params: ${componentName}Params,`;
+    const key = emptyParams ? '' : `params`;
+    const mutationParams = emptyParams ? 'void' : `${componentName}Params`;
+    const queryParamType = emptyParams ? '' : `${componentName}Params &`;
+    const filterParams = emptyParams
+      ? '{ filters }: { filters?: QueryFilters }'
+      : `{ params, filters }: { params: ${componentName}Params, filters?: QueryFilters }`;
+    const cacheParams = emptyParams
+      ? `{updater, options}: {updater: Updater<${responseTypes} | undefined, ${responseTypes} | undefined>, options?: SetDataOptions | undefined}`
+      : `{params, updater, options}: {params: ${componentName}Params, updater: Updater<${responseTypes} | undefined, ${responseTypes} | undefined>, options?: SetDataOptions | undefined}`;
+    const queryKey = emptyParams
+      ? `use${componentName}Query.baseKey()`
+      : `[...use${componentName}Query.baseKey(), params]`;
+
+    const createQuery = () => `
+    type ${componentName}QueryProps<T = ${responseTypes}> = ${queryParamType} {
+      options?: UseQueryOptions<${responseTypes}, AxiosError, T, any> 
+    }
+    export function use${componentName}Query<T = ${responseTypes}>({ options = {}, ...params }: ${componentName}QueryProps<T>) { 
+      return useQuery(use${componentName}Query.queryKey(${key}), async () => ${fetchName}(${key}), { enabled: ${enabledParam}, ...options });
+    }
+
+    use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
+  
+    use${componentName}Query.queryKey = (${params}): QueryKey => ${queryKey};
+  
+    use${componentName}Query.updateCache = (${cacheParams}) => queryClient.setQueryData<${responseTypes}>(use${componentName}Query.queryKey(${key}), updater, options);
+    
+    use${componentName}Query.getQueryState = (${filterParams})=> queryClient.getQueryState<${responseTypes}>(use${componentName}Query.queryKey(${key}), filters);
+    
+    use${componentName}Query.getQueryData = (${filterParams})=> queryClient.getQueryData<${responseTypes}>(use${componentName}Query.queryKey(${key}), filters);
+    
+    use${componentName}Query.prefetch = (${params}) => queryClient.prefetchQuery<${responseTypes}>(use${componentName}Query.queryKey(${key}), ()=> ${fetchName}(${key}));
+  
+    use${componentName}Query.cancelQueries = (${params}) => queryClient.cancelQueries(use${componentName}Query.queryKey(${key}))
+  
+    use${componentName}Query.invalidate = (${params}) => queryClient.invalidateQueries<${responseTypes}>(use${componentName}Query.queryKey(${key}));
+  
+    use${componentName}Query.refetchStale = (${params}) => queryClient.refetchQueries<${responseTypes}>(use${componentName}Query.queryKey(${key}), { stale: true });
+  `;
+
+    const getInfiniteQuery = ({ pageParam }: { pageParam: string }) => `
+    type ${componentName}QueryProps<T = ${responseTypes}> = ${queryParamType} {
+      options: UseInfiniteQueryOptions<${responseTypes}, AxiosError, T, any> 
+    }
+    export function use${componentName}Query<T = ${responseTypes}>({ options = {}, ...params }: ${componentName}QueryProps<T>) { 
+      return useInfiniteQuery(use${componentName}Query.queryKey(${key}), async ({ pageParam = 0 }) => ${fetchName}({${pageParam}: pageParam, ...params}), { enabled: ${enabledParam}, ...options });
+    }
+
+    use${componentName}Query.baseKey = (): QueryKey => ["${componentName.toLowerCase()}"];
+  
+    use${componentName}Query.queryKey = (${params}): QueryKey => ${queryKey};
+  
+  `;
+
+    const createMutation = () => `
+    type ${componentName}MutationProps<T> = {
+      options?: UseMutationOptions<${responseTypes}, AxiosError, ${mutationParams}, T> 
+    }
+    export function use${componentName}Mutation<T = ${responseTypes}>(props?: ${componentName}MutationProps<T>) { 
+      return useMutation(async (${key}) => ${fetchName}(${key}), props?.options)
+    };
+    `;
+
+    const override = overrides?.[operationId];
+    if (override?.type === 'query') {
+      console.log(chalk.blue(`⚙️  [${operationId}] has been changed to a useQuery hook`));
+      queryImports.push('query');
+      return createQuery();
+    }
+
+    if (override?.type === 'mutation') {
+      queryImports.push('mutation');
+      console.log(chalk.blue(`⚙️  [${operationId}] has been changed to a useMutation hook`));
+      return createMutation();
+    }
+
+    if (override?.type === 'infiniteQuery') {
+      console.log(chalk.blue(`⚙️  [${operationId}] has been changed to a useInfiniteQuery hook`));
+      queryImports.push('infiniteQuery');
+      return getInfiniteQuery({ pageParam: override.infiniteQueryParm });
+    }
+
+    if (verb === 'get') {
+      queryImports.push('query');
+      return createQuery();
+    }
+
+    queryImports.push('mutation');
+    return createMutation();
+  };
+
+  output += createQueryHooks(!requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam);
+
+  const hasRequestBodyArrray = requestBodyComponent && requestBodyComponent.includes('[]');
+  const body = hasRequestBodyArrray ? `{body: ${requestBodyComponent}}` : `${requestBodyComponent}`;
+  const bodyProps = hasRequestBodyArrray ? `{body, ...props}` : '{props}';
+
+  const generateProps = (props: ParameterObject[]) => {
+    return props.map((item) => `["${item.name}"]: props["${item.name}"]`).join(',');
+  };
+
+  const generateBodyProps = () => {
+    const definitionKey = Object.keys(schemasComponents?.schemas || {}).find(
+      (key) => pascal(key) === requestBodyComponent
+    );
+    if (definitionKey && !hasRequestBodyArrray) {
+      const scheme = schemasComponents?.schemas?.[definitionKey] as SchemaObject;
+      const generatedBodyProps = Object.keys(scheme.properties as SchemaObject)
+        .map((item: string) => `["${item}"]: props["${item}"]`)
+        .join(',');
+      return `const body = {${generatedBodyProps}}`;
+    }
+    return '';
+  };
+
+  if (!requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam) {
+    output += `
+    const ${fetchName} = async () => {
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`);
+      return result.data;
+    }
+    `;
+  }
+
+  if (!requestBodyComponent && paramsInPath.length && queryParam && !headerParam) {
+    const config = isUpdateRequest ? 'body,{params}' : '{params}';
+    output += `
+    type ${componentName}Params = {
+      ${paramsTypes}
+      ${queryParamsType}; 
+    }
+
+     const ${fetchName} = async (props:${componentName}Params) => {
+      const {${paramsInPath.join(', ')}, ...params} = props
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`, ${config})
+      return result.data;
+    }`;
+  }
+
+  if (!requestBodyComponent && paramsInPath.length && !queryParam && !headerParam) {
+    output += `
+    type ${componentName}Params = {
+      ${paramsTypes}
+    }
+
+    const ${fetchName} = async (props: ${componentName}Params ) => {
+      const result = await api.${verb}<${responseTypes}>(\`${route.replace(/\{/g, '{props.')}\`);
+      return result.data;
+    }
+    `;
+  }
+
+  if (!requestBodyComponent && !paramsInPath.length && queryParam && !headerParam) {
+    const config = isUpdateRequest ? 'null,{params}' : '{params}';
+    output += `
+    type ${componentName}Params = { 
+      ${queryParamsType} 
+    }
+
+    const ${fetchName} = async (params: ${componentName}Params) => {
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`, ${config})
+      return result.data;
+    }
+    `;
+  }
+  if (!requestBodyComponent && !paramsInPath.length && queryParam && headerParam) {
+    const config = isUpdateRequest ? 'null,{headers, params: queryParams}' : '{headers, params: queryParams}';
+    output += `
+      type ${componentName}Params = {
+        ${headerParam}
+        ${queryParamsType}
+      }
+      const ${fetchName} = async (props: ${componentName}Params) => {
+        const headers = {${generateProps(header)}}
+        const queryParams = {${generateProps(queryParams)}}
+        const result = await api.${verb}<${responseTypes}>(\`${route}\`, ${config})
+        return result.data
+      }`;
+  }
+  if (!requestBodyComponent && !paramsInPath.length && !queryParam && headerParam) {
+    const config = isUpdateRequest ? 'null,{headers}' : '{headers}';
+    output += `
+      type ${componentName}Params = {
+        ${headerParam}
+      };
+  
+      const ${fetchName} = async (headers: ${componentName}Params) => {
+        const result = await api.${verb}<${responseTypes}>(\`${route}\`, ${config});
+        return result.data;
+      }
+      `;
+  }
+
+  if (requestBodyComponent && !paramsInPath.length && !queryParam && !headerParam) {
+    output += `
+    type ${componentName}Params = ${requestBodyComponent}
+
+    const ${fetchName} = async (body: ${componentName}Params) => {
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`, body)
+      return result.data
+    } 
+      `;
+  }
+
+  if (requestBodyComponent && !paramsInPath.length && queryParam && !headerParam) {
+    output += `
+      type ${componentName}Params =  ${body} & {
+        ${queryParamsType}
+      }
+
+     const ${fetchName} = async (${bodyProps}: ${componentName}Params) => {   
+      ${generateBodyProps()}
+      const params =  {${generateProps(queryParams)}}
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`, body, {params})
+      return result.data
+    }
+    `;
+  }
+
+  if (requestBodyComponent && !paramsInPath.length && !queryParam && headerParam) {
+    output += `
+    type ${componentName}Params =  ${body} & {
+      ${headerParam}
+    };
+
+    const ${fetchName} = async (${bodyProps}: ${componentName}Params) => {
+      ${generateBodyProps()}
+      const headers = {${generateProps(header)}}
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`, body, {headers})
+      return result.data
+    }
+    `;
+  }
+
+  if (requestBodyComponent && !paramsInPath.length && queryParam && headerParam) {
+    output += `
+    type ${componentName}Params = ${body} & {
+      ${headerParam}
+      ${paramsTypes}
+    };
+
+    const ${fetchName} = async (${bodyProps}: ${componentName}Params) => {
+      ${generateBodyProps()}
+      const headers = {${generateProps(header)}}
+      const params =  {${generateProps(queryParams)}}
+      const result = await api.${verb}<${responseTypes}>(\`${route}\`, body, {headers, params})
+      return result.data
+    }
+    `;
+  }
+
+  if (requestBodyComponent && paramsInPath.length && !queryParam && !headerParam) {
+    output += `
+    type ${componentName}Params = ${body} & {
+      ${headerParam}
+      ${paramsTypes}
+    };
+
+    const ${fetchName} = async (${bodyProps}: ${componentName}Params) => {
+      ${generateBodyProps()}
+      const result = await api.${verb}<${responseTypes}>(\`${route.replace(/\{/g, '{props.')}\`, body)
+      return result.data
+    }
+    `;
+  }
+
+  if (requestBodyComponent && paramsInPath.length && queryParam && !headerParam) {
+    output += `// TODO: NOT SUPPORTED requestBodyComponent && paramsInPath && queryParam)`;
+  }
+
+  if (requestBodyComponent && paramsInPath.length && queryParam && headerParam) {
+    output += `// TODO: NOT SUPPORTED requestBodyComponent && paramsInPath && queryParam && headerParam)`;
+  }
+
+  if (!requestBodyComponent && paramsInPath.length && !queryParam && headerParam) {
+    const config = isUpdateRequest ? 'null,{headers}' : '{headers}';
+    output += `
+    type ${componentName}Params = {
+      ${headerParam}
+      ${paramsTypes}
+    };
+
+    const ${fetchName} = async (props: ${componentName}Params) => {
+      const headers = {${generateProps(header)}}
+      const result = await api.${verb}<${responseTypes}>(\`${route.replace(/\{/g, '{props.')}\`, ${config})
+      return result.data
+    }
+    `;
+  }
+
+  if (!requestBodyComponent && paramsInPath.length && queryParam && headerParam) {
+    output += `// TODO: NOT SUPPORTED (paramsInPath && queryParam && headerParam)`;
+  }
+
+  if (requestBodyComponent && paramsInPath.length && !queryParam && headerParam) {
+    output += `// TODO: NOT SUPPORTED (requestBodyComponent && paramsInPath && headerParam)`;
+  }
+
+  return { implementation: output, imports, queryImports };
+};

package/src/generateImports.ts

@@ -0,0 +1,41 @@
+export const generateImports = ({
+  schemaName,
+  apiDirectory,
+  queryClientDir,
+  schemaImports,
+  queryImports,
+}: {
+  apiDirectory: string;
+  queryClientDir: string;
+  schemaName: string;
+  schemaImports: string[];
+  queryImports: ('query' | 'mutation' | 'infiniteQuery')[];
+}) => {
+  const importTypes = schemaImports.join(',');
+  let imports = [] as string[];
+  if (queryImports.includes('query')) {
+    imports = [...imports, 'useQuery', 'UseQueryOptions', 'QueryKey', 'SetDataOptions', 'QueryFilters'];
+  }
+  if (queryImports.includes('infiniteQuery')) {
+    imports = [...imports, 'useInfiniteQuery', 'UseInfiniteQueryOptions', 'QueryKey'];
+  }
+  if (queryImports.includes('mutation')) {
+    imports = [...imports, 'UseMutationOptions', 'useMutation'];
+  }
+
+  const importString = [...new Set(imports)].join(',');
+
+  return `
+  import {
+    ${importString}
+  } from '@tanstack/react-query';
+  
+  import { AxiosError } from 'axios';
+  import { api } from '${apiDirectory}';
+  import { queryClient } from '${queryClientDir}';
+
+  import {${importTypes}} from './${schemaName}'
+
+  type Updater<TInput, TOutput> = TOutput | ((input: TInput) => TOutput);  
+  `;
+};

package/src/generateSchemas.ts

@@ -0,0 +1,114 @@
+import pasCase from 'case';
+import lodash from 'lodash';
+const { isEmpty } = lodash;
+const { pascal } = pasCase;
+import { ComponentsObject, OpenAPIObject, SchemaObject } from 'openapi3-ts';
+import { formatDescription, getScalar, isReference, resolveValue } from './utils.js';
+
+import { getDocs, getResReqTypes } from './utils.js';
+
+/**
+ * Generate the interface string
+ */
+const generateInterface = (name: string, schema: SchemaObject) => {
+  const scalar = getScalar(schema);
+  return `${formatDescription(schema.description)}
+       export type ${pascal(name)} = ${scalar}
+     `;
+};
+
+/**
+ * Extract all types from #/components/schemas
+ */
+const generateSchemasDefinition = (schemas: ComponentsObject['schemas'] = {}) => {
+  if (isEmpty(schemas)) {
+    return '';
+  }
+
+  return (
+    '\n // SCEHMAS \n' +
+    Object.entries(schemas)
+      .map(([name, schema]) =>
+        !isReference(schema) &&
+        (!schema.type || schema.type === 'object') &&
+        !schema.allOf &&
+        !schema.oneOf &&
+        !isReference(schema) &&
+        !schema.nullable
+          ? generateInterface(name, schema)
+          : `${formatDescription(isReference(schema) ? undefined : schema.description)} export type ${pascal(
+              name
+            )} = ${resolveValue(schema)};`
+      )
+      .join('\n\n') +
+    '\n'
+  );
+};
+
+/**
+ * Extract all types from #/components/requestBodies
+ */
+const generateRequestBodiesDefinition = (requestBodies: ComponentsObject['requestBodies'] = {}) => {
+  if (isEmpty(requestBodies)) {
+    return '';
+  }
+
+  return (
+    '\n // REQUEST BODIES \n' +
+    Object.entries(requestBodies)
+      .map(([name, requestBody]) => {
+        const doc = getDocs(requestBody);
+        const type = getResReqTypes([['', requestBody]]);
+        const isEmptyInterface = type === '{}';
+        if (isEmptyInterface) {
+          return `${doc}\nexport type ${pascal(name)}RequestBody = ${type}`;
+        } else if (type.includes('{') && !type.includes('|') && !type.includes('&')) {
+          return `${doc}\nexport type ${pascal(name)}RequestBody = ${type}`;
+        } else {
+          return `${doc}\nexport type ${pascal(name)}RequestBody = ${type};`;
+        }
+      })
+      .join('\n\n') +
+    '\n'
+  );
+};
+
+/**
+ * Extract all types from #/components/responses
+ */
+const generateResponsesDefinition = (responses: ComponentsObject['responses'] = {}) => {
+  if (isEmpty(responses)) {
+    return '';
+  }
+
+  return (
+    '\n // RESPONSES \n' +
+    Object.entries(responses)
+      .map(([name, response]) => {
+        const doc = getDocs(response);
+        const type = getResReqTypes([['', response]]);
+        const isEmptyInterface = type === '{}';
+        if (isEmptyInterface) {
+          return `export type RQ${pascal(name)}Response = ${type}`;
+        } else if (type.includes('{') && !type.includes('|') && !type.includes('&')) {
+          return `${doc}export type RQ${pascal(name)}Response = ${type}`;
+        } else {
+          return `${doc}export type RQ${pascal(name)}Response = ${type};`;
+        }
+      })
+      .join('\n\n') +
+    '\n'
+  );
+};
+
+/**
+ * Extract all types from #/components/schemas
+ */
+export const generateSchemas = ({ spec }: { spec: OpenAPIObject }) => {
+  const schemaOutput =
+    generateRequestBodiesDefinition(spec.components?.requestBodies) +
+    generateResponsesDefinition(spec.components?.responses) +
+    generateSchemasDefinition(spec.components?.schemas);
+
+  return schemaOutput;
+};