All databases

Cursor rule

React Query Cursorrules Prompt File

Cursor rules for React development with React Query integration.

Prefer functional components with hooks

js
const preferFunctionalComponents = true;

React Query best practices

js
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

js
const folderStructure = `
src/
  components/
  hooks/
    useQueries/
    useMutations/
  pages/
  utils/
  api/
`;

Additional instructions

js
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
`;

More Frontend rules

Frequently asked questions

What is the React Query Cursorrules Prompt File Cursor rule?

Cursor rules for React development with React Query integration. It is a Frontend rule, stored as react-query-cursorrules-prompt-file.mdc.

How do I use the React Query Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as react-query-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.