GraphQL vs. REST: den richtigen API-Stil wählen

// REST — multiple requests, potentially over-fetching
// GET /api/users/123
// GET /api/users/123/orders?limit=5
// GET /api/users/123/reviews?limit=3
 
// Each endpoint returns its full schema, including fields the client doesn't use
 
// GraphQL — one request, exact data
const query = `
  query UserDashboard($userId: ID!) {
    user(id: $userId) {
      name
      avatar
      orders(limit: 5) {
        id
        total
        status
      }
      reviews(limit: 3) {
        rating
        comment
      }
    }
  }
`;

// ✅ REST excels at simple, resource-oriented APIs
// Clear, cacheable, easy to understand
app.get("/api/products/:id", getProduct);
app.post("/api/products", createProduct);
app.patch("/api/products/:id", updateProduct);
app.delete("/api/products/:id", deleteProduct);
 
// HTTP caching works out of the box
// GET /api/products/123
// Cache-Control: public, max-age=300
// ETag: "abc123"

// ❌ GraphQL adds complexity for simple operations
const CREATE_PRODUCT = gql`
  mutation CreateProduct($input: CreateProductInput!) {
    createProduct(input: $input) {
      id
      name
      price
    }
  }
`;
 
// Every request is POST, every response is 200
// HTTP caching doesn't work without additional infrastructure
// Error handling is an envelope format, not HTTP status codes

// ❌ REST — the mobile app needs 5 requests for one screen
const user = await fetch("/api/users/me");
const orders = await fetch("/api/users/me/orders?limit=3");
const notifications = await fetch("/api/notifications?unread=true");
const recommendations = await fetch("/api/recommendations?limit=5");
const stats = await fetch("/api/users/me/stats");
// 5 round trips, over-fetching on each response
 
// ✅ GraphQL — one request, exact data needed
const DASHBOARD = gql`
  query Dashboard {
    me {
      name
      avatar
    }
    myOrders(limit: 3) {
      id
      total
      status
    }
    notifications(filter: { unread: true }) {
      id
      message
    }
    recommendations(limit: 5) {
      id
      title
      image
    }
    myStats {
      totalOrders
      totalSpent
    }
  }
`;

// This innocent query triggers 1 + N database calls
// 1 query for users, then N queries for each user's orders
const query = `{
  users(limit: 50) {
    name
    orders {
      id
      total
    }
  }
}`;

// ✅ DataLoader batches and deduplicates database calls
import DataLoader from "dataloader";
 
const orderLoader = new DataLoader(async (userIds: string[]) => {
  // One query for ALL user orders, not one per user
  const orders = await db.orders.findMany({
    where: { userId: { in: userIds } },
  });
 
  // Group by userId and return in the same order as input
  const ordersByUser = new Map<string, Order[]>();
  for (const order of orders) {
    const list = ordersByUser.get(order.userId) ?? [];
    list.push(order);
    ordersByUser.set(order.userId, list);
  }
 
  return userIds.map((id) => ordersByUser.get(id) ?? []);
});
 
// In the resolver
const resolvers = {
  User: {
    orders: (user: User) => orderLoader.load(user.id),
  },
};

// REST — one auth check per endpoint
app.get("/api/users/:id", requireAuth, requireOwnerOrAdmin, getUser);
 
// GraphQL — auth at the field level
const resolvers = {
  User: {
    email: (user, args, context) => {
      // Only the user themselves or an admin can see email
      if (context.userId !== user.id && !context.isAdmin) return null;
      return user.email;
    },
    salary: (user, args, context) => {
      // Only HR or the user themselves
      if (context.userId !== user.id && !context.roles.includes("hr")) {
        throw new ForbiddenError("Cannot access salary");
      }
      return user.salary;
    },
  },
};