GraphQL vs REST — N+1 Query That Took Down a Product Page

# Scenario: Render a user profile page using a typical REST API.
# We need: user name + avatar, their last 3 tweets, follower count.
# That means 3 separate HTTP requests.

# --- Request 1: Get the user's basic info ---
# Returns ~40 fields. We only need 'name' and 'avatar_url'.
curl https://api.example.com/users/42
# Response (truncated to show the overfetching problem):
# {
#   "id": 42,
#   "name": "Maya Patel",           <-- we need this
#   "avatar_url": "https://...",    <-- we need this
#   "email": "maya@example.com",    <-- not needed on this page
#   "date_of_birth": "1990-03-15",  <-- not needed on this page
#   "billing_address": {...},        <-- definitely not needed
#   "account_flags": [...],          <-- internal — should not even be here!
#   ... 34 more fields
# }

# --- Request 2: Get the user's recent tweets ---
# A separate round trip just to get 3 tweets.
curl https://api.example.com/users/42/tweets?limit=3
# Response:
# [ { "id": 101, "body": "...", "likes": 14 }, ... ]

# --- Request 3: Get follower count ---
# Yet another round trip for a single number.
curl https://api.example.com/users/42/followers/count
# Response:
# { \"follower_count\": 8321 }\n\n# TOTAL: 3 HTTP requests, ~40 wasted fields downloaded and discarded.\n# On a slow mobile connection, these requests are sequential or require\n# client-side orchestration to run in parallel \u2014 adding code complexity.",
        "output": "3 HTTP round trips fired to render one screen.\nResponse body for /users/42 is ~2.1 KB. Actual data used: ~180 bytes.\nOverfetch ratio: ~11x more data downloaded than needed."
      }

# The same profile page data — now in a single GraphQL query.
# The client is 100% in control of the shape of the response.

query GetUserProfile($userId: ID!, $tweetLimit: Int!) {\n  # Fetch the user by ID\n  user(id: $userId) {\n    # Ask for ONLY the fields this page actually renders\n    name\n    avatarUrl\n\n    # Nested query for tweets \u2014 limit is passed as a variable\n    tweets(limit: $tweetLimit) {\n      id\n      body\n      likeCount\n    }

    # A computed field on the User type — resolved server-side
    followerCount
  }
}

# Variables sent alongside the query (not hardcoded in the query string)
# {
#   "userId": "42",
#   "tweetLimit": 3
# }

# --- What the server returns ---
# {\n#   \"data\": {\n#     \"user\": {\n#       \"name\": \"Maya Patel\",\n#       \"avatarUrl\": \"https://cdn.example.com/avatars/42.jpg\",\n#       \"tweets\": [\n#         { \"id\": \"101\", \"body\": \"Just shipped a new feature!\", \"likeCount\": 14 },\n#         { \"id\": \"98\",  \"body\": \"GraphQL resolvers are wild.\",  \"likeCount\": 31 },\n#         { \"id\": \"95\",  \"body\": \"Coffee > sleep.\",              \"likeCount\": 7  }\n#       ],\n#       \"followerCount\": 8321\n#     }\n#   }\n# }\n\n# TOTAL: 1 HTTP request. Response contains EXACTLY the fields requested.\n# Response body: ~310 bytes. Zero wasted data.",
        "output": "1 HTTP request fires.\nResponse body: ~310 bytes \u2014 matches exactly what the UI needs.\nNo overfetching. No underfetching. No client-side orchestration needed."
      }

// A minimal but production-aware GraphQL server using Apollo Server.
// Demonstrates: schema definition, resolvers, and the depth-limiting
// protection you MUST add before going to production.

const { ApolloServer, gql } = require('apollo-server');
const depthLimit = require('graphql-depth-limit'); // npm install graphql-depth-limit

// --- Step 1: Define the Schema ---
// The schema is a contract between server and client.
// Every field, type, and relationship is declared here.
const typeDefs = gql`
  type Tweet {\n    id: ID!\n    body: String!\n    likeCount: Int!\n  }

  type User {
    id: ID!
    name: String!
    avatarUrl: String!
    followerCount: Int!
    # The 'limit' argument lets the client control how many tweets to fetch
    tweets(limit: Int = 10): [Tweet!]!
  }

  type Query {
    user(id: ID!): User
  }
`;

// --- Step 2: Mock data (replace with DB calls in production) ---
const USERS = {
  '42': {
    id: '42',
    name: 'Maya Patel',
    avatarUrl: 'https://cdn.example.com/avatars/42.jpg',
    followerCount: 8321,
  },
};

const TWEETS_BY_USER = {\n  '42': [\n    { id: '101', body: 'Just shipped a new feature!', likeCount: 14 },
    { id: '98',  body: 'GraphQL resolvers are wild.',  likeCount: 31 },
    { id: '95',  body: 'Coffee > sleep.',              likeCount: 7  },
    { id: '91',  body: 'Depth limits save lives.',     likeCount: 22 },
  ],
};

// --- Step 3: Resolvers ---
// Each resolver is a function that returns data for one field in the schema.
// Apollo walks the query tree and calls the right resolver for each field.
const resolvers = {\n  Query: {\n    // Called when client queries: user(id: \"42\") { ... }\n    user: (parent, args) => {\n      const foundUser = USERS[args.id];\n      if (!foundUser) throw new Error(`User ${args.id} not found`);\n      return foundUser;\n    },\n  },\n  User: {\n    // Called for each User object to resolve its 'tweets' field\n    // 'parent' is the User object returned by the Query.user resolver\n    tweets: (parent, args) => {\n      const allTweets = TWEETS_BY_USER[parent.id] || [];\n      // Respect the 'limit' argument the client passed in\n      return allTweets.slice(0, args.limit);\n    },\n  },\n};\n\n// --- Step 4: Server with depth limiting ---\n// Without this, a client could send a query like:\n// { user { followers { following { tweets { author { followers { ... } } } } } } }\n// ...and recursively query until your DB cries.\nconst server = new ApolloServer({\n  typeDefs,\n  resolvers,\n  validationRules: [\n    depthLimit(5), // Reject any query nested deeper than 5 levels\n  ],\n});\n\nserver.listen({ port: 4000 }).then(({ url }) => {\n  console.log(`GraphQL API ready at ${url}`);\n});",
        "output": "GraphQL API ready at http://localhost:4000/\n\n# Send this query via curl or Apollo Sandbox:\n# query { user(id: \"42\") { name avatarUrl followerCount tweets(limit: 3) { body likeCount } } }\n#\n# Response:\n# {\n#   \"data\": {\n#     \"user\": {\n#       \"name\": \"Maya Patel\",\n#       \"avatarUrl\": \"https://cdn.example.com/avatars/42.jpg\",\n#       \"followerCount\": 8321,\n#       \"tweets\": [\n#         { \"body\": \"Just shipped a new feature!\", \"likeCount\": 14 },\n#         { \"body\": \"GraphQL resolvers are wild.\",  \"likeCount\": 31 },\n#         { \"body\": \"Coffee > sleep.\",              \"likeCount\": 7  }\n#       ]\n#     }\n#   }\n# }"
      }

// Example: GraphQL resolver that calls a REST microservice.
// The gateway doesn't talk to databases directly — it aggregates REST APIs.

const { ApolloServer, gql } = require('apollo-server');
const axios = require('axios');

const typeDefs = gql`
  type Product {
    id: ID!
    name: String!
    price: Float!
    # This field comes from a different microservice
    stockLevel: Int
  }

  type Query {
    product(id: ID!): Product
  }
`;

const resolvers = {
  Query: {
    product: async (_, { id }) => {
      // Call the internal Product REST API
      const { data } = await axios.get(`http://product-service:3000/api/products/${id}`);
      return data;
    },
  },
  Product: {\n    stockLevel: async (parent) => {\n      // Separate call to Inventory microservice\n      const { data } = await axios.get(`http://inventory-service:3001/api/stock/${parent.id}`);
      return data.quantity;
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });
server.listen(4000).then(() => console.log('Gateway ready'));

// Middleware to alert on GraphQL errors that return HTTP 200.
// Without this, your monitoring won't detect partial failures.

app.use('/graphql', (req, res, next) => {
  const originalJson = res.json.bind(res);
  res.json = function (body) {
    if (body && body.errors && body.errors.length > 0) {
      // Log all errors
      console.error('[GraphQL Error]', JSON.stringify(body.errors));
      
      // Trigger alert if there are any non-client errors
      const serverErrors = body.errors.filter(e => e.extensions?.code !== 'BAD_USER_INPUT');
      if (serverErrors.length > 0) {
        // Send to PagerDuty / Opsgenie
        metricClient.increment('graphql.server_error', serverErrors.length);
      }
    }
    return originalJson(body);
  };
  next();
});