TanStack Query comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes.
The plugin is a separate package that you need to install:
$ npm i -D @tanstack/eslint-plugin-query
# or
$ pnpm add -D @tanstack/eslint-plugin-query
# or
$ yarn add -D @tanstack/eslint-plugin-query
# or
$ bun add -D @tanstack/eslint-plugin-query
$ npm i -D @tanstack/eslint-plugin-query
# or
$ pnpm add -D @tanstack/eslint-plugin-query
# or
$ yarn add -D @tanstack/eslint-plugin-query
# or
$ bun add -D @tanstack/eslint-plugin-query
To enable all of the recommended rules for our plugin, add plugin:@tanstack/eslint-plugin-query/recommended in extends:
{
"extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
}
{
"extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]
}
Alternatively, add @tanstack/eslint-plugin-query to the plugins section of your .eslintrc configuration file:
{
"plugins": ["@tanstack/query"]
}
{
"plugins": ["@tanstack/query"]
}
Then configure the rules you want to use under the rules section:
{
"rules": {
"@tanstack/query/exhaustive-deps": "error",
"@tanstack/query/no-rest-destructuring": "warn",
"@tanstack/query/stable-query-client": "error"
}
}
{
"rules": {
"@tanstack/query/exhaustive-deps": "error",
"@tanstack/query/no-rest-destructuring": "warn",
"@tanstack/query/stable-query-client": "error"
}
}
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out