Skip to content

feat(eslint-plugin-query): add rule that disallows putting the result of query hooks directly in a React hook dependency array #7911

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 5 commits into from
Aug 20, 2024
Merged

feat(eslint-plugin-query): add rule that disallows putting the result of query hooks directly in a React hook dependency array #7911

merged 5 commits into from
Aug 20, 2024

Conversation

@schiller-manuel
Copy link
Contributor

@schiller-manuel schiller-manuel commented Aug 18, 2024 •
edited
Loading

I stumbled across #1858 a few times, so I wrote this eslint plugin.
It will detect if the return value of useMutation, useQuery etc. is directly put in a React hook dependency array.

@nx-cloud
Copy link

nx-cloud bot commented Aug 18, 2024 •
edited
Loading

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 5191cec. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

@pkg-pr-new
Copy link

pkg-pr-new bot commented Aug 18, 2024 •
edited
Loading

commit: 5191cec

@tanstack/angular-query-devtools-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-devtools-experimental@7911

@tanstack/angular-query-experimental

pnpm add https://pkg.pr.new/@tanstack/angular-query-experimental@7911

@tanstack/eslint-plugin-query

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-query@7911

@tanstack/query-async-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-async-storage-persister@7911

@tanstack/query-broadcast-client-experimental

pnpm add https://pkg.pr.new/@tanstack/query-broadcast-client-experimental@7911

@tanstack/query-core

pnpm add https://pkg.pr.new/@tanstack/query-core@7911

@tanstack/query-devtools

pnpm add https://pkg.pr.new/@tanstack/query-devtools@7911

@tanstack/query-persist-client-core

pnpm add https://pkg.pr.new/@tanstack/query-persist-client-core@7911

@tanstack/query-sync-storage-persister

pnpm add https://pkg.pr.new/@tanstack/query-sync-storage-persister@7911

@tanstack/react-query

pnpm add https://pkg.pr.new/@tanstack/react-query@7911

@tanstack/react-query-devtools

pnpm add https://pkg.pr.new/@tanstack/react-query-devtools@7911

@tanstack/react-query-next-experimental

pnpm add https://pkg.pr.new/@tanstack/react-query-next-experimental@7911

@tanstack/react-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/react-query-persist-client@7911

@tanstack/solid-query

pnpm add https://pkg.pr.new/@tanstack/solid-query@7911

@tanstack/solid-query-devtools

pnpm add https://pkg.pr.new/@tanstack/solid-query-devtools@7911

@tanstack/solid-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/solid-query-persist-client@7911

@tanstack/svelte-query

pnpm add https://pkg.pr.new/@tanstack/svelte-query@7911

@tanstack/svelte-query-devtools

pnpm add https://pkg.pr.new/@tanstack/svelte-query-devtools@7911

@tanstack/svelte-query-persist-client

pnpm add https://pkg.pr.new/@tanstack/svelte-query-persist-client@7911

@tanstack/vue-query

pnpm add https://pkg.pr.new/@tanstack/vue-query@7911

@tanstack/vue-query-devtools

pnpm add https://pkg.pr.new/@tanstack/vue-query-devtools@7911

Open in Stackblitz

More templates

@github-actions github-actions bot added the documentation Improvements or additions to documentation label Aug 18, 2024
@codecov
Copy link

codecov bot commented Aug 18, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 86.24%. Comparing base (c7fb5fd) to head (5191cec).
Report is 2 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@             Coverage Diff             @@
##             main    #7911       +/-   ##
===========================================
+ Coverage   44.64%   86.24%   +41.60%     
===========================================
  Files         187       12      -175     
  Lines        7090      407     -6683     
  Branches     1575      158     -1417     
===========================================
- Hits         3165      351     -2814     
+ Misses       3562       42     -3520     
+ Partials      363       14      -349
Components Coverage Δ
@tanstack/angular-query-devtools-experimental ∅ <ø> (∅)
@tanstack/angular-query-experimental ∅ <ø> (∅)
@tanstack/eslint-plugin-query 86.24% <100.00%> (+2.24%) ⬆️
@tanstack/query-async-storage-persister ∅ <ø> (∅)
@tanstack/query-broadcast-client-experimental ∅ <ø> (∅)
@tanstack/query-codemods ∅ <ø> (∅)
@tanstack/query-core ∅ <ø> (∅)
@tanstack/query-devtools ∅ <ø> (∅)
@tanstack/query-persist-client-core ∅ <ø> (∅)
@tanstack/query-sync-storage-persister ∅ <ø> (∅)
@tanstack/react-query ∅ <ø> (∅)
@tanstack/react-query-devtools ∅ <ø> (∅)
@tanstack/react-query-next-experimental ∅ <ø> (∅)
@tanstack/react-query-persist-client ∅ <ø> (∅)
@tanstack/solid-query ∅ <ø> (∅)
@tanstack/solid-query-devtools ∅ <ø> (∅)
@tanstack/solid-query-persist-client ∅ <ø> (∅)
@tanstack/svelte-query ∅ <ø> (∅)
@tanstack/svelte-query-devtools ∅ <ø> (∅)
@tanstack/svelte-query-persist-client ∅ <ø> (∅)
@tanstack/vue-query ∅ <ø> (∅)
@tanstack/vue-query-devtools ∅ <ø> (∅)

TkDodo
TkDodo reviewed Aug 19, 2024
View reviewed changes
Copy link
Collaborator

@TkDodo TkDodo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you 🙏 . The same reasoning applies to the return value of useQuery, useSuspenseQuery, useQueries, useSuspenseQueries, useInfiniteQuery and useSuspenseInfiniteQuery as well. Do you think it would make sense to unify this into a single rule?

@schiller-manuel schiller-manuel changed the title feat(eslint-plugin-query): add rule that disallows putting the result of useMutation directly in a React hook dependency array feat(eslint-plugin-query): add rule that disallows putting the result of query hooks directly in a React hook dependency array Aug 19, 2024
@schiller-manuel
Copy link
Contributor Author

@TkDodo I generalized the rule, please have a look.

maybe there is a better name though ...

@schiller-manuel schiller-manuel requested a review from TkDodo August 19, 2024 17:44
TkDodo
TkDodo reviewed Aug 19, 2024
View reviewed changes
@schiller-manuel schiller-manuel requested a review from TkDodo August 19, 2024 18:46
@schiller-manuel
Copy link
Contributor Author

@TkDodo can we merge this?

@TkDodo TkDodo merged commit f65ebe7 into TanStack:main Aug 20, 2024
@schiller-manuel schiller-manuel deleted the mutationInDeps branch August 20, 2024 19:30
This was referenced Sep 11, 2024
Merged
Merged
@muhiddinjv muhiddinjv mentioned this pull request Sep 11, 2024
Closed
@krischarbonneau krischarbonneau mentioned this pull request Sep 11, 2024
Closed
@Sourav-Goyal19 Sourav-Goyal19 mentioned this pull request Sep 12, 2024
Closed
@AKJUS AKJUS mentioned this pull request Sep 12, 2024
Open
@zntb zntb mentioned this pull request Sep 13, 2024
Merged
@s-laugh s-laugh mentioned this pull request Sep 13, 2024
Closed
@muhiddinjv muhiddinjv mentioned this pull request Sep 13, 2024
Closed
@ypreiser ypreiser mentioned this pull request Sep 13, 2024
Open
@danial117 danial117 mentioned this pull request Sep 13, 2024
Open
@thaiduy0282 thaiduy0282 mentioned this pull request Sep 13, 2024
Open
@zntb zntb mentioned this pull request Sep 14, 2024
Merged
@CalPinSW CalPinSW mentioned this pull request Sep 14, 2024
Closed
@muhiddinjv muhiddinjv mentioned this pull request Sep 14, 2024
Closed
@danial117 danial117 mentioned this pull request Sep 14, 2024
Open
@thaiduy0282 thaiduy0282 mentioned this pull request Sep 15, 2024
Open
@ypreiser ypreiser mentioned this pull request Sep 15, 2024
Merged
@zntb zntb mentioned this pull request Sep 17, 2024
Merged
@thaiduy0282 thaiduy0282 mentioned this pull request Sep 17, 2024
Open
@muhiddinjv muhiddinjv mentioned this pull request Sep 17, 2024
Closed
@sebastien-comeau sebastien-comeau mentioned this pull request Sep 17, 2024
Closed
@thaiduy0282 thaiduy0282 mentioned this pull request Sep 18, 2024
Open
@danial117 danial117 mentioned this pull request Sep 18, 2024
Open
@OATEF4313 OATEF4313 mentioned this pull request Sep 18, 2024
Open
@danial117 danial117 mentioned this pull request Sep 19, 2024
Open
@thaiduy0282 thaiduy0282 mentioned this pull request Sep 19, 2024
Open
@muhiddinjv muhiddinjv mentioned this pull request Sep 19, 2024
Closed
@danial117 danial117 mentioned this pull request Sep 20, 2024
Open
@CalPinSW CalPinSW mentioned this pull request Sep 21, 2024
Merged
@muhiddinjv muhiddinjv mentioned this pull request Sep 24, 2024
Closed
@magrinj magrinj mentioned this pull request Mar 31, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@TkDodo TkDodo TkDodo approved these changes

Assignees

No one assigned

Labels

documentation Improvements or additions to documentation package: eslint-plugin-query

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@schiller-manuel @TkDodo