@tanstack/eslint-plugin-query 5.53.0 → 5.57.0

package/src/rules/infinite-query-property-order/infinite-query-property-order.rule.ts

@@ -0,0 +1,114 @@
+import { AST_NODE_TYPES, ESLintUtils } from '@typescript-eslint/utils'
+
+import { getDocsUrl } from '../../utils/get-docs-url'
+import { detectTanstackQueryImports } from '../../utils/detect-react-query-imports'
+import { sortDataByOrder } from './infinite-query-property-order.utils'
+import { checkedProperties, infiniteQueryFunctions } from './constants'
+import type { InfiniteQueryFunctions } from './constants'
+import type { ExtraRuleDocs } from '../../types'
+
+const createRule = ESLintUtils.RuleCreator<ExtraRuleDocs>(getDocsUrl)
+
+const infiniteQueryFunctionsSet = new Set(infiniteQueryFunctions)
+function isInfiniteQueryFunction(node: any): node is InfiniteQueryFunctions {
+  return infiniteQueryFunctionsSet.has(node)
+}
+
+export const name = 'infinite-query-property-order'
+
+export const rule = createRule({
+  name,
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Ensure correct order of inference sensitive properties for infinite queries',
+      recommended: 'error',
+    },
+    messages: {
+      invalidOrder: 'Invalid order of properties for `{{function}}`.',
+    },
+    schema: [],
+    hasSuggestions: true,
+    fixable: 'code',
+  },
+  defaultOptions: [],
+
+  create: detectTanstackQueryImports((context) => {
+    return {
+      CallExpression(node) {
+        if (node.callee.type !== AST_NODE_TYPES.Identifier) {
+          return
+        }
+        const infiniteQueryFunction = node.callee.name
+        if (!isInfiniteQueryFunction(infiniteQueryFunction)) {
+          return
+        }
+        const argument = node.arguments[0]
+        if (argument === undefined || argument.type !== 'ObjectExpression') {
+          return
+        }
+
+        const allProperties = argument.properties
+        if (allProperties.length < 2) {
+          return
+        }
+
+        const properties = allProperties.flatMap((p) => {
+          if (
+            p.type === AST_NODE_TYPES.Property &&
+            p.key.type === AST_NODE_TYPES.Identifier
+          ) {
+            return { name: p.key.name, property: p }
+          } else if (p.type === AST_NODE_TYPES.SpreadElement) {
+            if (p.argument.type === AST_NODE_TYPES.Identifier) {
+              return { name: p.argument.name, property: p }
+            } else {
+              throw new Error('Unsupported spread element')
+            }
+          }
+          return []
+        })
+
+        const sortedProperties = sortDataByOrder(
+          properties,
+          checkedProperties,
+          'name',
+        )
+        if (sortedProperties === null) {
+          return
+        }
+        context.report({
+          node: argument,
+          data: { function: node.callee.name },
+          messageId: 'invalidOrder',
+          fix(fixer) {
+            const sourceCode = context.sourceCode
+
+            const text = sortedProperties.reduce(
+              (sourceText, specifier, index) => {
+                let text = ''
+                if (index < allProperties.length - 1) {
+                  text = sourceCode
+                    .getText()
+                    .slice(
+                      allProperties[index]!.range[1],
+                      allProperties[index + 1]!.range[0],
+                    )
+                }
+                return (
+                  sourceText + sourceCode.getText(specifier.property) + text
+                )
+              },
+              '',
+            )
+            return fixer.replaceTextRange(
+              [allProperties[0]!.range[0], allProperties.at(-1)!.range[1]],
+              text,
+            )
+          },
+        })
+      },
+    }
+  }),
+})

package/src/rules/infinite-query-property-order/infinite-query-property-order.utils.ts

@@ -0,0 +1,38 @@
+export function sortDataByOrder<T, TKey extends keyof T>(
+  data: Array<T> | ReadonlyArray<T>,
+  orderArray: Array<T[TKey]> | ReadonlyArray<T[TKey]>,
+  key: TKey,
+): Array<T> | null {
+  const orderMap = new Map(orderArray.map((item, index) => [item, index]))
+
+  // Separate items that are in orderArray from those that are not
+  const inOrderArray = data
+    .filter((item) => orderMap.has(item[key]))
+    .sort((a, b) => {
+      const indexA = orderMap.get(a[key])!
+      const indexB = orderMap.get(b[key])!
+
+      return indexA - indexB
+    })
+
+  const inOrderIterator = inOrderArray.values()
+
+  // `as boolean` is needed to avoid TS incorrectly inferring that wasResorted is always `true`
+  let wasResorted = false as boolean
+
+  const result = data.map((item) => {
+    if (orderMap.has(item[key])) {
+      const sortedItem = inOrderIterator.next().value!
+      if (sortedItem[key] !== item[key]) {
+        wasResorted = true
+      }
+      return sortedItem
+    }
+    return item
+  })
+
+  if (!wasResorted) {
+    return null
+  }
+  return result
+}

package/src/rules/no-unstable-deps/no-unstable-deps.rule.ts

@@ -24,7 +24,7 @@ export const rule = createRule({
     type: 'problem',
     docs: {
       description:
-        'Disallow putting the result of useMutation directly in a React hook dependency array',
+        'Disallow putting the result of query hooks directly in a React hook dependency array',
       recommended: 'error',
     },
     messages: {

package/src/rules.ts

@@ -2,6 +2,7 @@ import * as exhaustiveDeps from './rules/exhaustive-deps/exhaustive-deps.rule'
 import * as stableQueryClient from './rules/stable-query-client/stable-query-client.rule'
 import * as noRestDestructuring from './rules/no-rest-destructuring/no-rest-destructuring.rule'
 import * as noUnstableDeps from './rules/no-unstable-deps/no-unstable-deps.rule'
+import * as infiniteQueryPropertyOrder from './rules/infinite-query-property-order/infinite-query-property-order.rule'
 import type { ESLintUtils } from '@typescript-eslint/utils'
 import type { ExtraRuleDocs } from './types'
 
@@ -18,4 +19,5 @@ export const rules: Record<
   [stableQueryClient.name]: stableQueryClient.rule,
   [noRestDestructuring.name]: noRestDestructuring.rule,
   [noUnstableDeps.name]: noUnstableDeps.rule,
+  [infiniteQueryPropertyOrder.name]: infiniteQueryPropertyOrder.rule,
 }