React GraphQL Apollo Client

Cursor-Regel für React mit Apollo Client: Query/Mutation-Hooks, Cache-Handling und Error-States im GraphQL-Stil.

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

Cursor-Regel für React-Projekte, die GraphQL über Apollo Client anbinden: definiert Konventionen für Query-/Mutation-Hooks (useQuery, useMutation), Fehlerbehandlung (loading/error-States), Cache-Updates und Colocation von GraphQL-Dokumenten mit den Komponenten, die sie nutzen. Sinnvoll für Teams mit GraphQL-Backend, die verhindern wollen, dass generierter Code stattdessen naive fetch-Aufrufe oder REST-Muster vorschlägt. Deckt auch typische Apollo-Fallstricke ab, etwa fehlendes Cache-Invalidieren nach Mutations. Ohne Apollo im Projekt ist die Regel irrelevant, da sie sich stark auf dessen API stützt.

Praxis-Tipp

Bei neuen Datenabfragen anwenden, z. B. „schreibe eine useQuery-Komponente für die Bestellhistorie laut Apollo-Regeln inklusive Error- und Loading-State“.

Lizenz & Quelle

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

Lade …