Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

eslint exhaustive-deps incorrectly labelling constant value as key dependency #8326

Closed
MarkSFrancis opened this issue Nov 22, 2024 · 2 comments · Fixed by #8334
Closed

eslint exhaustive-deps incorrectly labelling constant value as key dependency #8326

MarkSFrancis opened this issue Nov 22, 2024 · 2 comments · Fixed by #8334

Comments

@MarkSFrancis
Copy link

Describe the bug

@tanstack/[email protected]

incorrect exhaustive-deps error for constant values when using them in queryOptions + in a const scope

import { queryOptions } from '@tanstack/react-query';

const EXAMPLE_CONST = 1;

// This works great
export const thisDoesNotShowError = () => ({
  q3: queryOptions({
    queryKey: ['getAll'],
    queryFn: () => Promise.resolve(EXAMPLE_CONST),
  }),
});

// This shows an "The following dependencies are missing in your queryKey: EXAMPLE_CONST" error
export const thisShowsError = {
  q3: queryOptions({
    queryKey: ['getAll'],
    queryFn: () => Promise.resolve(EXAMPLE_CONST),
  }),
};
npx eslint ./test.ts

/workspace/example.ts
  16:5  error  The following dependencies are missing in your queryKey: EXAMPLE_CONST  @tanstack/query/exhaustive-deps

✖ 1 problem (1 error, 0 warnings)

Your minimal, reproducible example

https://stackblitz.com/edit/vitejs-vite-jx3ix8?file=src%2Ftest.ts

Steps to reproduce

  1. Create an object with properties
  2. Use queryOptions in one of those property definitions
  3. Access a const outside the scope of the function
  4. ESLint will flag the @tanstack/query/exhaustive-deps rule violation

Expected behavior

Constants should not count as a dependency

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

VSCode

Tanstack Query adapter

None

TanStack Query version

v5.59.9

TypeScript version

v5.3.3

Additional context

Likely related to #5196, which was fixed in #5446

@TkDodo
Copy link
Collaborator

TkDodo commented Nov 22, 2024

thanks for reporting. @Newbie012 FYI

Newbie012 added a commit that referenced this issue Nov 23, 2024
Adjusted tests to ensure that the rule does not fail when a queryFn inside queryOptions contains a reference to an external variable. Also updated other tests to wrap query calls in a function component for consistency.

fix #8326
TkDodo pushed a commit that referenced this issue Nov 23, 2024
* fix: handle external variable in queryFn without failure

Adjusted tests to ensure that the rule does not fail when a queryFn inside queryOptions contains a reference to an external variable. Also updated other tests to wrap query calls in a function component for consistency.

fix #8326

* ci: apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
@MarkSFrancis
Copy link
Author

Rapid fix, thank you! ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants