react-graphql-apollo-client-cursorrules-prompt-file — Cursor rule
This rule guides React work with GraphQL and Apollo Client in Cursor. Use it when a project needs consistent patterns for operations, hooks, and error states.
.cursor/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdcWhat react-graphql-apollo-client-cursorrules-prompt-file does
The rule steers React code toward functional components with hooks and Apollo Client for fetching data and managing state. It recommends query components for reads, mutations for changes, and fragments for reusable selections. Loading states and GraphQL errors should be handled explicitly.
The suggested layout separates src/components/, src/graphql/queries/, src/graphql/mutations/, src/graphql/fragments/, src/hooks/, src/pages/, and src/utils/. It also asks for an Apollo Provider at the application root, custom hooks around Apollo operations, TypeScript types for GraphQL work, and Apollo Client caching. Apollo Client DevTools support debugging, while error boundaries cover GraphQL failures. The file matches **/*, but alwaysApply: false means it is not enabled for automatic application.
What it helps with
- organize GraphQL queries, mutations, and fragments by concern
- fetch project data through Apollo Client patterns
- wrap Apollo operations in custom hooks
- handle loading and GraphQL error states
- align React code with TypeScript and Apollo caching
Example prompts for the agent
- Set up functional React components that fetch GraphQL data through Apollo Client.
- Arrange the operations under
src/graphql/queries/,src/graphql/mutations/, andsrc/graphql/fragments/, then add custom hooks. - Review the loading and GraphQL error paths, configure the Apollo Provider, and add error boundaries.
How to install react-graphql-apollo-client-cursorrules-prompt-file
Manually: put the files in place
.cursor/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/react-graphql-apollo-client-cursorrules-prompt-file.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdManually: put the files in place
.clinerules/react-graphql-apollo-client-cursorrules-prompt-file.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about react-graphql-apollo-client-cursorrules-prompt-file
How do I install react-graphql-apollo-client-cursorrules-prompt-file in Cursor?
Place the rule file at .cursor/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdc.
What does react-graphql-apollo-client-cursorrules-prompt-file do?
It sets conventions for React projects using GraphQL with Apollo Client, covering operation folders, hooks, caching, TypeScript, loading states, and error handling.
Does the rule apply to every project file automatically?
Its file pattern is **/*, while alwaysApply: false leaves automatic application disabled.
Source text
react-graphql-apollo-client-cursorrules-prompt-file.mdc · CC0-1.0
---
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
`;
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules