try without committing html

Author: AllieJonsson

docs/src/pages/reference/configuration/output.mdx

@@ -1303,7 +1303,7 @@ export const invalidateShowPetById = async (
 
 Type: `Array<{ onMutations: string[], invalidates: (string | { query: string, params: string[] })[] }>`.
 
-**Angular Query only.** Declaratively invalidate queries when mutations succeed. Requires `useInvalidate: true`.
+**Angular Query and React Query only.** Declaratively invalidate queries when mutations succeed.
 
 ```js
 import { defineConfig } from 'orval';
@@ -1314,7 +1314,6 @@ export default defineConfig({
       client: 'angular-query',
       override: {
         query: {
-          useInvalidate: true,
           mutationInvalidates: [
             {
               onMutations: ['createPets'],

packages/query/src/mutation-generator.ts

@@ -23,7 +23,7 @@ import {
   getQueryOptionsDefinition,
 } from './query-options';
 import { generateMutatorReturnType } from './return-types';
-import { isAngular, isSolid } from './utils';
+import { isAngular, isReact, isSolid } from './utils';
 
 type NormalizedTarget = {
   query: string;
@@ -201,7 +201,8 @@ export const generateMutationHook = async ({
     seenTargets.add(key);
     return true;
   });
-  const hasInvalidation = uniqueInvalidates.length > 0 && isAngularClient;
+  const hasInvalidation =
+    uniqueInvalidates.length > 0 && (isAngularClient || isReact(outputClient));
 
   // For Angular, add http: HttpClient as FIRST param (required, before optional params)
   // This avoids TS1016 "required param cannot follow optional param"
@@ -210,7 +211,7 @@ export const generateMutationHook = async ({
       ? 'http: HttpClient, '
       : '';
 
-  // For Angular mutations with invalidation, add queryClient as second required param
+  // For Angular/React mutations with invalidation, add queryClient as second required param
   const queryClientParam = hasInvalidation ? 'queryClient: QueryClient, ' : '';
 
   const mutationOptionsFn = `export const ${mutationOptionsFnName} = <TError = ${errorType},
@@ -237,10 +238,17 @@ ${hooksOptionImplementation}
 
 ${
   hasInvalidation
-    ? `  const onSuccess = (data: Awaited<ReturnType<typeof ${operationName}>>, variables: ${definitions ? `{${definitions}}` : 'void'}, onMutateResult: TContext, context: MutationFunctionContext) => {
+    ? isAngular(outputClient)
+      ? `  const onSuccess = (data: Awaited<ReturnType<typeof ${operationName}>>, variables: ${definitions ? `{${definitions}}` : 'void'}, onMutateResult: TContext, context: MutationFunctionContext) => {
 ${uniqueInvalidates.map((t) => generateInvalidateCall(t)).join('\n')}
     mutationOptions?.onSuccess?.(data, variables, onMutateResult, context);
   };`
+      : isReact(outputClient)
+        ? `  const onSuccess = (data: Awaited<ReturnType<typeof ${operationName}>>, variables: ${definitions ? `{${definitions}}` : 'void'}, context: TContext) => {
+${uniqueInvalidates.map((t) => generateInvalidateCall(t)).join('\n')}
+    mutationOptions?.onSuccess?.(data, variables, context);
+  };`
+        : ''
     : ''
 }
 
@@ -277,7 +285,7 @@ ${uniqueInvalidates.map((t) => generateInvalidateCall(t)).join('\n')}
   const optionalQueryClientArgument =
     hasQueryV5 && !isAngular(outputClient) ? ', queryClient?: QueryClient' : '';
 
-  const mutationImplementation = `${mutationOptionsFnName}(${
+  const mutationImplementation = `${mutationOptionsFnName}(${hasInvalidation ? `queryClient${isReact(outputClient) ? ' ?? backupQueryClient' : ''}, ` : ''}${
     isRequestOptions ? 'options' : 'mutationOptions'
   })`;
 
@@ -320,10 +328,10 @@ ${
       : `      const ${mutationOptionsVarName} = ${mutationImplementation};
 
       return ${operationPrefix}Mutation(() => ${mutationOptionsVarName});`
-    : `      return ${operationPrefix}Mutation(${
+    : `      ${isReact(outputClient) && hasInvalidation ? 'const backupQueryClient = useQueryClient();\n      ' : ''}return ${operationPrefix}Mutation(${
         hasSvelteQueryV6
           ? `() => ({ ...${mutationImplementation}${optionalQueryClientArgument ? ', queryClient' : ''} })`
-          : `${mutationImplementation}${optionalQueryClientArgument ? ', queryClient' : ''}`
+          : `${mutationImplementation}${optionalQueryClientArgument ? `, queryClient` : ''}`
       });`
 }
     }

packages/query/src/utils.ts

@@ -138,6 +138,9 @@ export const isSolid = (client: OutputClient | OutputClientFunc) =>
 export const isAngular = (client: OutputClient | OutputClientFunc) =>
   OutputClient.ANGULAR_QUERY === client;
 
+export const isReact = (client: OutputClient | OutputClientFunc) =>
+  OutputClient.REACT_QUERY === client;
+
 export const getQueryTypeForFramework = (type: string): string => {
   // Angular Query and Svelte Query don't have suspense variants, map them to regular queries
   switch (type) {

tests/configs/react-query.config.ts

@@ -13,6 +13,39 @@ export default defineConfig({
       target: '../specifications/petstore.yaml',
     },
   },
+  invalidates: {
+    output: {
+      target: '../generated/react-query/invalidates/endpoints.ts',
+      schemas: '../generated/react-query/invalidates/model',
+      client: 'react-query',
+      mock: true,
+      headers: true,
+      override: {
+        query: {
+          mutationInvalidates: [
+            {
+              onMutations: ['createPets'],
+              invalidates: ['listPets'],
+            },
+            {
+              onMutations: ['deletePet', 'updatePet', 'patchPet'],
+              invalidates: [
+                'listPets',
+                { query: 'showPetById', params: ['petId'] },
+              ],
+            },
+            {
+              onMutations: ['uploadFile'],
+              invalidates: ['listPets'],
+            },
+          ],
+        },
+      },
+    },
+    input: {
+      target: '../specifications/petstore.yaml',
+    },
+  },
   zodSchemaResponse: {
     output: {
       target: '../generated/react-query/zod-schema-response/endpoints.ts',