How to safely integrate React with GraphQL (protection against injections)?

Question

Accepted Answer

**GraphQL security** is protection against **injections, overflows, unauthorized queries** and DDoS attacks.

**System design context:** GraphQL's flexibility is also its greatest security risk. Unlike REST where the server controls which data each endpoint returns, GraphQL lets clients request any combination of fields. An attacker can craft deeply nested queries that exhaust server resources, or request fields they should not have access to. Security must be layered at the server, client, and network levels.

**1. Validation and limits on the server:**
```js
import depthLimit from "graphql-depth-limit";
import { createComplexityRule } from "graphql-query-complexity";

const server = new ApolloServer({
  schema,
  validationRules: [
    depthLimit(10),  // Max nesting depth
    createComplexityRule({
      maximumComplexity: 1000,
      estimators: [fieldExtensionsEstimator()],
    }),
  ],
});
```

**2. Authorization at field level:**
```js
const resolvers = {
  Query: {
    users: (_, __, context) => {
      if (!context.user) throw new AuthenticationError("Authorization required");
      if (!context.user.isAdmin) throw new ForbiddenError("Access denied");
      return db.users.findAll();
    },
  },
};
```

**3. Injection protection (on client):**
```tsx
// Bad: string concatenation
const query = gql`
  query GetUser($id: ID!) {
    user(id: $id) { name }
  }
`;
// Use Variables, not concatenation!
client.query({ query, variables: { id: userInput } });
```

**4. Persisted Queries:**
```bash
query_hash: "abc123"
→ Server executes ONLY predefined queries
→ Attacker cannot send arbitrary query
```

**5. CORS and Rate Limiting:**
```js
// Limit number of requests
const rateLimiter = new RateLimiter({
  max: 100,
  window: 60 * 1000,  // 100 requests per minute
});
```

**Common pitfalls with root cause + fix:**
- **N+1 query problem** — use DataLoader to batch database queries.
- **Overfetching via introspection in production** — disable introspection in production:
```js
new ApolloServer({
  introspection: process.env.NODE_ENV !== "production",
});
```
- **Missing field-level auth** — always validate at the resolver, not just at the query level.

**Monitoring:**
- Log query complexity scores to detect abuse patterns.
- Set up alerts for queries exceeding complexity thresholds.
- Monitor response times per resolver to identify slow fields.

React: How to safely integrate React with GraphQL (protection against injections)?