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

.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,79 @@ 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
+          }
+        }
       }
     }