Support for new eslint flat config

[rifandani]

The eslint flat config is the new recommended approach. I hope the @tanstack/eslint-plugin-query could also support the new flat config.

More context:

From v8.21.0, eslint announced a new config system.
In the new system, .eslintrc* is no longer used. eslint.config.js would be the default config file name.
In eslint v8, the legacy system (.eslintrc*) would still be supported, while in eslint v9, only the new system would be supported.

And from v8.23.0, eslint CLI starts to look up eslint.config.js.
So, if your eslint is >=8.23.0, you're 100% ready to use the new config system.

You might want to check out the official blog posts,

• https://eslint.org/blog/2022/08/new-config-system-part-1/
• https://eslint.org/blog/2022/08/new-config-system-part-2/
• https://eslint.org/blog/2022/08/new-config-system-part-3/

and the official docs.

[SStranks]

Until the files are updated to support the new config system, you can utilize the plugin this way:

* eslint.config.js *
import { configs as ReactQueryConfigs, rules as ReactQueryRules } from '@tanstack/eslint-plugin-query';

export const EslintConfig = {
  plugins: {
    '@tanstack/eslint-plugin-query': { rules: ReactQueryRules, configs: ReactQueryConfigs },
  },
  rules: {
    '@tanstack/eslint-plugin-query/exhaustive-deps': 'error',
    '@tanstack/eslint-plugin-query/no-rest-destructuring': 'warn',
    '@tanstack/eslint-plugin-query/stable-query-client': 'error',
  },
};

[rifandani]

Thanks for answering my question @SStranks.
I'm curious, do we really need to define the rules (like '@tanstack/eslint-plugin-query/exhaustive-deps': 'error') one by one when we are using the new flat config? because if another eslint plugin has like hundreds of rules, than we also need to define it one by one

[SStranks]

Ordinarily we don't. With compatible plugins you can just spread them e.g.

import PluginReact from 'eslint-plugin-react';
export const EslintConfigReact = {
  // .... 
  rules: {
    ...PluginReact.configs.recommended.rules,
  },
};

I already tried importing the rules object from the index file and spreading it, but it gives the following error:

UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Error: Key "rules": Key "exhaustive-deps": Expected severity of "off", 0, "warn", 1, "error", or 2.".

They need to update the code to be compatible with the new system, basically.

[rifandani]

I see. I also thought it might be better to wait for the eslint v9 stable version out, therefore it could be aligned.
Anyway I'm also kinda make it works with this:

import * as tanstackQuery from '@tanstack/eslint-plugin-query'

{
    name: '@tanstack/query',
    files: ['src/**/*.{ts,tsx}'],
    plugins: {
      '@tanstack/query': {
        rules: tanstackQuery.rules,
      },
    },
    rules: tanstackQuery.configs.recommended.rules,
},

[amritk]

Yep I'm also using it like so

import * as reactQuery from '@tanstack/eslint-plugin-query'
import { reactConfig } from '@useless-developers/config'
import drizzle from 'eslint-plugin-drizzle'

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
  ...reactConfig,
  {
    plugins: {
      '@tanstack/query': reactQuery,
      drizzle,
    },
    rules: {
      ...drizzle.configs.recommended.rules,
      ...reactQuery.configs.recommended.rules,
    },
  },
  {
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json',
      },
    },
  },
  {
    ignores: ['**/.expo/**'],
  },
]

[SStranks]

Have you checked whether the rules actually work, and the ESLint server output when trying this syntax? If I use that syntax then ESLint throws an error, 'Server process exited with code 0'.

That's why I resorted to the syntax in my original post - no server error and all the rules function correctly.

[TkDodo]

Thanks for posting this. I have read all the blogposts and docs, but I'm still unsure what we need to do in order to support the flat config in a backwards compatible way. Our plugin exports configs and rules. Is that still the same with the flat config ? Everything I've read is concerned with how you use the flat config (understandably so), but not much about how you create a compatible plugin...

[TkDodo]

@Newbie012 FYI :)

[Newbie012]

I'll look into it

[bk-tho]

Hey ✌️ Just wanted to know about the status of this. The code snippets above do not work in our setup and only throw errors. This is the only thing blocking our upgrade to ESLint 9.

[Newbie012]

see #7253

[bk-tho]

Upon further investigation it seems to me that our errors stem from us using typescript-eslint@^7 and the tanstack query ESLint plugin depends on @typescript-eslint/utils@^6.20.0. I don't know the specifics but apparently the ASTUtils (and maybe more) need to be adapted in order to work with v7.

//edit: oh I see, it's being worked on already 👍

[SalahAdDin]

Is it implemented?

[SutuSebastian]

It's working with the latest docs updates:

https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query#flat-config-eslintconfigjs

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

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