@tanstack/eslint-plugin-query 5.0.0-rc.1 → 5.0.0-rc.4

package/src/rules/stable-query-client/stable-query-client.test.ts

@@ -0,0 +1,195 @@
+import { ESLintUtils } from '@typescript-eslint/utils'
+import { normalizeIndent } from '../../utils/test-utils'
+import { rule } from './stable-query-client.rule'
+
+const ruleTester = new ESLintUtils.RuleTester({
+  parser: '@typescript-eslint/parser',
+  settings: {},
+})
+
+ruleTester.run('stable-query-client', rule, {
+  valid: [
+    {
+      name: 'QueryClient is stable when wrapped in React.useState',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const [queryClient] = React.useState(() => new QueryClient());
+          return;
+        }
+      `,
+    },
+    {
+      name: 'QueryClient is stable when wrapped in useState',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const [queryClient] = useState(() => new QueryClient());
+          return;
+        }
+      `,
+    },
+    {
+      name: 'QueryClient is stable when wrapped in React.useMemo',
+      code: normalizeIndent`
+          import { QueryClient } from "@tanstack/react-query";
+  
+          function Component() {
+            const [queryClient] = React.useMemo(() => new QueryClient(), []);
+            return;
+          }
+        `,
+    },
+    {
+      name: 'QueryClient is stable when wrapped in useAnything',
+      code: normalizeIndent`
+          import { QueryClient } from "@tanstack/react-query";
+  
+          function Component() {
+            const [queryClient] = useAnything(() => new QueryClient());
+            return;
+          }
+        `,
+    },
+    {
+      name: 'QueryClient is imported from a non-tanstack package',
+      code: normalizeIndent`
+        import { QueryClient } from "other-library";
+
+        function Component() {
+          const queryClient = new QueryClient();
+          return;
+        }
+      `,
+    },
+    {
+      name: 'QueryClient is not imported from @tanstack/react-query',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/solid-query";
+
+        function Component() {
+          const queryClient = new QueryClient();
+          return;
+        }
+      `,
+    },
+    {
+      name: 'QueryClient is invoked outside of a function',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/solid-query";
+
+        const queryClient = new QueryClient();
+
+        function Component() {
+          return;
+        }
+      `,
+    },
+    {
+      name: 'QueryClient is invoked in a non-component function',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/solid-query";
+
+        function someFn() {
+          const queryClient = new QueryClient();
+          return;
+        }
+      `,
+    },
+    {
+      name: 'QueryClient is invoked in an async (react server) component',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/solid-query";
+
+        async function AsyncComponent() {
+          const queryClient = new QueryClient();
+          return;
+        }
+      `,
+    },
+  ],
+  invalid: [
+    {
+      name: 'QueryClient is not stable when it is not wrapped in React.useState in component',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const queryClient = new QueryClient();
+          return;
+        }
+      `,
+      output: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const [queryClient] = React.useState(() => new QueryClient());
+          return;
+        }
+      `,
+      errors: [{ messageId: 'unstable' }],
+    },
+    {
+      name: 'QueryClient is not stable when it is not wrapped in React.useState in custom hook',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function useHook() {
+          const queryClient = new QueryClient();
+          return;
+        }
+      `,
+      output: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function useHook() {
+          const [queryClient] = React.useState(() => new QueryClient());
+          return;
+        }
+      `,
+      errors: [{ messageId: 'unstable' }],
+    },
+    {
+      name: 'preserve QueryClient options',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const queryClient = new QueryClient({ defaultOptions: { /* */ } });
+          return;
+        }
+      `,
+      output: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const [queryClient] = React.useState(() => new QueryClient({ defaultOptions: { /* */ } }));
+          return;
+        }
+      `,
+      errors: [{ messageId: 'unstable' }],
+    },
+    {
+      name: 'preserve QueryClient variable declarator name',
+      code: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const customName = new QueryClient();
+          return;
+        }
+      `,
+      output: normalizeIndent`
+        import { QueryClient } from "@tanstack/react-query";
+
+        function Component() {
+          const [customName] = React.useState(() => new QueryClient());
+          return;
+        }
+      `,
+      errors: [{ messageId: 'unstable' }],
+    },
+  ],
+})

package/src/rules.ts

@@ -1,5 +1,7 @@
 import * as exhaustiveDeps from './rules/exhaustive-deps.rule'
+import * as stableQueryClient from './rules/stable-query-client/stable-query-client.rule'
 
 export const rules = {
   [exhaustiveDeps.name]: exhaustiveDeps.rule,
+  [stableQueryClient.name]: stableQueryClient.rule,
 }

package/src/utils/ast-utils.ts

@@ -203,27 +203,37 @@ export const ASTUtils = {
       ]),
     )
   },
-  isValidReactComponentOrHookName(identifier: TSESTree.Identifier | null) {
-    return identifier !== null && /^(use|[A-Z])/.test(identifier.name)
+  isValidReactComponentOrHookName(
+    identifier: TSESTree.Identifier | null | undefined,
+  ) {
+    return (
+      identifier !== null &&
+      identifier !== undefined &&
+      /^(use|[A-Z])/.test(identifier.name)
+    )
   },
   getFunctionAncestor(
     context: Readonly<RuleContext<string, ReadonlyArray<unknown>>>,
   ) {
-    return context.getAncestors().find((x) => {
-      if (x.type === AST_NODE_TYPES.FunctionDeclaration) {
-        return true
+    for (const ancestor of context.getAncestors()) {
+      if (ancestor.type === AST_NODE_TYPES.FunctionDeclaration) {
+        return ancestor
       }
 
-      return (
-        x.parent?.type === AST_NODE_TYPES.VariableDeclarator &&
-        x.parent.id.type === AST_NODE_TYPES.Identifier &&
-        ASTUtils.isNodeOfOneOf(x, [
+      if (
+        ancestor.parent?.type === AST_NODE_TYPES.VariableDeclarator &&
+        ancestor.parent.id.type === AST_NODE_TYPES.Identifier &&
+        ASTUtils.isNodeOfOneOf(ancestor, [
           AST_NODE_TYPES.FunctionDeclaration,
           AST_NODE_TYPES.FunctionExpression,
           AST_NODE_TYPES.ArrowFunctionExpression,
         ])
-      )
-    })
+      ) {
+        return ancestor
+      }
+    }
+
+    return undefined
   },
   getReferencedExpressionByIdentifier(params: {
     node: TSESTree.Node
@@ -242,6 +252,22 @@ export const ASTUtils = {
 
     return resolvedNode.init
   },
+  getClosestVariableDeclarator(node: TSESTree.Node) {
+    let currentNode: TSESTree.Node | undefined = node
+
+    while (
+      currentNode !== undefined &&
+      currentNode.type !== AST_NODE_TYPES.Program
+    ) {
+      if (currentNode.type === AST_NODE_TYPES.VariableDeclarator) {
+        return currentNode
+      }
+
+      currentNode = currentNode.parent
+    }
+
+    return undefined
+  },
   getNestedReturnStatements(
     node: TSESTree.Node,
   ): Array<TSESTree.ReturnStatement> {

package/src/utils/detect-react-query-imports.ts

@@ -1,4 +1,5 @@
-import type { ESLintUtils, TSESLint, TSESTree } from '@typescript-eslint/utils'
+import { TSESTree } from '@typescript-eslint/utils'
+import type { ESLintUtils, TSESLint } from '@typescript-eslint/utils'
 
 type Create = Parameters<
   ReturnType<typeof ESLintUtils.RuleCreator>
@@ -7,6 +8,10 @@ type Create = Parameters<
 type Context = Parameters<Create>[0]
 type Options = Parameters<Create>[1]
 type Helpers = {
+  isSpecificTanstackQueryImport: (
+    node: TSESTree.Identifier,
+    source: string,
+  ) => boolean
   isTanstackQueryImport: (node: TSESTree.Identifier) => boolean
 }
 
@@ -21,9 +26,23 @@ export function detectTanstackQueryImports(create: EnhancedCreate): Create {
     const tanstackQueryImportSpecifiers: Array<TSESTree.ImportClause> = []
 
     const helpers: Helpers = {
+      isSpecificTanstackQueryImport(node, source) {
+        return !!tanstackQueryImportSpecifiers.find((specifier) => {
+          if (
+            specifier.type === TSESTree.AST_NODE_TYPES.ImportSpecifier &&
+            specifier.parent?.type ===
+              TSESTree.AST_NODE_TYPES.ImportDeclaration &&
+            specifier.parent.source.value === source
+          ) {
+            return node.name === specifier.local.name
+          }
+
+          return false
+        })
+      },
       isTanstackQueryImport(node) {
         return !!tanstackQueryImportSpecifiers.find((specifier) => {
-          if (specifier.type === 'ImportSpecifier') {
+          if (specifier.type === TSESTree.AST_NODE_TYPES.ImportSpecifier) {
             return node.name === specifier.local.name
           }