fix(query): correctly check arg numbers, add operation info, add docs (#1974)

Author: AllieJonsson

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

@@ -1124,7 +1124,7 @@ module.exports = {
         query: {
           mutationOptions: {
             path: './api/mutator/custom-mutator-options.ts',
-            name: 'customMutatorOptionsFn',
+            name: 'useCustomMutatorOptions',
             // default: true
           },
         },
@@ -1134,6 +1134,25 @@ module.exports = {
 };
 ```
 
+```ts
+// custom-mutator-options.ts
+
+export const useCustomMutatorOptions = <T, TError, TData, TContext>(
+  options: UseMutationOptions<T, TError, TData, TContext> &
+    Required<
+      Pick<UseMutationOptions<T, TError, TData, TContext>, 'mutationFn'>
+    >,
+  /* Optional */ path: { url: string },
+  /* Optional */ operation: { operationId: string; operationName: string },
+) => {
+  const queryClient = useQueryClient();
+  if (operation.operationId === 'createPet') {
+    queryClient.invalidateQueries({ queryKey: getGetPetsQueryKey() });
+  }
+  return options;
+};
+```
+
 ##### signal
 
 Type: `Boolean`.

packages/query/src/index.ts

@@ -1385,8 +1385,12 @@ ${hooksOptionImplementation}
             ? `const customOptions = ${
                 mutationOptionsMutator.name
               }({...mutationOptions, mutationFn}${
+                mutationOptionsMutator.hasSecondArg
+                  ? `, { url: \`${route.replaceAll('/${', '/{')}\` }`
+                  : ''
+              }${
                 mutationOptionsMutator.hasThirdArg
-                  ? `, { url: \`${route}\` }`
+                  ? `, { operationId: '${operationId}', operationName: '${operationName}' }`
                   : ''
               });`
             : ''

tests/configs/react-query.config.ts

@@ -55,7 +55,27 @@ export default defineConfig({
       schemas: '../generated/react-query/split-query-key/model',
       client: 'react-query',
       override: {
-        query: { shouldSplitQueryKey: true },
+        query: {
+          shouldSplitQueryKey: true,
+        },
+      },
+    },
+    input: {
+      target: '../specifications/petstore.yaml',
+    },
+  },
+  petstoreCustomMutatorOptions: {
+    output: {
+      target: '../generated/react-query/custom-mutator-options/endpoints.ts',
+      schemas: '../generated/react-query/custom-mutator-options/model',
+      client: 'react-query',
+      override: {
+        query: {
+          mutationOptions: {
+            path: '../mutators/custom-mutation.ts',
+            name: 'useCustomMutation',
+          },
+        },
       },
     },
     input: {

tests/mutators/custom-mutation.ts

@@ -0,0 +1,16 @@
+import { UseMutationOptions, useQueryClient } from '@tanstack/react-query';
+
+export const useCustomMutation = <T, TError, TData, TContext>(
+  options: UseMutationOptions<T, TError, TData, TContext> &
+    Required<
+      Pick<UseMutationOptions<T, TError, TData, TContext>, 'mutationFn'>
+    >,
+  _: { url: string },
+  operation: { operationId: string; operationName: string },
+) => {
+  const queryClient = useQueryClient();
+  if (operation.operationId === 'deletePetById') {
+    queryClient.invalidateQueries({ queryKey: ['/pets'] });
+  }
+  return options;
+};