feat: add invalidate-queries-no-inline-query

Author: danielpza

README.md

@@ -21,9 +21,10 @@ export default [
 💼 Configurations enabled in.\
 ✅ Set in the `recommended` configuration.
 
-| Name                                                                 | Description                                                                                                                                          | 💼 |
-| :------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :- |
-| [use-query-no-inline-query](docs/rules/use-query-no-inline-query.md) | Enforces useQuery (and family) hooks use some form of query constructor pattern. Will error if queryKey or queryFn properties are passed to the hook | ✅  |
+| Name                                                                                   | Description                                                                                                                                          | 💼 |
+| :------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- | :- |
+| [invalidate-queries-no-inline-query](docs/rules/invalidate-queries-no-inline-query.md) | Enforces queryClient.invalidateQueries don't have inline queries. Will error if queryKey or queryFn properties are passed to the function            | ✅  |
+| [use-query-no-inline-query](docs/rules/use-query-no-inline-query.md)                   | Enforces useQuery (and family) hooks use some form of query constructor pattern. Will error if queryKey or queryFn properties are passed to the hook | ✅  |
 
 <!-- end auto-generated rules list -->
 <!-- prettier-ignore-end -->

docs/rules/invalidate-queries-no-inline-query.md

@@ -0,0 +1,41 @@
+# Enforces queryClient.invalidateQueries don't have inline queries. Will error if queryKey or queryFn properties are passed to the function (`react-query-options/invalidate-queries-no-inline-query`)
+
+💼 This rule is enabled in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Fail
+
+```js
+queryClient.invalidateQueries({
+  queryKey: [/**/],
+  /* additional properties */
+})
+
+queryClient.invalidateQueries({
+  queryFn: () => { /**/ }
+  /* additional properties */
+})
+```
+
+## Pass
+
+```js
+const query = {
+  queryKey: [/**/],
+  queryFn: () => { /**/ }
+}
+
+const queryBuilder = () => ({
+  queryKey: [/**/],
+  queryFn: () => { /**/ }
+})
+
+queryClient.invalidateQueries(query)
+queryClient.invalidateQueries(queryBuilder())
+queryClient.invalidateQueries({
+  ...queryBuilder(),
+  /* additional properties */
+  select: (data) => data
+})
+```

docs/rules/use-query-no-inline-query.md

@@ -4,8 +4,6 @@
 
 <!-- end auto-generated rule header -->
 
-Enforces useQuery (and family) hooks use some form of query constructor pattern. Will error if queryKey or queryFn properties are passed to the hook
-
 ## Fail
 
 ```js

src/index.ts

@@ -1,7 +1,10 @@
 import useQueryNoInlineQuery from "./rules/use-query-no-inline-query.js";
+import invalidateQueriesNoInlineQuery from "./rules/invalidate-queries-no-inline-query.js";
 
 import pkg from "../package.json" with { type: "json" };
 
+const rules = [useQueryNoInlineQuery, invalidateQueriesNoInlineQuery];
+
 const reactQueryOptions = {
   meta: {
     name: pkg.name,
@@ -11,9 +14,7 @@ const reactQueryOptions = {
   get configs() {
     return configs;
   },
-  rules: {
-    [useQueryNoInlineQuery.name]: useQueryNoInlineQuery.rule,
-  },
+  rules: Object.fromEntries(rules.map((rule) => [rule.name, rule.rule])),
 };
 
 const configs = {
@@ -22,10 +23,12 @@ const configs = {
       plugins: {
         [reactQueryOptions.meta.namespace]: reactQueryOptions,
       },
-      rules: {
-        [`${reactQueryOptions.meta.namespace}/${useQueryNoInlineQuery.name}`]:
+      rules: Object.fromEntries(
+        rules.map((rule) => [
+          [`${reactQueryOptions.meta.namespace}/${rule.name}`],
           "error",
-      },
+        ]),
+      ),
     },
   ],
 };

src/rules/invalidate-queries-no-inline-query.test.ts

@@ -0,0 +1,33 @@
+import "../_test/setup.js";
+
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import requireQueryOptions from "./invalidate-queries-no-inline-query.js";
+
+const ruleTester = new RuleTester({});
+
+ruleTester.run(requireQueryOptions.name, requireQueryOptions.rule, {
+  valid: [
+    { code: `queryClient.invalidateQueries(usersQuery)` },
+    { code: `queryClient.invalidateQueries({ ...usersQuery })` },
+    { code: `queryClient.invalidateQueries({ ...usersQuery() })` },
+  ],
+  invalid: [
+    {
+      code: `queryClient.invalidateQueries({ queryKey: [] })`,
+      errors: [{ messageId: "no-inline-query" }],
+    },
+    {
+      code: `queryClient.invalidateQueries({ ...queryOptions, queryKey: [] })`,
+      errors: [{ messageId: "no-inline-query" }],
+    },
+    {
+      code: `queryClient.invalidateQueries({ queryFn: () => {} })`,
+      errors: [{ messageId: "no-inline-query" }],
+    },
+    {
+      code: `queryClient.invalidateQueries({ ...queryOptions, queryFn: () => {} })`,
+      errors: [{ messageId: "no-inline-query" }],
+    },
+  ],
+});

src/rules/invalidate-queries-no-inline-query.ts

@@ -0,0 +1,45 @@
+import { AST_NODE_TYPES } from "@typescript-eslint/utils";
+import { createRule, isValidQueryNode } from "../utils.js";
+
+const name = "invalidate-queries-no-inline-query";
+
+export default {
+  name,
+  rule: createRule({
+    name,
+    defaultOptions: [],
+    meta: {
+      type: "suggestion",
+      messages: {
+        "no-inline-query": "Expected query hook to use queryOptions pattern",
+      },
+      docs: {
+        description:
+          "Enforces queryClient.invalidateQueries don't have inline queries. Will error if queryKey or queryFn properties are passed to the function",
+      },
+      schema: [],
+    },
+    create(context) {
+      return {
+        CallExpression(node) {
+          if (
+            // check queryClient.invalidateQueries
+            node.callee.type === AST_NODE_TYPES.MemberExpression &&
+            node.callee.object.type === AST_NODE_TYPES.Identifier &&
+            node.callee.object.name === "queryClient" &&
+            node.callee.property.type === AST_NODE_TYPES.Identifier &&
+            node.callee.property.name === "invalidateQueries"
+          ) {
+            if (!node.arguments[0]) return;
+
+            if (!isValidQueryNode(node.arguments[0]))
+              context.report({
+                messageId: "no-inline-query",
+                node,
+              });
+          }
+        },
+      };
+    },
+  }),
+};

src/rules/use-query-no-inline-query.ts

@@ -1,13 +1,5 @@
-import {
-  AST_NODE_TYPES,
-  ESLintUtils,
-  TSESTree,
-} from "@typescript-eslint/utils";
-
-const createRule = ESLintUtils.RuleCreator(
-  (name) =>
-    `https://github.com/danielpza/eslint-plugin-react-query/docs/rules/${name}.md`,
-);
+import { AST_NODE_TYPES } from "@typescript-eslint/utils";
+import { createRule, isValidQueryNode } from "../utils.js";
 
 const useQueryHooks = [
   // see https://tanstack.com/query/latest/docs/framework/react/reference/useQuery
@@ -19,23 +11,6 @@ const useQueryHooks = [
   "useSuspenseInfiniteQuery",
 ];
 
-const invalidProperties = ["queryKey", "queryFn"];
-
-function isValidQueryNode(queryNode: TSESTree.Node) {
-  // we only care about object expressions
-  if (queryNode.type !== AST_NODE_TYPES.ObjectExpression) return true;
-
-  // check if any of the properties is queryKey or queryFn
-  const hasInvalidProperties = queryNode.properties.find(
-    (property) =>
-      property.type === AST_NODE_TYPES.Property &&
-      property.key.type === AST_NODE_TYPES.Identifier &&
-      invalidProperties.includes(property.key.name),
-  );
-
-  return !hasInvalidProperties;
-}
-
 const name = "use-query-no-inline-query";
 
 export default {

src/utils.ts

@@ -0,0 +1,27 @@
+import {
+  AST_NODE_TYPES,
+  ESLintUtils,
+  TSESTree,
+} from "@typescript-eslint/utils";
+
+export const INVALID_QUERY_PROPERTIES = ["queryKey", "queryFn"];
+
+export const createRule = ESLintUtils.RuleCreator(
+  (name) =>
+    `https://github.com/danielpza/eslint-plugin-react-query/docs/rules/${name}.md`,
+);
+
+export function isValidQueryNode(queryNode: TSESTree.Node) {
+  // we only care about object expressions
+  if (queryNode.type !== AST_NODE_TYPES.ObjectExpression) return true;
+
+  // check if any of the properties is queryKey or queryFn
+  const hasInvalidProperties = queryNode.properties.find(
+    (property) =>
+      property.type === AST_NODE_TYPES.Property &&
+      property.key.type === AST_NODE_TYPES.Identifier &&
+      INVALID_QUERY_PROPERTIES.includes(property.key.name),
+  );
+
+  return !hasInvalidProperties;
+}