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

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

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

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

@@ -36,7 +36,13 @@ export const rule = createRule({
 
   create: detectTanstackQueryImports((context, _options, helpers) => {
     const trackedVariables: Record<string, string> = {}
+    const trackedCustomHooks: Record<string, string> = {}
     const hookAliasMap: Record<string, string> = {}
+    const pendingVariableDeclarators: Array<TSESTree.VariableDeclarator> = []
+    const pendingDependencyChecks: Array<{
+      reactHook: string
+      depsArray: TSESTree.ArrayExpression
+    }> = []
 
     function getReactHook(node: TSESTree.CallExpression): string | undefined {
       if (node.callee.type === 'Identifier') {
@@ -67,6 +73,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 +94,94 @@ 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
+    }
+
+    function checkDependencyArray(
+      reactHook: string,
+      depsArray: TSESTree.ArrayExpression,
+    ) {
+      depsArray.elements.forEach((dep) => {
+        if (
+          dep !== null &&
+          dep.type === AST_NODE_TYPES.Identifier &&
+          trackedVariables[dep.name] !== undefined
+        ) {
+          const queryHook = trackedVariables[dep.name]
+          context.report({
+            node: dep,
+            messageId: 'noUnstableDeps',
+            data: {
+              queryHook,
+              reactHook,
+            },
+          })
+        }
+      })
+    }
+
     return {
       ImportDeclaration(node: TSESTree.ImportDeclaration) {
         if (
@@ -104,23 +202,36 @@ 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.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.ArrowFunctionExpression ||
+            node.init.type === AST_NODE_TYPES.FunctionExpression)
         ) {
-          // 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 = getReturnedQueryHook(node.init.body)
+          if (queryHook !== undefined) {
+            trackedCustomHooks[node.id.name] = queryHook
           }
-          collectVariableNames(node.id, node.init.callee.name)
+        }
+
+        if (
+          node.init !== null &&
+          node.init.type === AST_NODE_TYPES.CallExpression
+        ) {
+          pendingVariableDeclarators.push(node)
         }
       },
       CallExpression: (node) => {
@@ -130,26 +241,28 @@ export const rule = createRule({
           node.arguments.length > 1 &&
           node.arguments[1]?.type === AST_NODE_TYPES.ArrayExpression
         ) {
-          const depsArray = node.arguments[1].elements
-          depsArray.forEach((dep) => {
-            if (
-              dep !== null &&
-              dep.type === AST_NODE_TYPES.Identifier &&
-              trackedVariables[dep.name] !== undefined
-            ) {
-              const queryHook = trackedVariables[dep.name]
-              context.report({
-                node: dep,
-                messageId: 'noUnstableDeps',
-                data: {
-                  queryHook,
-                  reactHook,
-                },
-              })
-            }
+          pendingDependencyChecks.push({
+            reactHook,
+            depsArray: node.arguments[1],
           })
         }
       },
+      'Program:exit'() {
+        pendingVariableDeclarators.forEach((node) => {
+          if (node.init?.type !== AST_NODE_TYPES.CallExpression) {
+            return
+          }
+
+          const queryHook = getTrackedQueryHook(node.init)
+          if (queryHook !== undefined) {
+            collectVariableNames(node.id, queryHook)
+          }
+        })
+
+        pendingDependencyChecks.forEach(({ reactHook, depsArray }) => {
+          checkDependencyArray(reactHook, depsArray)
+        })
+      },
     }
   }),
 })