HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

Untitled Lesson

⚡ Total XP: 0|💻 backend XP: 0

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

Pascual Vila

Frontend Instructor // Code Syllabus

Common Pitfalls & Errors

The Error //

The N+1 query problem in nested resolvers

// Wrong: fires one query per user in the list
const resolvers = {
  User: { posts: (user) => db.posts.findByUserId(user.id) }
};

// Correct: DataLoader batches all pending .load() calls into one query
const postLoader = new DataLoader(async (userIds) => {
  const posts = await db.posts.findByUserIds(userIds);
  return userIds.map(id => posts.filter(p => p.userId === id));
});
const resolvers = {
  User: { posts: (user) => postLoader.load(user.id) }
};

The Solution //

A naive resolver for user.posts that runs a separate database query for every single user in a list (1 query for the users, then N more queries, one per user, for their posts) devastates performance as list size grows. Batch and cache these lookups per-request with a DataLoader so all the posts for every user in the list are fetched in a single query.

The Error //

Assuming an HTTP 200 response means the GraphQL request succeeded

const res = await fetch('/graphql', { method: 'POST', body: JSON.stringify({ query }) });
const { data, errors } = await res.json();
if (errors) {
  // Must check this explicitly — res.ok is true even here
  console.error('GraphQL errors:', errors);
}

The Solution //

GraphQL servers conventionally return HTTP 200 even when a query partially or fully fails — errors are reported inside an 'errors' array alongside whatever 'data' could still be resolved. Client code that only checks response.ok (or a REST-style status code) will silently miss real errors buried in the response body.