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

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

Merged
merged 5 commits into from
Aug 20, 2024

Conversation

schiller-manuel
Copy link
Contributor

@schiller-manuel schiller-manuel commented Aug 18, 2024

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.

Copy link

nx-cloud bot commented Aug 18, 2024

☁️ 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.

Copy link

pkg-pr-new bot commented Aug 18, 2024

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
Copy link

codecov bot commented Aug 18, 2024

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 ∅ <ø> (∅)

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

docs/config.json Outdated Show resolved Hide resolved
@schiller-manuel
Copy link
Contributor Author

@TkDodo can we merge this?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation package: eslint-plugin-query
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants