React GraphQL Apollo Client

Cursor-Regel für React mit Apollo Client: idiomatische Query/Mutation-Hooks und saubere Fehler- und Ladezustände.

Original-Beschreibung der Autoren: Cursor rules for GraphQL development with Apollo Client integration.

Die Regel

---
description: "Cursor rules for GraphQL development with Apollo Client integration."
globs: **/*
alwaysApply: false
---
// React + GraphQL (Apollo Client) .cursorrules

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// GraphQL and Apollo Client best practices

const graphqlBestPractices = [
  "Use Apollo Client for state management and data fetching",
  "Implement query components for data fetching",
  "Utilize mutations for data modifications",
  "Use fragments for reusable query parts",
  "Implement proper error handling and loading states",
];

// Folder structure

const folderStructure = `
src/
  components/
  graphql/
    queries/
    mutations/
    fragments/
  hooks/
  pages/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use Apollo Provider at the root of your app
2. Implement custom hooks for Apollo operations
3. Use TypeScript for type safety with GraphQL operations
4. Utilize Apollo Client's caching capabilities
5. Implement proper error boundaries for GraphQL errors
6. Use Apollo Client DevTools for debugging
7. Follow naming conventions for queries, mutations, and fragments
`;

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 zielt auf React-Projekte, die GraphQL über Apollo Client anbinden, und gibt Vorgaben für den idiomatischen Einsatz von useQuery- und useMutation-Hooks, sauberes Cache-Handling sowie den Umgang mit Lade- und Fehlerzuständen. Der Mehrwert gegenüber einer allgemeinen React-Regel liegt darin, dass Apollo eigene Muster für Datenabruf und Zwischenspeicherung hat, die bei falscher Anwendung zu unnötigen Netzwerk-Requests oder inkonsistenten UI-Zuständen führen können. Besonders hilfreich ist das für Teams, die bereits eine GraphQL-API im Backend haben und im Frontend konsistent damit umgehen wollen. Für Projekte mit REST-APIs oder anderen GraphQL-Clients wie urql ist diese Regel dagegen nicht passend, da sie sich explizit an Apollo-spezifische Patterns hält.

Praxis-Tipp

Setzen Sie die Regel ein, sobald Apollo Client im Projekt konfiguriert ist, und lassen Sie die KI etwa mit „binde die Nutzerliste per useQuery an und behandle Lade- und Fehlerzustände“ Datenabrufe idiomatisch umsetzen.

Lizenz & Quelle

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

Lade …