fix(eslint-plugin-query): track custom query hook wrappers

Author: junjuny0227

packages/eslint-plugin-query/src/__tests__/no-unstable-deps.test.ts

@@ -163,6 +163,50 @@ const baseTestCases = {
             },
           ],
         },
+        {
+          name: `result of custom useMutation wrapper is passed to ${reactHookInvocation} as dependency`,
+          code: `
+            ${reactHookImport}
+            import { useMutation } from "@tanstack/react-query";
+
+            const useMyMutation = () => useMutation({ mutationFn: (value: string) => value });
+
+            function Component() {
+              const mutation = useMyMutation();
+              const callback = ${reactHookInvocation}(() => { mutation.mutate('hello') }, [mutation]);
+              return;
+            }
+          `,
+          errors: [
+            {
+              messageId: 'noUnstableDeps',
+              data: { reactHook: reactHookAlias, queryHook: 'useMutation' },
+            },
+          ],
+        },
+        {
+          name: `result of custom useQuery wrapper is passed to ${reactHookInvocation} as dependency`,
+          code: `
+            ${reactHookImport}
+            import { useQuery } from "@tanstack/react-query";
+
+            function useMyQuery() {
+              return useQuery({ queryFn: (value: string) => value });
+            }
+
+            function Component() {
+              const query = useMyQuery();
+              const callback = ${reactHookInvocation}(() => { query.refetch() }, [query]);
+              return;
+            }
+          `,
+          errors: [
+            {
+              messageId: 'noUnstableDeps',
+              data: { reactHook: reactHookAlias, queryHook: 'useQuery' },
+            },
+          ],
+        },
       ]),
 }
 

packages/eslint-plugin-query/src/rules/no-unstable-deps/no-unstable-deps.rule.ts

@@ -36,6 +36,7 @@ export const rule = createRule({
 
   create: detectTanstackQueryImports((context, _options, helpers) => {
     const trackedVariables: Record<string, string> = {}
+    const trackedCustomHooks: Record<string, string> = {}
     const hookAliasMap: Record<string, string> = {}
 
     function getReactHook(node: TSESTree.CallExpression): string | undefined {
@@ -67,6 +68,10 @@ export const rule = createRule({
       }
     }
 
+    function isCustomHookName(hookName: string): boolean {
+      return /^use[A-Z0-9]/.test(hookName)
+    }
+
     function hasCombineProperty(
       callExpression: TSESTree.CallExpression,
     ): boolean {
@@ -84,6 +89,71 @@ export const rule = createRule({
       )
     }
 
+    function getDirectQueryHook(
+      callExpression: TSESTree.CallExpression,
+    ): string | undefined {
+      if (
+        callExpression.callee.type !== AST_NODE_TYPES.Identifier ||
+        !allHookNames.includes(callExpression.callee.name) ||
+        !helpers.isTanstackQueryImport(callExpression.callee)
+      ) {
+        return undefined
+      }
+
+      if (
+        callExpression.callee.name === 'useQueries' &&
+        hasCombineProperty(callExpression)
+      ) {
+        return undefined
+      }
+
+      return callExpression.callee.name
+    }
+
+    function getTrackedQueryHook(
+      callExpression: TSESTree.CallExpression,
+    ): string | undefined {
+      const directQueryHook = getDirectQueryHook(callExpression)
+      if (directQueryHook !== undefined) {
+        return directQueryHook
+      }
+
+      if (callExpression.callee.type === AST_NODE_TYPES.Identifier) {
+        return trackedCustomHooks[callExpression.callee.name]
+      }
+
+      return undefined
+    }
+
+    function getReturnedQueryHook(
+      body:
+        | TSESTree.FunctionExpression['body']
+        | TSESTree.ArrowFunctionExpression['body'],
+    ): string | undefined {
+      if (body.type === AST_NODE_TYPES.CallExpression) {
+        return getDirectQueryHook(body)
+      }
+
+      if (body.type !== AST_NODE_TYPES.BlockStatement) {
+        return undefined
+      }
+
+      const returnStatements = body.body.filter(
+        (statement): statement is TSESTree.ReturnStatement =>
+          statement.type === AST_NODE_TYPES.ReturnStatement,
+      )
+      if (returnStatements.length !== 1) {
+        return undefined
+      }
+
+      const returnArgument = returnStatements[0]?.argument
+      if (returnArgument?.type === AST_NODE_TYPES.CallExpression) {
+        return getDirectQueryHook(returnArgument)
+      }
+
+      return undefined
+    }
+
     return {
       ImportDeclaration(node: TSESTree.ImportDeclaration) {
         if (
@@ -104,23 +174,39 @@ export const rule = createRule({
         }
       },
 
+      FunctionDeclaration(node) {
+        if (node.id === null || !isCustomHookName(node.id.name)) {
+          return
+        }
+
+        const queryHook = getReturnedQueryHook(node.body)
+        if (queryHook !== undefined) {
+          trackedCustomHooks[node.id.name] = queryHook
+        }
+      },
+
       VariableDeclarator(node) {
+        if (
+          node.id.type === AST_NODE_TYPES.Identifier &&
+          isCustomHookName(node.id.name) &&
+          node.init !== null &&
+          (node.init.type === AST_NODE_TYPES.ArrowFunctionExpression ||
+            node.init.type === AST_NODE_TYPES.FunctionExpression)
+        ) {
+          const queryHook = getReturnedQueryHook(node.init.body)
+          if (queryHook !== undefined) {
+            trackedCustomHooks[node.id.name] = queryHook
+          }
+        }
+
         if (
           node.init !== null &&
-          node.init.type === AST_NODE_TYPES.CallExpression &&
-          node.init.callee.type === AST_NODE_TYPES.Identifier &&
-          allHookNames.includes(node.init.callee.name) &&
-          helpers.isTanstackQueryImport(node.init.callee)
+          node.init.type === AST_NODE_TYPES.CallExpression
         ) {
-          // Special case for useQueries with combine property - it's stable
-          if (
-            node.init.callee.name === 'useQueries' &&
-            hasCombineProperty(node.init)
-          ) {
-            // Don't track useQueries with combine as unstable
-            return
+          const queryHook = getTrackedQueryHook(node.init)
+          if (queryHook !== undefined) {
+            collectVariableNames(node.id, queryHook)
           }
-          collectVariableNames(node.id, node.init.callee.name)
         }
       },
       CallExpression: (node) => {