Eslint plugin does not work

[JakubGIT]

I've tried to get the eslint plugin to work, but...so far no success. What do I do wrong? At the moment I have the new flat config, but I also tried the legacy one with the same result.

repo details

• react18
• typescript

package.json

"@tanstack/react-query": "^5.60.5",
"eslint": "9.14.0",
"@tanstack/eslint-plugin-query": "^5.60.1",

eslint.config.js

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import pluginJestDom from 'eslint-plugin-jest-dom';
import pluginReactHooks from 'eslint-plugin-react-hooks';
import pluginQuery from '@tanstack/eslint-plugin-query';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    ignores: [
      'dist/', // exclude specific folder
      'coverage/',
      'public/',
      '**/*.js', // exclude all JavaScript files,
      '**/*generated*.*',
    ],
  },
  {
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      globals: globals.browser,
      parser: '@typescript-eslint/parser',
      parserOptions: {
        sourceType: 'module',
      },
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  pluginJestDom.configs['flat/recommended'],
  {
    plugins: {
      'react-hooks': pluginReactHooks,
      react: pluginReact,
      '@tanstack/query': pluginQuery,
    },
    rules: {
      ...pluginQuery.configs.recommended.rules,
      ...pluginReactHooks.configs.recommended.rules,
      '@typescript-eslint/no-unused-expressions': 'off',
      'react/react-in-jsx-scope': 'off',
      curly: 'error',
    },
    settings: {
      react: {
        version: 'detect',
      },
    },
  },
];

code which should the plugin react to

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export const App:  = () => {
  return (
    <QueryClientProvider client={new QueryClient()}>
    </QueryClientProvider>
  );
};

What do I do wrong? Any help much appreciated.

[JakubGIT]

Ok, it recognizes missing dependencies in a dependent query key, so it works. I still don't understand, why it don't warn about the query client in the example I brought though... it is not a big deal though.

[sowizz]

It doesn't warn about the query client because the stable-query-client rule doesn't work with arrow-function components and hooks.

Just stumbled upon a very similar issue myself.

When the code is written this way (arrow function):

const useQueryClient = () => {
  const customMutationCache = useCustomMutationCache()
  const client = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 0,
      },
    },
    mutationCache: customMutationCache,
  })

  return client
}

it doesn't flag the unstable client. This version (named function):

function useQueryClient() {
  const customMutationCache = useCustomMutationCache()
  const client = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        retry: 0,
      },
    },
    mutationCache: customMutationCache,
  })

  return client
}

produces the following warning:

QueryClient is not stable. It should be either extracted from the component or wrapped in React.useState.
See https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable

There is one more issue, this code:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export function App () {
  return (
    <QueryClientProvider client={new QueryClient()}>
    </QueryClientProvider>
  );
};

still doesn't produce the warning, since there is another limitation: the instance has to be assigned to a variable for the rule to work properly, like so:

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

export function App () {
  const queryClient = new QueryClient();
  return (
    <QueryClientProvider client={queryClient}>
    </QueryClientProvider>
  );
};

[lMysticl]

@sowizz I reproduced the detection gaps in a small, valid TSX configuration, with a working positive control. This is on Node 22.23.2, ESLint 9.14.0 and @typescript-eslint/parser 8.14.0; I checked published plugin versions 5.60.1 and 5.104.5.

Pattern	5.60.1	5.104.5
Named function, local const client = new QueryClient()	reports	reports
Arrow component, local client	no report	no report
Arrow custom hook, local client	no report	no report
Named component, client={new QueryClient()}	no report	no report
Lazy useState client	no report, expected	no report, expected
Async server-component case	no report, documented exception	no report, documented exception

The current rule filters out a NewExpression unless its parent is a VariableDeclarator, which explains the inline-JSX case. For the arrow cases, the ancestor helper returns the arrow function and the rule checks fnAncestor.id; the variable's name is not used there.

For the client component itself, the documented stable pattern remains:

const [queryClient] = React.useState(() => new QueryClient())

return (
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
)

One reproduction detail matters for the older plugin: its import detector expects importKind === 'value'. With default Espree, my 5.60.1 positive control did not fire; changing to the TypeScript parser made it fire, while the three gaps above remained. A regression test should therefore include a reporting positive control and record the parser, rather than treating every zero-diagnostic result as the same issue.

This verifies the rule behavior in these minimal cases, not the full historical application configuration.

Minimal reproduction

Two files, commands, and expected result

Save these two files in an empty directory. No React application or bundler is required: the TSX samples are passed directly to ESLint.

package.json

{
  "name": "github-answer-eslint-reproduction",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@typescript-eslint/parser": "8.14.0",
    "eslint": "9.14.0",
    "query-current": "npm:@tanstack/eslint-plugin-query@5.104.5",
    "query-original": "npm:@tanstack/eslint-plugin-query@5.60.1",
    "typescript": "5.6.3"
  }
}

repro.cjs

const fs = require('node:fs');
const { Linter } = require('eslint');
const parser = require('@typescript-eslint/parser');
const packages = [['5.60.1', require('query-original')], ['5.104.5', require('query-current')]];
const header = "import React from 'react';\nimport { QueryClient, QueryClientProvider } from '@tanstack/react-query';\n";
const cases = [
  { name: 'named_function_local', expected: 1, code: "export function App() { const client = new QueryClient(); return <QueryClientProvider client={client} />; }" },
  { name: 'arrow_function_local', expected: 1, code: "export const App = () => { const client = new QueryClient(); return <QueryClientProvider client={client} />; };" },
  { name: 'arrow_hook_local', expected: 1, code: "export const useAppClient = () => { const client = new QueryClient(); return client; };" },
  { name: 'named_function_inline_jsx', expected: 1, code: "export function App() { return <QueryClientProvider client={new QueryClient()} />; }" },
  { name: 'lazy_state_control', expected: 0, code: "export function App() { const [client] = React.useState(() => new QueryClient()); return <QueryClientProvider client={client} />; }" },
  { name: 'async_server_control', expected: 0, code: "export async function App() { const client = new QueryClient(); return client; }" },
];
const results = [];
for (const [version, loaded] of packages) {
  const plugin = loaded.default || loaded;
  const linter = new Linter();
  for (const fixture of cases) {
    const messages = linter.verify(header + fixture.code, [{
      files: ['**/*.tsx'],
      languageOptions: { parser, ecmaVersion: 2022, sourceType: 'module', parserOptions: { ecmaFeatures: { jsx: true } } },
      plugins: { '@tanstack/query': plugin },
      rules: { '@tanstack/query/stable-query-client': 'error' },
    }], { filename: 'fixture.tsx' });
    const diagnostics = messages.filter(m => m.ruleId === '@tanstack/query/stable-query-client');
    const unexpected = messages.filter(m => m.ruleId !== '@tanstack/query/stable-query-client');
    results.push({ version, fixture: fixture.name, expected: fixture.expected, actual: diagnostics.length, matchesExpected: diagnostics.length === fixture.expected && unexpected.length === 0, diagnostics, unexpected });
    console.log(JSON.stringify({ version, fixture: fixture.name, expected: fixture.expected, actual: diagnostics.length, unexpected: unexpected.length }));
  }
}
const report = {
  node: process.version, platform: process.platform,
  parser: require('@typescript-eslint/parser/package.json').version,
  eslint: require('eslint/package.json').version,
  installed: { original: require('query-original/package.json').version, current: require('query-current/package.json').version },
  results,
  unreportedUnstableClients: results.filter(r => r.expected > 0 && r.actual === 0).length,
  controlsPass: results.filter(r => r.expected === 0 || r.fixture === 'named_function_local').every(r => r.matchesExpected),
  parserOrConfigurationErrors: results.flatMap(r => r.unexpected),
};
fs.writeFileSync('result.json', JSON.stringify(report, null, 2) + '\n');
process.exitCode = results.every(r => r.matchesExpected) ? 0 : 1;

Run with Node 22.23.2:

npm install --ignore-scripts --no-audit --no-fund
node repro.cjs

Expected on the two checked releases: the process exits with 1, unreportedUnstableClients is 6, controlsPass is true, and parserOrConfigurationErrors is empty. The six missing diagnostics are the three unstable patterns per version in the table above. Exit 1 is intentional: these assertions expose the rule's detection gaps. result.json contains the full diagnostic matrix.

[sowizz]

Might be a good idea to get one of the maintainers' attention, but I don't know how or whether this is worth their time.