ESLint plugin for React query keys, sticking to the query key factory pattern.
npm install eslint-plugin-react-query-keysESLint plugin to enforce best practices when working with React Query.
``bash`
npm install eslint-plugin-react-query-keys --save-devor
yarn add eslint-plugin-react-query-keys --devor
pnpm add eslint-plugin-react-query-keys --save-dev
Add to your ESLint configuration:
`js`
// .eslintrc.js
module.exports = {
plugins: ["react-query-keys"],
rules: {
"react-query-keys/no-plain-query-keys": "warn",
},
};
Enforces the use of query key factories instead of raw arrays or strings for React Query operations.
When working with React Query, it's best practice to use query key factories to manage your query keys rather than hardcoding string or array literals. This approach improves maintainability, prevents duplication, enhances type safety, and provides better IntelliSense support.
This rule checks for:
1. Raw arrays or strings passed to React Query methods like invalidateQueries, setQueryData, etc.queryKey
2. Raw arrays assigned to or mutationKey properties in hooks like useQuery and useMutation
#### Examples
`jsx
// ❌ Bad (direct use of array literals)
useQuery({
queryKey: ["users"],
queryFn: fetchUsers,
});
queryClient.invalidateQueries(["users"]);
// ❌ Bad (empty array or single empty string arrays)
useQuery({
queryKey: [],
queryFn: fetchData,
});
useQuery({
queryKey: [""],
queryFn: fetchData,
});
// ✅ Good (using query key factories)
useQuery({
queryKey: userKeys.list(),
queryFn: fetchUsers,
});
useQuery({
queryKey: userKeys.detail(1),
queryFn: fetchUser,
});
queryClient.invalidateQueries(userKeys.list());
``
See the rule documentation for more detailed examples and explanation.
MIT