Skip to main content
rule

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.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/react-query-cursorrules-prompt-file.mdc
Open on GitHub

What 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/useQueries following the React Query rules
  • Add a create-task mutation with an optimistic update and query invalidation
  • Set up QueryClientProvider at 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.mdc

Frontmatter: description, globs, alwaysApply

Step 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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set68

rtl-right-to-left-i18n-cursorrules-prompt-file A Cursor rule that pushes the agent toward logical CSS and Tailwind utilities instead of left/right. Useful when the app has to run in Arabic, Hebrew, Persian or Urdu. ★ 41,011repo stars react This rule hands Cursor a set of React conventions: component structure, hooks, state, forms and accessibility. Useful when a project has plenty of .tsx and .jsx and you want one style. ★ 41,011repo stars react-typescript-nextjs-nodejs-cursorrules-prompt- A Cursor rule that pins down React, TypeScript, Next.js 14 and Node.js conventions: functional components, RORO, minimal use client. ★ 41,011repo stars react-styled-components-cursorrules-prompt-file A Cursor rule that tells the agent how to write React code with styled-components: functional components, theming through ThemeProvider, a fixed folder layout. ★ 41,011repo stars react-native-expo-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,011repo stars rails-cursorrules-prompt-file A Cursor rule file that tells the agent how to write Rails 8 code: generators, bin/dev, the Solid stack, Minitest and Hotwire. ★ 41,011repo stars qwik-basic-cursorrules-prompt-file A Cursor rule that sets Qwik conventions for the agent: lazy functions with the $ suffix, signals, tasks, and a TypeScript plus Vite project layout. ★ 41,011repo stars python A Cursor rule that sets project layout, code style and stack choices for Python work with Flask and SQLite. Useful when the agent edits files in your repo. ★ 41,011repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor