Search code examples
markdowngraphqlgatsbyyaml-front-mattervuepress

How does Gatsby serve up Markdown frontmatter with GraphQL?


The most interesting feature of Gatsby to me is gatsby-source-filesystem's ability to tap into a directory of markdown files and serve up that static content to React via GraphQL queries. In essence, flat files with YAML frontmatter that are filterable, sortable, nestable, etc. How is it done? Is it based on an existing method? If not, could it be extracted for use with other stacks? (Vuepress for example)

Follow-up: is the method YAML specific? Could it be TOML or JSON or CSV or or or...?


Solution

  • gatsby-source-filesystem doesn't have any markdown-specific logic and indeed is not responsible for splitting out the frontmatter. That's the job of gatsby-transformer-remark, which uses grey-matter to do the actual frontmatter parsing (source).

    From there nodes are created using the createNode action provided by Gatsby. The types are inferred by Gatsby based on the values of the nodes.