react query
via PatrickJS/awesome-cursorrules
React Query integration guide with hooks, caching, and best practices for React development.
What is react query?
This rule provides guidance for integrating React Query into React applications using functional components and hooks. It covers setup, folder structure, and key patterns like custom hooks, query keys, prefetching, and error handling to optimize data fetching and caching.
- Use QueryClient and QueryClientProvider at the root of your app
- Implement custom hooks for queries and mutations with proper TypeScript types
- Utilize query keys for effective caching and stale-while-revalidate strategies
- Use prefetching and query invalidation for improved performance and data freshness
- Implement proper error boundaries and loading states for query errors
- Apply optimistic updates for mutations and React Query DevTools for debugging
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use TypeScript for type safety with React Query
- Implement proper error boundaries for query errors
- Utilize React Query DevTools for debugging
- Use stale-while-revalidate strategy for data freshness
- Implement optimistic updates for mutations
- Use query invalidation for data refetching
- Follow React Query naming conventions for consistency `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.