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@4
or
pnpm add -D @tanstack/eslint-plugin-query@4
or
yarn add -D @tanstack/eslint-plugin-query@4
Add @tanstack/eslint-plugin-query
to the plugins section of your .eslintrc
configuration file:
{ "plugins": ["@tanstack/query"]}
Then configure the rules you want to use under the rules section:
{ "rules": { "@tanstack/query/exhaustive-deps": "error", "@tanstack/query/no-deprecated-options": "error", "@tanstack/query/prefer-query-object-syntax": "error", "@tanstack/query/stable-query-client": "error" }}
You can also enable all the recommended rules for our plugin. Add plugin:@tanstack/eslint-plugin-query/recommended
in extends:
{ "extends": ["plugin:@tanstack/eslint-plugin-query/recommended"]}
“This course is the best way to learn how to use React Query in real-world applications.”—Tanner LinsleyCheck it out