fix(eslint-plugin-query): handle optional and non-null chaining in ex…

…haustive-deps (#8365) * fix: handle optional and non-null chaining in exhaustive-deps Fixed a false positive in the exhaustive-deps rule when using optional chaining and non-null assertions in query keys and functions. * ci: apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TanStack · Nov 28, 2024 · c402a2b · c402a2b
1 parent dc4ae50
commit c402a2b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/packages/eslint-plugin-query/src/__tests__/exhaustive-deps.test.ts b/packages/eslint-plugin-query/src/__tests__/exhaustive-deps.test.ts
@@ -473,6 +473,30 @@ ruleTester.run('exhaustive-deps', rule, {
       };  
       `,
     },
+    {
+      name: 'should pass with optional chaining as key',
+      code: `
+        function useTest(data?: any) {
+          return useQuery({
+            queryKey: ['query-name', data?.address],
+            queryFn: async () => sendQuery(data.address),
+            enabled: !!data?.address,
+          })
+        }
+      `,
+    },
+    {
+      name: 'should pass with optional chaining as key and non-null assertion in queryFn',
+      code: `
+        function useTest(data?: any) {
+          return useQuery({
+            queryKey: ['query-name', data?.address],
+            queryFn: async () => sendQuery(data!.address),
+            enabled: !!data?.address,
+          })
+        }
+      `,
+    },
   ],
   invalid: [
     {

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
@@ -102,13 +102,16 @@ export const rule = createRule({
 
         const existingKeys = ASTUtils.getNestedIdentifiers(queryKeyNode).map(
           (identifier) =>
-            ASTUtils.mapKeyNodeToText(identifier, context.sourceCode),
+            ASTUtils.mapKeyNodeToBaseText(identifier, context.sourceCode),
         )
 
         const missingRefs = relevantRefs
           .map((ref) => ({
             ref: ref,
-            text: ASTUtils.mapKeyNodeToText(ref.identifier, context.sourceCode),
+            text: ASTUtils.mapKeyNodeToBaseText(
+              ref.identifier,
+              context.sourceCode,
+            ),
           }))
           .filter(({ ref, text }) => {
             return (

diff --git a/packages/eslint-plugin-query/src/utils/ast-utils.ts b/packages/eslint-plugin-query/src/utils/ast-utils.ts
@@ -224,10 +224,20 @@ export const ASTUtils = {
     return sourceCode.getText(
       ASTUtils.traverseUpOnly(node, [
         AST_NODE_TYPES.MemberExpression,
+        AST_NODE_TYPES.TSNonNullExpression,
         AST_NODE_TYPES.Identifier,
       ]),
     )
   },
+  mapKeyNodeToBaseText(
+    node: TSESTree.Node,
+    sourceCode: Readonly<TSESLint.SourceCode>,
+  ) {
+    return ASTUtils.mapKeyNodeToText(node, sourceCode).replace(
+      /(\?\.|!\.)/g,
+      '.',
+    )
+  },
   isValidReactComponentOrHookName(
     identifier: TSESTree.Identifier | null | undefined,
   ) {