如何为Gatsby提供GraphQL架构

自从这篇文章以来已经有一段时间了，但是自从2.2版Gatsby以来，添加了一个新的API，它将使自定义架构更加容易。这不是wordpress的示例，而是gatsby的示例gatsby-transformer-remark，但我确定它是适用的。

我有一堆.md与frontmatter看起来像这样：

---
title: "Screen title"
image: "./hero-image.png"  <--- sometimes it's an empty string, ""
category: "Cat"
---

...content...

如果Gatsby .md首先使用空白图片进入，则String即使该字段应为，它也会错误地将该字段推断为File。使用新的API，我可以通过以下方式向Gatsby谈谈图像字段gatsby-node.js：

exports.sourceNodes = ({ actions, schema }) => {
  const { createTypes } = actions
  createTypes(`
    type MarkdownRemarkFrontmatter {
      image: File
    }

    type MarkdownRemark implements Node {
      frontmatter: MarkdownRemarkFrontmatter
    }
  `)
}

这样可以确保该image字段始终为File类型，否则为null。

一些注意事项：

像这样的根节点MarkdownRemark必须实现Node

一个节点可以实现多个接口

您必须“努力”到相关领域。在此示例中，我必须声明MarkdownRemarkFrontmatter类型，然后将其传递给node中的frontmatter字段MarkdownRemark。

如果未指定，盖茨比将推断其余字段。在上面的示例中，由于我没有在中指定category字段MarkdownRemarkFrontmatter，因此Gatsby会像以前一样推断出该字段。

找到这些类型的（最有用的方法MarkdownRemark，MarkdownRemarkFrontmatter）是看他们在graphiql（在默认情况下localhost:8000/___graphql）