react-query-cursorrules-prompt-file — Cursor rule: React Query
A Cursor rule that tells the agent how to write React Query code: where QueryClient lives, how hooks and query keys are named.
.cursor/rules/react-query-cursorrules-prompt-file.mdcWhat react-query-cursorrules-prompt-file does
The file spells out how React code with React Query should look. The agent gets a fixed set of instructions: functional components with hooks, QueryClient and QueryClientProvider at the app root, separate hooks for queries and mutations, query keys for caching, prefetching, plus loading and error states.
Folder layout is part of the rule: src/components, src/hooks with useQueries and useMutations subfolders, src/pages, src/utils, src/api. Extra points cover TypeScript, error boundaries for query errors, React Query DevTools, stale-while-revalidate, optimistic updates for mutations, query invalidation and consistent naming.
The rule matches **/*, yet alwaysApply is set to false, so you opt in rather than getting it everywhere. Worth knowing before you drop it in: if your project already has its own folder layout or runs plain JavaScript, several points will need rewriting.
What it helps with
- keep the agent on one React Query style across the repo
- split query and mutation hooks into their own folders
- settle on query key naming and cache behaviour
- add error and loading handling to every query
- wire optimistic updates and invalidation into mutations
Example prompts for the agent
- Create a query hook for the task list under
src/hooks/useQueriesfollowing the React Query rules - Add a create-task mutation with an optimistic update and query invalidation
- Set up
QueryClientProviderat the app root and move query keys into a shared module
How to install react-query-cursorrules-prompt-file
Manually: put the files in place
.cursor/rules/react-query-cursorrules-prompt-file.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/react-query-cursorrules-prompt-file.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/react-query-cursorrules-prompt-file.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/react-query-cursorrules-prompt-file.mdManually: put the files in place
.clinerules/react-query-cursorrules-prompt-file.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about react-query-cursorrules-prompt-file
How do I install react-query-cursorrules-prompt-file in Cursor?
Create .cursor/rules/react-query-cursorrules-prompt-file.mdc in your project root and paste the rule contents into it.
What does react-query-cursorrules-prompt-file do?
It gives the Cursor agent React Query conventions: where QueryClient goes, separate hooks for queries and mutations, cache keys, prefetching, and error and loading states.
Does the rule apply to every file automatically?
The globs mask is **/*, but alwaysApply is false, so you attach the rule yourself.
Source text
react-query-cursorrules-prompt-file.mdc · CC0-1.0
---
description: "Cursor rules for React development with React Query integration."
globs: **/*
alwaysApply: false
---
// React + React Query .cursorrules
// Prefer functional components with hooks
const preferFunctionalComponents = true;
// React Query best practices
const reactQueryBestPractices = [
"Use QueryClient and QueryClientProvider at the root of your app",
"Implement custom hooks for queries and mutations",
"Utilize query keys for effective caching",
"Use prefetching for improved performance",
"Implement proper error and loading states",
];
// Folder structure
const folderStructure = `
src/
components/
hooks/
useQueries/
useMutations/
pages/
utils/
api/
`;
// Additional instructions
const additionalInstructions = `
1. Use TypeScript for type safety with React Query
2. Implement proper error boundaries for query errors
3. Utilize React Query DevTools for debugging
4. Use stale-while-revalidate strategy for data freshness
5. Implement optimistic updates for mutations
6. Use query invalidation for data refetching
7. Follow React Query naming conventions for consistency
`;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules