Implementing GraphQL in React for Efficient Data Fetching

{
  "title": "Implementing GraphQL in React for Efficient Data Fetching",
  "description": "Strategies for integrating GraphQL with React to streamline data fetching and management.",
  "category": "React Cursor Rules",
  "rules": [
    {
      "name": "Optimize GraphQL Queries",
      "description": "Ensure that GraphQL queries request only the necessary fields to prevent over-fetching and improve performance.",
      "examples": [
        {
          "before": "query GetUser { user { id name email address phone } }",
          "after": "query GetUser { user { id name email } }"
        }
      ]
    },
    {
      "name": "Implement Error Handling in GraphQL Operations",
      "description": "Handle errors in GraphQL queries and mutations by checking for error responses and providing user-friendly messages.",
      "examples": [
        {
          "before": "const { data } = useQuery(GET_USER);",
          "after": "const { loading, error, data } = useQuery(GET_USER); if (error) { console.error('GraphQL error:', error); return <p>Error occurred: {error.message}</p>; }"
        }
      ]
    },
    {
      "name": "Use Apollo Client for State Management",
      "description": "Leverage Apollo Client to manage local and remote data seamlessly, utilizing its caching and state management capabilities.",
      "examples": [
        {
          "before": "const { data } = useQuery(GET_USER);",
          "after": "const { loading, error, data } = useQuery(GET_USER, { onCompleted: (data) => { console.log('Fetch complete!', data); } });"
        }
      ]
    },
    {
      "name": "Implement Real-Time Data with GraphQL Subscriptions",
      "description": "Use GraphQL subscriptions to handle real-time data updates in React components.",
      "examples": [
        {
          "before": "const { data } = useQuery(GET_MESSAGES);",
          "after": "const { data, loading, error } = useSubscription(NEW_MESSAGE_SUBSCRIPTION);"
        }
      ]
    },
    {
      "name": "Normalize Data to Manage Complex Relationships",
      "description": "Structure data to store related entities separately and reference them by IDs to reduce redundancy and improve data integrity.",
      "examples": [
        {
          "before": "{ books: [{ id: '1', title: 'GraphQL Basics', author: { id: '1', name: 'John Doe' } }] }",
          "after": "{ books: { '1': { id: '1', title: 'GraphQL Basics', authorId: '1' } }, authors: { '1': { id: '1', name: 'John Doe' } } }"
        }
      ]
    },
    {
      "name": "Modularize GraphQL Schema and Resolvers",
      "description": "Keep GraphQL schema and resolvers modular by separating type definitions and resolvers into different files for better maintainability.",
      "examples": [
        {
          "before": "schema.graphql: type User { id: ID! name: String! } resolvers.js: const resolvers = { Query: { user: () => { /* resolver logic */ } } };",
          "after": "schema/user.graphql: type User { id: ID! name: String! } resolvers/userResolver.js: const userResolver = { Query: { user: () => { /* resolver logic */ } } };"
        }
      ]
    },
    {
      "name": "Use TypeScript for Strong Typing",
      "description": "Utilize TypeScript to define GraphQL types and ensure type safety throughout the application.",
      "examples": [
        {
          "before": "type User { id: ID! name: String! }",
          "after": "interface User { id: string; name: string; }"
        }
      ]
    },
    {
      "name": "Document GraphQL Schema and Resolvers",
      "description": "Provide comprehensive documentation for GraphQL schema and resolvers to assist developers in understanding the available types, fields, and their usage.",
      "examples": [
        {
          "before": "type User { id: ID! name: String! }",
          "after": "type User { id: ID! # Unique identifier for the user name: String! # Full name of the user }"
        }
      ]
    },
    {
      "name": "Implement Caching Strategies",
      "description": "Use caching mechanisms to store frequently accessed data and reduce the load on the server.",
      "examples": [
        {
          "before": "const { data } = useQuery(GET_USER);",
          "after": "const client = new ApolloClient({ cache: new InMemoryCache() }); const { data } = useQuery(GET_USER, { client });"
        }
      ]
    },
    {
      "name": "Monitor and Optimize Performance",
      "description": "Regularly monitor and analyze the performance of GraphQL operations to identify and optimize slow-performing queries.",
      "examples": [
        {
          "before": "const { data } = useQuery(GET_USER);",
          "after": "const { data } = useQuery(GET_USER, { fetchPolicy: 'cache-and-network' });"
        }
      ]
    }
  ]
}