fix(eslint-plugin-query): handle array-destructured useQueries results in no-unstable-deps (fix #10746) (#10747)

* fix(eslint-plugin-query): handle array-destructured useQueries results in no-unstable-deps

The `collectVariableNames` function in the `no-unstable-deps` rule only
handled `Identifier` patterns. When users array-destructure `useQueries`
or `useSuspenseQueries` results (e.g. `const [q1, q2] = useQueries(...)`),
the individual variables were not tracked as unstable. This meant passing
them directly to React hook dependency arrays was never flagged.

Extend `collectVariableNames` to also handle `ArrayPattern` — including
plain identifier elements and rest elements.

Fixes #10746

* ci: apply automated fixes

---------

Co-authored-by: Dominik Dorfmeister 🔮 <office@dorfmeister.cc>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

.changeset/fix-no-unstable-deps-array-pattern.md

@@ -0,0 +1,5 @@
+---
+"@tanstack/eslint-plugin-query": patch
+---
+
+fix(no-unstable-deps): handle array-destructured useQueries and useSuspenseQueries results

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

@@ -82,6 +82,25 @@ const baseTestCases = {
           `,
         },
       ])
+      .concat([
+        {
+          name: `should pass when useQueries is array-destructured and element properties are used with ${reactHookAlias}`,
+          code: `
+            ${reactHookImport}
+            import { useQueries } from "@tanstack/react-query";
+
+            function Component() {
+              const [{ data }] = useQueries({
+                queries: [
+                  { queryKey: ['test'], queryFn: () => 'test' }
+                ]
+              });
+              const callback = ${reactHookInvocation}(() => { data }, [data]);
+              return;
+            }
+          `,
+        },
+      ])
       .concat([
         {
           name: `should pass when useQuery is imported from non-TanStack source and used with ${reactHookAlias}`,
@@ -181,6 +200,82 @@ const baseTestCases = {
             },
           ],
         },
+      ])
+      .concat([
+        {
+          name: `array-destructured useQueries element is passed to ${reactHookInvocation} as dependency`,
+          code: `
+            ${reactHookImport}
+            import { useQueries } from "@tanstack/react-query";
+
+            function Component() {
+              const [userQuery, postsQuery] = useQueries({
+                queries: [
+                  { queryKey: ['user'], queryFn: () => 'user' },
+                  { queryKey: ['posts'], queryFn: () => 'posts' }
+                ]
+              });
+              const callback = ${reactHookInvocation}(() => { userQuery.data }, [userQuery]);
+              return;
+            }
+          `,
+          errors: [
+            {
+              messageId: 'noUnstableDeps',
+              data: { reactHook: reactHookAlias, queryHook: 'useQueries' },
+            },
+          ],
+        },
+        {
+          name: `array-destructured useSuspenseQueries element is passed to ${reactHookInvocation} as dependency`,
+          code: `
+            ${reactHookImport}
+            import { useSuspenseQueries } from "@tanstack/react-query";
+
+            function Component() {
+              const [query] = useSuspenseQueries({
+                queries: [
+                  { queryKey: ['test'], queryFn: () => 'test' }
+                ]
+              });
+              const callback = ${reactHookInvocation}(() => { query.data }, [query]);
+              return;
+            }
+          `,
+          errors: [
+            {
+              messageId: 'noUnstableDeps',
+              data: {
+                reactHook: reactHookAlias,
+                queryHook: 'useSuspenseQueries',
+              },
+            },
+          ],
+        },
+        {
+          name: `rest element of array-destructured useQueries is passed to ${reactHookInvocation} as dependency`,
+          code: `
+            ${reactHookImport}
+            import { useQueries } from "@tanstack/react-query";
+
+            function Component() {
+              const [firstQuery, ...restQueries] = useQueries({
+                queries: [
+                  { queryKey: ['a'], queryFn: () => 'a' },
+                  { queryKey: ['b'], queryFn: () => 'b' }
+                ]
+              });
+              const callback = ${reactHookInvocation}(() => {}, [restQueries]);
+              return;
+            }
+          `,
+          errors: [
+            {
+              messageId: 'noUnstableDeps',
+              data: { reactHook: reactHookAlias, queryHook: 'useQueries' },
+            },
+          ],
+        },
       ]),
 }
 

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

@@ -64,6 +64,20 @@ export const rule = createRule({
     ) {
       if (pattern.type === AST_NODE_TYPES.Identifier) {
         trackedVariables[pattern.name] = queryHook
+      } else if (pattern.type === AST_NODE_TYPES.ArrayPattern) {
+        for (const element of pattern.elements) {
+          if (element === null) {
+            continue
+          }
+          if (element.type === AST_NODE_TYPES.Identifier) {
+            trackedVariables[element.name] = queryHook
+          } else if (
+            element.type === AST_NODE_TYPES.RestElement &&
+            element.argument.type === AST_NODE_TYPES.Identifier
+          ) {
+            trackedVariables[element.argument.name] = queryHook
+          }
+        }
       }
     }