Repository files navigation

ESLint plugin to enforce best practices when working withTanStack Query

npm install eslint-plugin-react-query-must-invalidate-queries --save-dev# oryarn add eslint-plugin-react-query-must-invalidate-queries --dev# orpnpm add eslint-plugin-react-query-must-invalidate-queries --save-dev# orbun add eslint-plugin-react-query-must-invalidate-queries --dev

Addreact-query-must-invalidate-queries to the plugins section of your.eslintrc configuration file:

{"plugins":["react-query-must-invalidate-queries"],"rules":{"react-query-must-invalidate-queries/require-mutation-invalidation":"error"// or "warn"}}

You can see a real world config here using this:https://github.com/ayinke-llc/malak/blob/main/web/ui/eslint.config.mjs

🔧 This rule enforces thatuseMutation hooks include anonSuccess callback thatcallsinvalidateQueries to ensure data consistency.

When using mutations in React Query, it's important to invalidate related queriesafter a successful mutation to ensure the UI reflects the latest server state withouthaving to do a lot of mental prep.

This rule helps prevent stale data by ensuring that mutations properly invalidate affected queries.

This rule enforces:

• Presence of anonSuccess callback inuseMutation hooks
• TheonSuccess callback must include a call toinvalidateQueries

✅ Examples ofcorrect code:

useMutation({mutationFn:updateUser,onSuccess:()=>{queryClient.invalidateQueries({queryKey:["users"]});},});useMutation({mutationFn:updateUser,onSuccess:()=>{const{ invalidateQueries}=queryClient;invalidateQueries({queryKey:["users"]});},});useMutation({mutationFn:updateUser,onSuccess:async()=>{awaitsomeOtherOperation();awaitqueryClient.invalidateQueries({queryKey:["users"]});},});

❌ Examples ofincorrect code:

useMutation({mutationFn:updateUser,});useMutation({mutationFn:updateUser,onSuccess:()=>{console.log("Success!");},});useMutation({mutationFn:updateUser,onSuccess:()=>{},});

You might want to disable this rule if:

• You have mutations that intentionally don't need to invalidate any queries
• You're handling cache updates through other means likesetQueryData
• You have a specific caching strategy that doesn't require query invalidation

Contributions are welcome! Please read ourcontributing guidelines to get started.

MIT

• Rule Documentation
• TanStack Query Mutations
• TanStack Query Invalidation from Mutations