Merge pull request #2380 from reduxjs/prepare-codegen-1.1

Codegen v1.1 integration

Author: msutkowski

docs/rtk-query/usage/code-generation.mdx

@@ -62,6 +62,15 @@ and then call the code generator:
 npx @rtk-query/codegen-openapi openapi-config.ts
 ```
 
+#### Generating tags
+
+If your OpenAPI specification uses [tags](https://swagger.io/docs/specification/grouping-operations-with-tags/), you can specify the `tag` option to the codegen.  
+That will result in all generated endpoints having `providesTags`/`invalidatesTags` declarations for the `tags` of their respective operation definition.
+
+Note that this will only result in string tags with no ids, so it might lead to scenarios where too much is invalidated and unneccessary requests are made on mutation.
+
+In that case it is still recommended to manually specify tags by using [`enhanceEndpoints`](./code-splitting.mdx) on top of the generated api and manually declare `providesTags`/`invalidatesTags`.
+
 ### Programmatic usage
 
 ```ts no-transpile title="src/store/petApi.ts"
@@ -87,7 +96,10 @@ interface SimpleUsage {
   exportName?: string
   argSuffix?: string
   responseSuffix?: string
-  hooks?: boolean
+  hooks?:
+    | boolean
+    | { queries: boolean; lazyQueries: boolean; mutations: boolean }
+  tag?: boolean
   outputFile: string
   filterEndpoints?:
     | string
@@ -131,6 +143,10 @@ const withOverride: ConfigFile = {
 }
 ```
 
+#### Generating hooks
+
+Setting `hooks: true` will generate `useQuery` and `useMuation` hook exports. If you also want `useLazyQuery` hooks generated or more granular control, you can also pass an object in the shape of: `{ queries: boolean; lazyQueries: boolean; mutations: boolean }`.
+
 #### Multiple output files
 
 ```ts no-transpile title="openapi-config.ts"

packages/rtk-query-codegen-openapi/package.json

@@ -56,8 +56,8 @@
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.0.2",
+    "@rtk-query/oazapfts-patched": "^3.6.0-2",
     "commander": "^6.2.0",
-    "oazapfts": "^3.5.0",
     "prettier": "^2.2.1",
     "semver": "^7.3.5",
     "swagger2openapi": "^7.0.4",

packages/rtk-query-codegen-openapi/src/bin/cli.ts

@@ -43,7 +43,7 @@ program.version(meta.version).usage('</path/to/config.js>').parse(process.argv);
 
 const configFile = program.args[0];
 
-if (program.args.length === 0 || !/\.(jsx?|tsx?|jsonc?)?$/.test(configFile)) {
+if (program.args.length === 0 || !/\.(c?(jsx?|tsx?)|jsonc?)?$/.test(configFile)) {
   program.help();
 } else {
   if (/\.tsx?$/.test(configFile) && !ts) {

packages/rtk-query-codegen-openapi/src/codegen.ts

@@ -3,9 +3,11 @@ import { factory } from './utils/factory';
 
 const defaultEndpointBuilder = factory.createIdentifier('build');
 
-export type ObjectPropertyDefinitions = Record<string, ts.Expression>;
+export type ObjectPropertyDefinitions = Record<string, ts.Expression | undefined>;
 export function generateObjectProperties(obj: ObjectPropertyDefinitions) {
-  return Object.entries(obj).map(([k, v]) => factory.createPropertyAssignment(factory.createIdentifier(k), v));
+  return Object.entries(obj)
+    .filter(([_, v]) => v)
+    .map(([k, v]) => factory.createPropertyAssignment(factory.createIdentifier(k), v as ts.Expression));
 }
 
 export function generateImportNode(pkg: string, namedImports: Record<string, string>, defaultImportName?: string) {
@@ -31,10 +33,69 @@ export function generateImportNode(pkg: string, namedImports: Record<string, str
 export function generateCreateApiCall({
   endpointBuilder = defaultEndpointBuilder,
   endpointDefinitions,
+  tag,
 }: {
   endpointBuilder?: ts.Identifier;
   endpointDefinitions: ts.ObjectLiteralExpression;
+  tag: boolean;
 }) {
+  const injectEndpointsObjectLiteralExpression = factory.createObjectLiteralExpression(
+    generateObjectProperties({
+      endpoints: factory.createArrowFunction(
+        undefined,
+        undefined,
+        [
+          factory.createParameterDeclaration(
+            undefined,
+            undefined,
+            undefined,
+            endpointBuilder,
+            undefined,
+            undefined,
+            undefined
+          ),
+        ],
+        undefined,
+        factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
+        factory.createParenthesizedExpression(endpointDefinitions)
+      ),
+      overrideExisting: factory.createFalse(),
+    }),
+    true
+  );
+  if (tag) {
+    const enhanceEndpointsObjectLiteralExpression = factory.createObjectLiteralExpression(
+      [factory.createShorthandPropertyAssignment(factory.createIdentifier('addTagTypes'), undefined)],
+      true
+    )
+    return factory.createVariableStatement(
+      undefined,
+      factory.createVariableDeclarationList(
+        [factory.createVariableDeclaration(
+          factory.createIdentifier("injectedRtkApi"),
+          undefined,
+          undefined,
+          factory.createCallExpression(
+            factory.createPropertyAccessExpression(
+              factory.createCallExpression(
+                factory.createPropertyAccessExpression(
+                  factory.createIdentifier("api"),
+                  factory.createIdentifier("enhanceEndpoints")
+                ),
+                undefined,
+                [enhanceEndpointsObjectLiteralExpression]
+              ),
+              factory.createIdentifier("injectEndpoints")
+            ),
+            undefined,
+            [injectEndpointsObjectLiteralExpression]
+          )
+        )],
+        ts.NodeFlags.Const
+      )
+    );
+  }
+
   return factory.createVariableStatement(
     undefined,
     factory.createVariableDeclarationList(
@@ -49,32 +110,7 @@ export function generateCreateApiCall({
               factory.createIdentifier('injectEndpoints')
             ),
             undefined,
-            [
-              factory.createObjectLiteralExpression(
-                generateObjectProperties({
-                  endpoints: factory.createArrowFunction(
-                    undefined,
-                    undefined,
-                    [
-                      factory.createParameterDeclaration(
-                        undefined,
-                        undefined,
-                        undefined,
-                        endpointBuilder,
-                        undefined,
-                        undefined,
-                        undefined
-                      ),
-                    ],
-                    undefined,
-                    factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
-                    factory.createParenthesizedExpression(endpointDefinitions)
-                  ),
-                  overrideExisting: factory.createFalse(),
-                }),
-                true
-              ),
-            ]
+            [injectEndpointsObjectLiteralExpression]
           )
         ),
       ],
@@ -91,6 +127,7 @@ export function generateEndpointDefinition({
   queryFn,
   endpointBuilder = defaultEndpointBuilder,
   extraEndpointsProps,
+  tags,
 }: {
   operationName: string;
   type: 'query' | 'mutation';
@@ -99,7 +136,17 @@ export function generateEndpointDefinition({
   queryFn: ts.Expression;
   endpointBuilder?: ts.Identifier;
   extraEndpointsProps: ObjectPropertyDefinitions;
+  tags: string[];
 }) {
+  const objectProperties = generateObjectProperties({ query: queryFn, ...extraEndpointsProps });
+  if (tags.length > 0) {
+    objectProperties.push(
+      factory.createPropertyAssignment(
+        factory.createIdentifier(type === 'query' ? 'providesTags' : 'invalidatesTags'),
+        factory.createArrayLiteralExpression(tags.map((tag) => factory.createStringLiteral(tag), false))
+      )
+    )
+  }
   return factory.createPropertyAssignment(
     factory.createIdentifier(operationName),
 
@@ -108,10 +155,33 @@ export function generateEndpointDefinition({
       [Response, QueryArg],
       [
         factory.createObjectLiteralExpression(
-          generateObjectProperties({ query: queryFn, ...extraEndpointsProps }),
+          objectProperties,
           true
         ),
       ]
+    ),
+  );
+}
+
+export function generateTagTypes({ addTagTypes }: { addTagTypes: string[] }) {
+  return factory.createVariableStatement(
+    [factory.createModifier(ts.SyntaxKind.ExportKeyword)],
+    factory.createVariableDeclarationList(
+      [
+        factory.createVariableDeclaration(
+          factory.createIdentifier('addTagTypes'),
+          undefined,
+          undefined,
+          factory.createAsExpression(
+            factory.createArrayLiteralExpression(
+              addTagTypes.map((tagType) => factory.createStringLiteral(tagType)),
+              true
+            ),
+            factory.createTypeReferenceNode(factory.createIdentifier('const'), undefined)
+          )
+        ),
+      ],
+      ts.NodeFlags.Const
     )
   );
 }