@tanstack/eslint-plugin-query - ESLint: 9.19.0 TypeError: pluginQuery.configs.flat/recommended is not iterable

[onyedikachi23]

Describe the bug

The instruction on using the Flat Config recommended rules seems not to be compatible with Eslint v9.x:

import pluginQuery from '@tanstack/eslint-plugin-query'

export default [
  ...pluginQuery.configs['flat/recommended'],
  // Any other config...
]

Running npm run lint gives:

ESLint: 9.19.0

TypeError: pluginQuery.configs.flat/recommended is not iterable

Your minimal, reproducible example

not required

Steps to reproduce

Here's my eslint.config.js file:

/** @format */

import js from "@eslint/js";
import globals from "globals";
import reactHooks from "eslint-plugin-react-hooks";
import reactRefresh from "eslint-plugin-react-refresh";
import tseslint from "typescript-eslint";
import react from "eslint-plugin-react";
import pluginQuery from "@tanstack/eslint-plugin-query";

export default [
	...pluginQuery.configs["flat/recommended"],
	...tseslint.config(
		{ ignores: ["dist"] },
		{
			extends: [
				js.configs.recommended,
				...tseslint.configs.recommendedTypeChecked,
				...tseslint.configs.stylisticTypeChecked,
			],
			files: ["**/*.{ts,tsx}"],
			languageOptions: {
				ecmaVersion: "latest",
				globals: globals.browser,
				parserOptions: {
					project: ["./tsconfig.node.json", "./tsconfig.app.json"],
					tsconfigRootDir: import.meta.dirname,
				},
			},
			settings: { react: { version: "detect" } },
			plugins: {
				"react-hooks": reactHooks,
				"react-refresh": reactRefresh,
				react,
			},
			rules: {
				...reactHooks.configs.recommended.rules,
				"react-refresh/only-export-components": [
					"warn",
					{ allowConstantExport: true },
				],
				...react.configs.recommended.rules,
				...react.configs["jsx-runtime"].rules,
				"react/prop-types": "off",
			},
		}
	),
];

Expected behavior

The command npm run lint should lint the entire files having React query linting rules in consideration.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Ubuntu 24.04, Linux.

Tanstack Query adapter

react-query

TanStack Query version

v4.36.1

TypeScript version

v5.6.3

Additional context

I've tried adding them manually like this:

export default tseslint.config({
    ...,
    plugins: [
        ...,
        "@tanstack/query": pluginQuery,
    ],
    ...,
    rules: {
        ...,
        "react/prop-types": "off",
        "@tanstack/query/exhaustive-deps": "error",
        "@tanstack/query/no-rest-destructuring": "error",
        "@tanstack/query/stable-query-client": "error",
        "@tanstack/query/no-unstable-deps": "error",
        "@tanstack/query/infinite-query-property-order": "error",
    },
})

but I'm getting:

ESLint: 9.19.0

TypeError: Key "rules": Key "@tanstack/query/no-rest-destructuring": Could not find "no-rest-destructuring" in plugin "@tanstack/query".

[joseph0926]

You are using “@tanstack/query v4”.
If so, is “@tanstack/eslint-plugin-query” also using v4?
To reproduce your issue, I lowered both “@tanstack/query” and “@tanstack/eslint-plugin-query” to v4 and it was reproducible.

In that case, I think you should refer to the documentation for v4, not v5.

https://tanstack.com/query/v4/docs/eslint/eslint-plugin-query

[onyedikachi23]

Thanks, but I later used this workaround to fix it:

export default tseslint.config(
	{ ignores: ["dist"] },
	{
		plugins: {
			...,
			"@tanstack/query": pluginQuery
		},
		rules: {
			...,
			...pluginQuery.configs.recommended.rules
		},
	}
)

And even after I upgraded to v5.x, the workaround still works fine.