feat(eslint-plugin): prefer-object-syntax support useMutation and createMutation (#4893)

* support useMutation and createMutation

* fix tests

* format

Author: Newbie012

packages/eslint-plugin-query/src/rules/prefer-query-object-syntax/prefer-query-object-syntax.test.ts

@@ -35,7 +35,7 @@ ruleTester.run(name, rule, {
     {
       code: normalizeIndent`
         import { createQuery } from "@tanstack/solid-query";
-        const result = useQuery({ queryKey, queryFn, enabled });
+        const result = createQuery({ queryKey, queryFn, enabled });
       `,
     },
     {
@@ -94,6 +94,49 @@ ruleTester.run(name, rule, {
         useQuery(getQuery())
       `,
     },
+    {
+      code: normalizeIndent`
+        useMutation()
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import { useMutation } from "@tanstack/react-query";
+        useMutation();
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import { useMutation } from "@tanstack/react-query";
+        useMutation({ mutationKey, mutationFn, enabled });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import { useMutation } from "@tanstack/react-query";
+        const result = useMutation({ mutationKey, mutationFn, enabled });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import { createMutation } from "@tanstack/solid-query";
+        const result = createMutation({ mutationKey, mutationFn, enabled });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import { useMutation } from "somewhere-else";
+        useMutation(mutationKey, mutationFn, { enabled });
+      `,
+    },
+    {
+      code: normalizeIndent`
+        import { useMutation } from "@tanstack/react-query";
+        const getPosts = async () => Promise.resolve([]);
+        const postsQuery = { mutationKey: ["posts"], mutationFn: () => getPosts() };
+        const usePosts = () => useMutation(postsQuery);
+      `,
+    },
   ],
 
   invalid: [
@@ -359,5 +402,27 @@ ruleTester.run(name, rule, {
             createQuery({ queryKey: queryKeys.userById(userId), queryFn: async () => await fetchUserById(userId) });
           `,
     },
+    {
+      code: normalizeIndent`
+          import { useMutation } from "@tanstack/react-query";
+          useMutation(["mutation", "key"], async () => await fetchUserById(userId));
+        `,
+      errors: [{ messageId: 'preferObjectSyntax' }],
+      output: normalizeIndent`
+          import { useMutation } from "@tanstack/react-query";
+          useMutation({ mutationKey: ["mutation", "key"], mutationFn: async () => await fetchUserById(userId) });
+        `,
+    },
+    {
+      code: normalizeIndent`
+          import { createMutation } from "@tanstack/solid-query";
+          createMutation(["mutation", "key"], async () => await fetchUserById(userId));
+        `,
+      errors: [{ messageId: 'preferObjectSyntax' }],
+      output: normalizeIndent`
+          import { createMutation } from "@tanstack/solid-query";
+          createMutation({ mutationKey: ["mutation", "key"], mutationFn: async () => await fetchUserById(userId) });
+        `,
+    },
   ],
 })

packages/eslint-plugin-query/src/rules/prefer-query-object-syntax/prefer-query-object-syntax.ts

@@ -2,8 +2,14 @@ import type { TSESLint, TSESTree } from '@typescript-eslint/utils'
 import { AST_NODE_TYPES } from '@typescript-eslint/utils'
 import { createRule } from '../../utils/create-rule'
 import { ASTUtils } from '../../utils/ast-utils'
+import { objectKeys } from '../../utils/object-utils'
 
-const QUERY_CALLS = ['useQuery', 'createQuery']
+const QUERY_CALLS = {
+  useQuery: { key: 'queryKey', fn: 'queryFn' },
+  createQuery: { key: 'queryKey', fn: 'queryFn' },
+  useMutation: { key: 'mutationKey', fn: 'mutationFn' },
+  createMutation: { key: 'mutationKey', fn: 'mutationFn' },
+}
 
 const messages = {
   preferObjectSyntax: `Objects syntax for query is preferred`,
@@ -32,11 +38,13 @@ export const rule: TSESLint.RuleModule<MessageKey, readonly unknown[]> =
     create(context, _, helpers) {
       return {
         CallExpression(node) {
-          const isTanstackQueryCall =
-            ASTUtils.isIdentifierWithOneOfNames(node.callee, QUERY_CALLS) &&
-            helpers.isTanstackQueryImport(node.callee)
-
-          if (!isTanstackQueryCall) {
+          if (
+            !ASTUtils.isIdentifierWithOneOfNames(
+              node.callee,
+              objectKeys(QUERY_CALLS),
+            ) ||
+            !helpers.isTanstackQueryImport(node.callee)
+          ) {
             return
           }
 
@@ -101,6 +109,7 @@ export const rule: TSESLint.RuleModule<MessageKey, readonly unknown[]> =
               runCheckOnNode({
                 context: context,
                 callNode: node,
+                callString: node.callee.name,
                 expression: stmt.argument,
                 messageId: 'returnTypeAreNotObjectSyntax',
               })
@@ -121,6 +130,7 @@ export const rule: TSESLint.RuleModule<MessageKey, readonly unknown[]> =
               return runCheckOnNode({
                 context: context,
                 callNode: node,
+                callString: node.callee.name,
                 expression: referencedNode,
                 messageId: 'preferObjectSyntax',
               })
@@ -130,6 +140,7 @@ export const rule: TSESLint.RuleModule<MessageKey, readonly unknown[]> =
           runCheckOnNode({
             context: context,
             callNode: node,
+            callString: node.callee.name,
             expression: firstArgument,
             messageId: 'preferObjectSyntax',
           })
@@ -141,10 +152,11 @@ export const rule: TSESLint.RuleModule<MessageKey, readonly unknown[]> =
 function runCheckOnNode(params: {
   context: Readonly<TSESLint.RuleContext<MessageKey, readonly unknown[]>>
   callNode: TSESTree.CallExpression
+  callString: keyof typeof QUERY_CALLS
   expression: TSESTree.Node
   messageId: MessageKey
 }) {
-  const { context, expression, messageId, callNode } = params
+  const { context, expression, messageId, callNode, callString } = params
   const sourceCode = context.getSourceCode()
 
   if (expression.type === AST_NODE_TYPES.ObjectExpression) {
@@ -184,6 +196,8 @@ function runCheckOnNode(params: {
     return
   }
 
+  const callProps = QUERY_CALLS[callString]
+
   context.report({
     node: callNode,
     messageId: 'preferObjectSyntax',
@@ -194,15 +208,19 @@ function runCheckOnNode(params: {
       const firstArgument = callNode.arguments[0]
       const queryKey = sourceCode.getText(firstArgument)
       const queryKeyProperty =
-        queryKey === 'queryKey' ? 'queryKey' : `queryKey: ${queryKey}`
+        queryKey === callProps.key
+          ? callProps.key
+          : `${callProps.key}: ${queryKey}`
 
       optionsObjectProperties.push(queryKeyProperty)
 
       // queryFn
       if (secondArgument && secondArgument !== optionsObject) {
         const queryFn = sourceCode.getText(secondArgument)
         const queryFnProperty =
-          queryFn === 'queryFn' ? 'queryFn' : `queryFn: ${queryFn}`
+          queryFn === callProps.fn
+            ? callProps.fn
+            : `${callProps.fn}: ${queryFn}`
 
         optionsObjectProperties.push(queryFnProperty)
       }

packages/eslint-plugin-query/src/utils/ast-utils.ts

@@ -19,10 +19,10 @@ export const ASTUtils = {
   ): node is TSESTree.Identifier {
     return ASTUtils.isIdentifier(node) && node.name === name
   },
-  isIdentifierWithOneOfNames(
+  isIdentifierWithOneOfNames<T extends string[]>(
     node: TSESTree.Node,
-    name: string[],
-  ): node is TSESTree.Identifier {
+    name: T,
+  ): node is TSESTree.Identifier & { name: T[number] } {
     return ASTUtils.isIdentifier(node) && name.includes(node.name)
   },
   isProperty(node: TSESTree.Node): node is TSESTree.Property {

packages/eslint-plugin-query/src/utils/object-utils.ts

@@ -0,0 +1,5 @@
+export function objectKeys<T extends Record<string, unknown>>(
+  obj: T,
+): Array<keyof T> {
+  return Object.keys(obj) as Array<keyof T>
+}