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

npm i -D @tanstack/eslint-plugin-query

pnpm add -D @tanstack/eslint-plugin-query

pnpm add -D @tanstack/eslint-plugin-query

yarn add -D @tanstack/eslint-plugin-query

yarn add -D @tanstack/eslint-plugin-query

bun add -D @tanstack/eslint-plugin-query

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...
]

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...
]

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...
]

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:

json

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

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

Recommended strict setup

The recommendedStrict config extends recommended with additional opinionated rules:

json

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

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

Custom setup

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

json

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

{
  "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,
  },
})

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',
  },
})

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:

json

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

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

Note

no-void-query-fn needs type information, which Oxlint does not provide to JS plugins yet, so the rule does not report anything under Oxlint.

Installation

Flat Config (eslint.config.js)

Recommended setup

Recommended strict setup

Custom setup

Legacy Config (.eslintrc)

Recommended setup

Recommended strict setup

Custom setup

Oxlint

oxlint.config.ts

Recommended setup

Custom setup

.oxlintrc.json

Rules

Want to Skip the Docs?