Gatsby GraphQL Field Error Fix

In this tutorial, you'll learn about Gatsby GraphQL Field Error Fix. We cover key concepts, practical examples, and best practices.

The Problem

error Unknown field 'author' on type 'MarkdownRemarkFrontmatter'

The GraphQL query references a field that does not exist in the schema.

Wrong

query {
  markdownRemark {
    frontmatter {
      title
      author
    }
  }
}

Output: Unknown field 'author' on type 'MarkdownRemarkFrontmatter'

The author field is not in the frontmatter of any Markdown file, so it is not added to the GraphQL schema.

Right

Add the field to your frontmatter:

---
title: My Post
author: John Doe
---

Or query only fields that exist:

query {
  markdownRemark {
    frontmatter {
      title
    }
  }
}

Use optional chaining in your component:

const author = data.markdownRemark.frontmatter.author || 'Unknown'

Output: author renders as John Doe or Unknown.

Prevention

• Use GraphiQL at http://localhost:8000/___<a href="/apis/graphql/">Graphql</a> to explore available fields
• Add all needed fields to your Markdown frontmatter
• Use fallback values for optional fields in components

Common Mistakes with graphql field

1. Forgetting deriving (Show, Eq) on custom data types needed for debugging
2. Placing the wildcard pattern first in case expressions, making all subsequent patterns unreachable
3. Using head and tail instead of pattern matching, causing runtime errors on empty lists

These mistakes appear frequently in real-world GATSBY code. DodaTech's contributors have identified these patterns through analysis of open-source projects and production systems.

Practice Exercise

Write a pure function that safely divides two integers using Maybe, then test it with edge cases like division by zero and negative numbers.

This exercise reinforces the concepts covered in this guide. Try implementing it before checking online solutions.

FAQ