Debugging GraphQL APIs
1. Using GraphQL Playground
| Note | Detail |
|---|---|
| Status | Deprecated — use Apollo Sandbox or GraphiQL 4 |
| Successor | Apollo Sandbox at studio.apollographql.com/sandbox |
2. Using GraphiQL
| Feature | Detail |
|---|---|
| Schema explorer | Doc explorer with search |
| Autocomplete | Field/arg/type suggestions |
| Plugins (v4+) | Custom panels, history, codegen |
| Auth headers | Set via headers tab |
3. Inspecting Query Execution
Example: Print execution path
plugins: [{
onExecute() {
return {
onResolverCalled({ info }) {
console.log("resolve", info.path);
}
};
}
}]4. Using Debug Logging
| Library | Detail |
|---|---|
| debug | DEBUG=app:* node server.js |
| pino | Structured JSON, fast |
| Levels | trace/debug/info/warn/error/fatal |
5. Analyzing Query Performance
| Tool | Use |
|---|---|
| Apollo Studio traces | Per-resolver timing |
| EXPLAIN ANALYZE | SQL plan beneath resolver |
| DataLoader stats | Batch coverage |
6. Tracing Resolver Execution
Example: Per-resolver span
const tracer = trace.getTracer("graphql");
const wrapped = (resolver) => (parent, args, ctx, info) =>
tracer.startActiveSpan(info.fieldName, async (span) => {
try { return await resolver(parent, args, ctx, info); }
catch (e) { span.recordException(e); throw e; }
finally { span.end(); }
});7. Debugging N+1 Queries
| Symptom | Diagnosis |
|---|---|
| Many identical SQL queries | Missing DataLoader |
| High latency on list fields | Per-row child fetch |
| Tool | Prisma metrics, pg_stat_statements, Apollo trace tree |
8. Profiling Memory Usage
| Tool | Detail |
|---|---|
| node --inspect + Chrome DevTools | Heap snapshot, allocation sampling |
| clinic.js | Doctor / heap profiler |
| --max-old-space-size | Adjust V8 heap |
9. Testing with Mock Data
| Strategy | Detail |
|---|---|
| addMocksToSchema | Auto-mock all types |
| MSW | Mock HTTP at network boundary |
| Faker | Generate realistic fixtures |
10. Using Browser DevTools
| Tool | Detail |
|---|---|
| Apollo Client Devtools | Cache inspector, query log |
| Relay DevTools | Store + network log |
| Network panel | Filter by /graphql |