react graphql apollo client
via PatrickJS/awesome-cursorrules
GraphQL development with Apollo Client and React hooks best practices
What is react graphql apollo client?
This rule guides React development with Apollo Client for GraphQL state management and data fetching. Use it when building React applications that consume GraphQL APIs and need structured patterns for queries, mutations, and fragments.
- Enforce functional components with React hooks over class components
- Organize GraphQL operations (queries, mutations, fragments) into dedicated folders
- Implement custom hooks for Apollo Client operations and data fetching
- Configure Apollo Provider at app root and leverage Apollo Client caching
- Handle loading states and errors with proper error boundaries for GraphQL operations
- Apply TypeScript type safety to GraphQL operations and components
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
// 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 = `
- Use Apollo Provider at the root of your app
- Implement custom hooks for Apollo operations
- Use TypeScript for type safety with GraphQL operations
- Utilize Apollo Client's caching capabilities
- Implement proper error boundaries for GraphQL errors
- Use Apollo Client DevTools for debugging
- Follow naming conventions for queries, mutations, and fragments `;
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.