Skip to main content
rule

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.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/react-graphql-apollo-client-cursorrules-prompt-file.mdc
Open on GitHub

What 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/, and src/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.mdc

Frontmatter: description, globs, alwaysApply

Step 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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set210

react-nextjs-ui-development-cursorrules-prompt-fil Configures Cursor for React and Next.js App Router development. Forces the agent to outline pseudocode first and maintain dual Vercel and Replit support. ★ 41,024repo stars react-native-expo-router-typescript-windows-cursorrules-prompt-file This rule guides React Native projects using Expo, TypeScript, and Expo Router. It also covers NativeWind and Tailwind CSS versions, Babel configuration, and Windows terminal commands. ★ 41,024repo stars react-native-expo-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,024repo stars react-mobx-cursorrules-prompt-file Cursor rule for building React apps with MobX. It configures state stores, hook conventions, and strict MobX patterns for code generation. ★ 41,024repo stars react-formengine-ai-form-builder-cursorrules-prompt-file A Cursor rule that has the agent build React forms from a screenshot, PDF, HTML or text description and return a FormEngine JSON schema plus a runnable App.tsx. ★ 41,024repo stars react-components-creation-cursorrules-prompt-file Guides React component creation in Cursor by checking for duplicates, building v0.dev generation links, and standardising shadcn/ui imports. ★ 41,024repo stars react-chakra-ui-cursorrules-prompt-file A Cursor rule for React projects using Chakra UI, covering component style, theming, responsive layouts, accessibility, and project structure. ★ 41,024repo stars rails-cursorrules-prompt-file A Cursor rule file that tells the agent how to write Rails 8 code: generators, bin/dev, the Solid stack, Minitest and Hotwire. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor