react graphql apollo client
via PatrickJS/awesome-cursorrules
Apollo Client integration patterns and best practices for React applications.
What is react graphql apollo client?
Establishes conventions for building React applications with GraphQL via Apollo Client. Covers functional components, query/mutation organization, folder structure, and Apollo-specific patterns like caching and DevTools usage.
- Enforce functional components with 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 application root and leverage client-side caching
- Set up error handling, loading states, and error boundaries for GraphQL operations
- Enable TypeScript type safety for GraphQL schema integration and DevTools debugging
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
React development with MobX state management integration and best practices.
Best practices and structure for React Native Expo development.
React Native Expo Router with TypeScript and Windows development setup.
Expert React & Next.js App Router development with clear, production-ready code.
React Query integration patterns and best practices for React development.
React + Redux + TypeScript integration with hooks, Redux Toolkit, and type-safe patterns.
