ESLint Plugin Query

TanStack Query comes with its own ESLint plugin. This plugin is used to enforce best practices and to help you avoid common mistakes.

Installation#

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

Flat Config (eslint.config.js)#

Recommended setup#

To enable all of the recommended rules for our plugin, add the following config:

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

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

Recommended strict setup#

The flat/recommended-strict config extends flat/recommended with additional opinionated rules that enforce best practices more aggressively.

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

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

Custom setup#

Alternatively, you can load the plugin and configure only the rules you want to use:

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

export default [
  {
    plugins: {
      '@tanstack/query': pluginQuery,
    },
    rules: {
      '@tanstack/query/exhaustive-deps': 'error',
    },
  },
  // Any other config...
]

Legacy Config (.eslintrc)#

Recommended setup#

To enable all of the recommended rules for our plugin, add plugin:@tanstack/query/recommended in extends:

{
  "extends": ["plugin:@tanstack/query/recommended"]
}

Recommended strict setup#

The recommendedStrict config extends recommended with additional opinionated rules:

{
  "extends": ["plugin:@tanstack/query/recommendedStrict"]
}

Custom setup#

Alternatively, add @tanstack/query to the plugins section, and configure the rules you want to use:

{
  "plugins": ["@tanstack/query"],
  "rules": {
    "@tanstack/query/exhaustive-deps": "error"
  }
}

Oxlint#

The plugin can also be used with Oxlint through its JS plugins support, which is currently in alpha. Rule names are the same as in ESLint.

oxlint.config.ts#

Recommended setup#

To enable all of the recommended rules for our plugin, add the plugin to jsPlugins and spread the rules of the recommended config:

import { defineConfig } from 'oxlint'
import pluginQuery from '@tanstack/eslint-plugin-query'

export default defineConfig({
  jsPlugins: ['@tanstack/eslint-plugin-query'],
  rules: {
    ...pluginQuery.configs.recommended.rules,
  },
})

Use pluginQuery.configs.recommendedStrict.rules instead for the recommended strict setup.

Custom setup#

Alternatively, configure only the rules you want to use:

import { defineConfig } from 'oxlint'

export default defineConfig({
  jsPlugins: ['@tanstack/eslint-plugin-query'],
  rules: {
    '@tanstack/query/exhaustive-deps': 'error',
  },
})

.oxlintrc.json#

A JSON config cannot import the configs of our plugin, so add the plugin to jsPlugins and configure the rules you want to use:

{
  "jsPlugins": ["@tanstack/eslint-plugin-query"],
  "rules": {
    "@tanstack/query/exhaustive-deps": "error"
  }
}

Rules#

• @tanstack/query/exhaustive-deps
• @tanstack/query/no-rest-destructuring
• @tanstack/query/stable-query-client
• @tanstack/query/no-unstable-deps
• @tanstack/query/infinite-query-property-order
• @tanstack/query/no-void-query-fn
• @tanstack/query/mutation-property-order
• @tanstack/query/prefer-query-options