Merge pull request #31 from poviolabs/feature/mutation-effects

Remove invalidate queries & Add mutation effects

Author: monikaboz

README.md

@@ -49,7 +49,7 @@ yarn openapi-codegen generate --input http://localhost:3001/docs-json --standalo
 
   --axiosRequestConfig                Include Axios request config parameters in query hooks (default: false)
   --infiniteQueries                   Generate infinite queries for paginated API endpoints (default: false)
-  --invalidateQueryOptions            Add query invalidation options to mutation hooks (default: true)
+  --mutationEffects                   Add mutation effects options to mutation hooks (default: true)
 
   --standalone                        Generate any missing supporting classes/types, e.g., REST client class, React Query type extensions, etc. (default: false)
   --baseUrl                           (Requires `--standalone`) Base URL for the REST client; falls back to the OpenAPI spec if not provided

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/openapi-codegen-cli",
-  "version": "0.10.8",
+  "version": "0.11.0",
   "main": "./dist/index.js",
   "bin": {
     "openapi-codegen": "./dist/sh.js"
@@ -18,7 +18,8 @@
     "lint": "eslint --fix",
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
-    "push": "yarn exec ./scripts/publish.sh"
+    "push": "yarn exec ./scripts/publish.sh",
+    "dev:generate": "rm -rf ./output && yarn start generate --input http://localhost:4000/docs-json"
   },
   "files": [
     "dist/*",

src/assets/queryConfig.context.tsx

@@ -0,0 +1,22 @@
+import { createContext, use, useMemo } from "react";
+
+export namespace QueryConfig {
+  interface Type {
+    preferUpdate?: boolean;
+  }
+
+  const Context = createContext<Type>({});
+
+  type ProviderProps = Type;
+
+  export const Provider = ({ preferUpdate, children }: React.PropsWithChildren<ProviderProps>) => {
+    const value = useMemo(() => ({ preferUpdate }), [preferUpdate]);
+
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  };
+
+  export const useConfig = () => {
+    const context = use(Context);
+    return context ?? {};
+  };
+}

src/assets/useMutationEffects.ts

@@ -0,0 +1,52 @@
+import { QueryKey, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+
+import { QueryConfig } from "./queryConfig.context";
+import { QueryModule } from "./queryModules";
+
+export interface MutationEffectsOptions {
+  invalidateCurrentModule?: boolean;
+  invalidateModules?: QueryModule[];
+  invalidateKeys?: QueryKey[];
+  preferUpdate?: boolean;
+}
+
+export interface UseMutationEffectsOptions {
+  currentModule: QueryModule;
+}
+
+export function useMutationEffects({ currentModule }: UseMutationEffectsOptions) {
+  const queryClient = useQueryClient();
+  const config = QueryConfig.useConfig();
+
+  const runMutationEffects = useCallback(
+    async <TData>(data: TData, options: MutationEffectsOptions = {}, updateKeys?: QueryKey[]) => {
+      const { invalidateCurrentModule, invalidateModules, invalidateKeys, preferUpdate } = options;
+      const shouldUpdate = preferUpdate || (preferUpdate === undefined && config.preferUpdate);
+
+      const isQueryKeyEqual = (keyA: QueryKey, keyB: QueryKey) =>
+        keyA.length === keyB.length && keyA.every((item, index) => item === keyB[index]);
+
+      queryClient.invalidateQueries({
+        predicate: ({ queryKey }) => {
+          const isUpdateKey = updateKeys?.some((key) => isQueryKeyEqual(queryKey, key));
+          if (shouldUpdate && isUpdateKey) {
+            return false;
+          }
+
+          const isCurrentModule = invalidateCurrentModule && queryKey[0] === currentModule;
+          const isInvalidateModule = !!invalidateModules && invalidateModules.some((module) => queryKey[0] === module);
+          const isInvalidateKey = !!invalidateKeys && invalidateKeys.some((key) => isQueryKeyEqual(queryKey, key));
+          return isCurrentModule || isInvalidateModule || isInvalidateKey;
+        },
+      });
+
+      if (shouldUpdate && updateKeys) {
+        updateKeys.map((queryKey) => queryClient.setQueryData(queryKey, data));
+      }
+    },
+    [queryClient, currentModule, config.preferUpdate],
+  );
+
+  return { runMutationEffects };
+}

src/commands/generate.command.ts

@@ -63,11 +63,11 @@ class GenerateOptions implements GenerateParams {
   infiniteQueries!: boolean;
 
   @YargOption({
-    envAlias: "invalidateQueryOptions",
-    default: DEFAULT_GENERATE_OPTIONS.invalidateQueryOptions,
+    envAlias: "mutationEffects",
+    default: DEFAULT_GENERATE_OPTIONS.mutationEffects,
     type: "boolean",
   })
-  invalidateQueryOptions!: boolean;
+  mutationEffects!: boolean;
 
   @YargOption({ envAlias: "axiosRequestConfig", default: DEFAULT_GENERATE_OPTIONS.axiosRequestConfig, type: "boolean" })
   axiosRequestConfig!: boolean;

src/commands/generate.ts

@@ -27,7 +27,7 @@ export type GenerateParams = {
   | "replaceOptionalWithNullish"
   | "infiniteQueries"
   | "axiosRequestConfig"
-  | "invalidateQueryOptions"
+  | "mutationEffects"
 >;
 
 export async function generate({ input, excludeTags, monorepo, prettier, verbose, ...params }: GenerateParams) {

src/generators/const/deps.const.ts

@@ -50,14 +50,20 @@ export const STANDALONE_ASSETS: Record<StandaloneAssetEnum, GenerateFile> = {
 
 export const STANDALONE_APP_REST_CLIENT_FILE: GenerateFile = { fileName: "app-rest-client", extension: "ts" };
 
-// InvalidateQueryOptions
+// QueryModules
 export const QUERY_MODULE_ENUM = "QueryModule";
-export const INVALIDATE_QUERIES = {
-  queryModuleEnum: QUERY_MODULE_ENUM,
-  optionsType: "InvalidateQueryOptions",
-  functionName: "invalidateQueries",
+export const QUERY_MODULES_FILE: GenerateFile = { fileName: "queryModules", extension: "ts" };
+
+// QueryConfig
+export const QUERY_CONFIG_FILE: GenerateFile = { fileName: "queryConfig.context", extension: "tsx" };
+
+// MutationEffects
+export const MUTATION_EFFECTS = {
+  optionsType: "MutationEffectsOptions",
+  hookName: "useMutationEffects",
+  runFunctionName: "runMutationEffects",
 };
-export const INVALIDATE_QUERY_OPTIONS_FILE: GenerateFile = { fileName: "invalidateQueries", extension: "ts" };
+export const MUTATION_EFFECTS_FILE: GenerateFile = { fileName: "useMutationEffects", extension: "ts" };
 
 // ZodExtended
 export const ZOD_EXTENDED = {

src/generators/const/options.const.ts

@@ -48,5 +48,5 @@ export const DEFAULT_GENERATE_OPTIONS: GenerateOptions = {
   queryTypesImportPath: TEMPLATE_IMPORTS.queryTypes.template,
   axiosRequestConfig: false,
   infiniteQueries: false,
-  invalidateQueryOptions: true,
+  mutationEffects: true,
 };

src/generators/const/queries.const.ts

@@ -4,10 +4,9 @@ export const QUERY_HOOKS = {
   query: "useQuery",
   infiniteQuery: "useInfiniteQuery",
   mutation: "useMutation",
-  queryClient: "useQueryClient",
 };
 export const QUERY_IMPORT: Import = {
-  bindings: [QUERY_HOOKS.query, QUERY_HOOKS.infiniteQuery, QUERY_HOOKS.mutation, QUERY_HOOKS.queryClient],
+  bindings: [QUERY_HOOKS.query, QUERY_HOOKS.infiniteQuery, QUERY_HOOKS.mutation],
   from: "@tanstack/react-query",
 };
 

src/generators/generate/generateQueries.ts

@@ -1,13 +1,14 @@
-import { INVALIDATE_QUERIES, QUERY_OPTIONS_TYPES } from "../const/deps.const";
+import { MUTATION_EFFECTS, QUERY_MODULE_ENUM, QUERY_OPTIONS_TYPES } from "../const/deps.const";
 import { AXIOS_DEFAULT_IMPORT_NAME, AXIOS_IMPORT, AXIOS_REQUEST_CONFIG_TYPE } from "../const/endpoints.const";
 import { QUERIES_MODULE_NAME, QUERY_HOOKS, QUERY_IMPORT } from "../const/queries.const";
 import { EndpointParameter } from "../types/endpoint";
 import { GenerateType, GenerateTypeParams, Import } from "../types/generate";
 import { getUniqueArray } from "../utils/array.utils";
 import { getEndpointsImports, getModelsImports } from "../utils/generate/generate.imports.utils";
 import {
-  getInvalidateQueriesImportPath,
+  getMutationEffectsImportPath,
   getNamespaceName,
+  getQueryModulesImportPath,
   getQueryTypesImportPath,
 } from "../utils/generate/generate.utils";
 import { getHbsTemplateDelegate } from "../utils/hbs/hbs-template.utils";
@@ -37,17 +38,21 @@ export function generateQueries({ resolver, data, tag = "" }: GenerateTypeParams
     bindings: [
       ...(queryEndpoints.length > 0 ? [QUERY_HOOKS.query] : []),
       ...(resolver.options.infiniteQueries && infiniteQueryEndpoints.length > 0 ? [QUERY_HOOKS.infiniteQuery] : []),
-      ...(mutationEndpoints.length > 0 ? [QUERY_HOOKS.mutation, QUERY_HOOKS.queryClient] : []),
+      ...(mutationEndpoints.length > 0 ? [QUERY_HOOKS.mutation] : []),
     ],
     from: QUERY_IMPORT.from,
   };
 
-  const invalidateQueriesImport: Import = {
-    bindings: [
-      INVALIDATE_QUERIES.queryModuleEnum,
-      ...(mutationEndpoints.length > 0 ? [INVALIDATE_QUERIES.optionsType, INVALIDATE_QUERIES.functionName] : []),
-    ],
-    from: getInvalidateQueriesImportPath(resolver.options),
+  const hasMutationEffects = resolver.options.mutationEffects;
+  const queryModulesImport: Import = {
+    bindings: [QUERY_MODULE_ENUM],
+    from: getQueryModulesImportPath(resolver.options),
+  };
+
+  const hasMutationEffectsImport = hasMutationEffects && mutationEndpoints.length > 0;
+  const mutationEffectsImport: Import = {
+    bindings: [...(mutationEndpoints.length > 0 ? [MUTATION_EFFECTS.optionsType, MUTATION_EFFECTS.hookName] : [])],
+    from: getMutationEffectsImportPath(resolver.options),
   };
 
   const queryTypesImport: Import = {
@@ -80,16 +85,18 @@ export function generateQueries({ resolver, data, tag = "" }: GenerateTypeParams
     hasAxiosImport,
     axiosImport,
     queryImport,
-    hasInvalidateQueryOptions: resolver.options.invalidateQueryOptions,
-    invalidateQueriesImport,
+    hasMutationEffects,
+    queryModulesImport,
+    hasMutationEffectsImport,
+    mutationEffectsImport,
     queryTypesImport,
     modelsImports,
     endpointsImports,
     includeNamespace: resolver.options.tsNamespaces,
     tag,
     namespace: getNamespaceName({ type: GenerateType.Queries, tag, options: resolver.options }),
     queriesModuleName: QUERIES_MODULE_NAME,
-    queryModuleEnum: INVALIDATE_QUERIES.queryModuleEnum,
+    queryModuleEnum: QUERY_MODULE_ENUM,
     endpoints,
     queryEndpoints,
   });