react query
via PatrickJS/awesome-cursorrules
React Query integration patterns and best practices for React development.
What is react query?
This rule provides guidance for using React Query in React applications, covering setup, custom hooks, caching strategies, and error handling. Use it when building data-fetching layers with React Query to ensure consistent patterns and performance optimization.
- Establish QueryClient and QueryClientProvider setup at app root
- Create custom hooks for queries and mutations in organized folder structure
- Implement query key strategies for effective caching and cache invalidation
- Configure prefetching and stale-while-revalidate patterns for data freshness
- Handle loading and error states with error boundaries and React Query DevTools
- Apply optimistic updates for mutations and query invalidation for refetching
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
React + Redux + TypeScript integration with hooks, Redux Toolkit, and type-safe patterns.
React Router v7 framework mode patterns for loaders, actions, route modules, and progressive enhancement.
React development with Styled Components integration and best practices.
Zero-loading-spinner React SPA with TanStack Router v1 + TanStack Query v5 for type-safe URLs and cache-first data.
Zero-loading-spinner routing with TanStack Router v1 and Query v5 for type-safe React SPAs
Expert guidance for React, TypeScript, Next.js 14, and Web3 stack development with Wagmi and Viem.
