Merge branch 'main' into fix/query-devtools-setup-stylesheet-cross-target-dedup

Author: sukvvon

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

@@ -200,6 +200,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' },
+            },
+          ],
+        },
       ])
       .concat([
         {

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') {
@@ -81,6 +87,10 @@ export const rule = createRule({
       }
     }
 
+    function isCustomHookName(hookName: string): boolean {
+      return /^use[A-Z0-9]/.test(hookName)
+    }
+
     function hasCombineProperty(
       callExpression: TSESTree.CallExpression,
     ): boolean {
@@ -98,6 +108,95 @@ 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' ||
+          callExpression.callee.name === 'useSuspenseQueries') &&
+        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 (
@@ -118,24 +217,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/useSuspenseQueries with combine property - it's stable
-          if (
-            (node.init.callee.name === 'useQueries' ||
-              node.init.callee.name === 'useSuspenseQueries') &&
-            hasCombineProperty(node.init)
-          ) {
-            // Don't track useQueries/useSuspenseQueries 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) => {
@@ -145,26 +256,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)
+        })
+      },
     }
   }),
 })

packages/preact-query-devtools/src/__tests__/PreactQueryDevtools.test.tsx

@@ -62,6 +62,26 @@ describe('PreactQueryDevtools', () => {
     expect(mountMock).toHaveBeenCalled()
   })
 
+  it('should forward "buttonPosition" to the devtools instance', async () => {
+    const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(
+      <PreactQueryDevtools client={queryClient} buttonPosition="top-left" />,
+    )
+
+    expect(setButtonPositionMock).toHaveBeenCalledWith('top-left')
+  })
+
+  it('should forward "position" to the devtools instance', async () => {
+    const { PreactQueryDevtools } = await import('../PreactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(<PreactQueryDevtools client={queryClient} position="left" />)
+
+    expect(setPositionMock).toHaveBeenCalledWith('left')
+  })
+
   it('should return null in non-development environments', async () => {
     vi.stubEnv('NODE_ENV', 'production')
     vi.resetModules()

packages/react-query-devtools/src/__tests__/ReactQueryDevtools.test.tsx

@@ -62,6 +62,26 @@ describe('ReactQueryDevtools', () => {
     expect(mountMock).toHaveBeenCalled()
   })
 
+  it('should forward "buttonPosition" to the devtools instance', async () => {
+    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(
+      <ReactQueryDevtools client={queryClient} buttonPosition="top-left" />,
+    )
+
+    expect(setButtonPositionMock).toHaveBeenCalledWith('top-left')
+  })
+
+  it('should forward "position" to the devtools instance', async () => {
+    const { ReactQueryDevtools } = await import('../ReactQueryDevtools')
+    const queryClient = new QueryClient()
+
+    render(<ReactQueryDevtools client={queryClient} position="left" />)
+
+    expect(setPositionMock).toHaveBeenCalledWith('left')
+  })
+
   it('should return null in non-development environments', async () => {
     vi.stubEnv('NODE_ENV', 'production')
     vi.resetModules()