React Query

Cursor-Regel für React Query: Konventionen für Server-State, Caching und Datenabfragen.

Original-Beschreibung der Autoren: Cursor rules for React development with React Query integration.

Die Regel

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

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Regel legt fest, wie React Query (TanStack Query) für Server-State genutzt wird: Konventionen für Query-Keys, Caching-Strategien, Invalidierung und das Trennen von Server- von Client-State. Der Mehrwert gegenüber freiem Prompten ist, dass generierter Code nicht versehentlich Server-Daten in lokalem useState dupliziert, sondern konsequent auf Caching, Refetching und Ladezustände von React Query setzt. Besonders hilfreich für Projekte mit vielen API-Aufrufen, bei denen konsistente Fehler- und Loading-Behandlung sonst schnell auseinanderdriftet. Wer nur wenige, einfache Fetches braucht, kommt eventuell auch ohne strikte Regel aus.

Praxis-Tipp

Beispiel-Prompt: ‘Erstelle einen useUserProfile-Hook mit React Query, der Nutzerdaten cached und bei Mutation automatisch invalidiert’ — die Regel sorgt für saubere Query-Key-Struktur.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …