PluginBench
Rule

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 = `

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

Related rules

React + Redux + TypeScript integration with hooks, Redux Toolkit, and type-safe patterns.

**/*
41k
via PatrickJS/awesome-cursorrules

React Router v7 framework mode patterns for loaders, actions, route modules, and progressive enhancement.

["app/routes/**/*" +6
41k
via PatrickJS/awesome-cursorrules

React development with Styled Components integration and best practices.

**/*
41k
via PatrickJS/awesome-cursorrules

Zero-loading-spinner React SPA with TanStack Router v1 + TanStack Query v5 for type-safe URLs and cache-first data.

["src/routes/**/*" +3
41k
via PatrickJS/awesome-cursorrules

Zero-loading-spinner routing with TanStack Router v1 and Query v5 for type-safe React SPAs

**/*
41k
via PatrickJS/awesome-cursorrules

Expert guidance for React, TypeScript, Next.js 14, and Web3 stack development with Wagmi and Viem.

**/*
41k
via PatrickJS/awesome-cursorrules