fix(eslint-plugin-query): run exhaustive dep check on referenced quer…

…y key (#4480) * run exhaustive dep check on referenced query key * fix various eslint issues
TanStack · Nov 11, 2022 · 82adc95 · 82adc95
1 parent 67ddf17
commit 82adc95
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/packages/eslint-plugin-query/src/rules/exhaustive-deps/exhaustive-deps.rule.ts b/packages/eslint-plugin-query/src/rules/exhaustive-deps/exhaustive-deps.rule.ts
@@ -56,13 +56,26 @@ export const rule = createRule({
           return
         }
 
-        if (queryKey.value.type !== AST_NODE_TYPES.ArrayExpression) {
+        let queryKeyNode = queryKey.value
+
+        if (queryKeyNode.type === AST_NODE_TYPES.Identifier) {
+          const expression = ASTUtils.getReferencedExpressionByIdentifier({
+            context,
+            node: queryKeyNode,
+          })
+
+          if (expression?.type === AST_NODE_TYPES.ArrayExpression) {
+            queryKeyNode = expression
+          }
+        }
+
+        if (queryKeyNode.type !== AST_NODE_TYPES.ArrayExpression) {
           // TODO support query key factory
           return
         }
 
         const sourceCode = context.getSourceCode()
-        const queryKeyValue = queryKey.value
+        const queryKeyValue = queryKeyNode
         const refs = ASTUtils.getExternalRefs({
           scopeManager,
           node: queryFn.value,

diff --git a/packages/eslint-plugin-query/src/rules/exhaustive-deps/exhaustive-deps.test.ts b/packages/eslint-plugin-query/src/rules/exhaustive-deps/exhaustive-deps.test.ts
@@ -181,6 +181,7 @@ ruleTester.run('exhaustive-deps', rule, {
           suggestions: [
             {
               messageId: 'fixTo',
+              // eslint-disable-next-line no-template-curly-in-string
               data: { result: '["entity/${id}", id]' },
               output: normalizeIndent`
                 const id = 1;
@@ -205,6 +206,7 @@ ruleTester.run('exhaustive-deps', rule, {
           suggestions: [
             {
               messageId: 'fixTo',
+              // eslint-disable-next-line no-template-curly-in-string
               data: { result: '[`entity/${a}`, b]' },
               output: normalizeIndent`
                 const a = 1;
@@ -343,5 +345,32 @@ ruleTester.run('exhaustive-deps', rule, {
         },
       ],
     },
+    {
+      name: 'should fail when a queryKey is a reference of an array expression with a missing dep',
+      code: normalizeIndent`
+        const x = 5;
+        const queryKey = ['foo']
+        useQuery({ queryKey, queryFn: () => x })
+      `,
+      errors: [
+        {
+          messageId: 'missingDeps',
+          data: { deps: 'x' },
+          suggestions: [
+            {
+              messageId: 'fixTo',
+              data: {
+                result: "['foo', x]",
+              },
+              output: normalizeIndent`
+                const x = 5;
+                const queryKey = ['foo', x]
+                useQuery({ queryKey, queryFn: () => x })
+              `,
+            },
+          ],
+        },
+      ],
+    },
   ],
 })
diff --git a/packages/eslint-plugin-query/src/utils/detect-react-query-imports.ts b/packages/eslint-plugin-query/src/utils/detect-react-query-imports.ts
@@ -26,6 +26,8 @@ export function detectTanstackQueryImports(create: EnhancedCreate): Create {
           if (specifier.type === 'ImportSpecifier') {
             return node.name === specifier.local.name
           }
+
+          return false
         })
       },
     }