如何为 Gatsby 提供 GraphQL 架构

我们从 WordPress 后端引入一些帖子，有些有图片（在 ACF 字段中），有些则没有。问题是 Gatsby 根据它收到的第一个节点推断模式。如果它收到没有图片的节点，则模式是错误的。

Gatsby 的 GraphQL 模式从何而来？ https://www.gatsbyjs.org/docs/querying-with-graphql/#where-does-gatsbys-graphql-schema-come-from对于 Gatsby，我们使用从不同来源获取数据的插件。然后，我们使用该数据自动推断 GraphQL 模式。

我们如何向 GraphQL/Gatsby 指定一个始终包含图片的模式，如果图片为空，则将“null”作为默认值？

{
  allWordpressWpTestimonial {
    edges {
      node {
        id
        title
        acf {
          photo_fields {
            photo {
              id
              localFile {
                childImageSharp {
                  sizes {
                    src
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

在上面的例子中，有时“照片”不存在，它会破坏一切......

盖茨比配置：

const innertext = require('innertext')
const url = require('url')

module.exports = {
  siteMetadata: {
    title: 'Test',
    googleMapsAPIKey: 'xxxxxx',
    adminBaseUrl: '123.123.123',
    adminProtocol: 'http',
  },
  pathPrefix: '/web/beta',
  plugins: [
    'gatsby-plugin-react-next',
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sharp',
    'gatsby-plugin-svgr',
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: 'GOOGLE_ANALYTICS_TRACKING_ID',
      },
    },
    {
      resolve: 'gatsby-plugin-bugherd',
      options: {
        key: 'xxxxxx',
        showInProduction: true,
      },
    },
    {
      resolve: '@andrew-codes/gatsby-plugin-elasticlunr-search',
      options: {
        fields: ['title', 'url', 'textContent', 'urlSearchable'],
        resolvers: {
          wordpress__PAGE: {
            title: node => node.title,
            textContent: node => innertext(node.content),
            url: node => url.parse(node.link).path,
            urlSearchable: node =>
              url
                .parse(node.link)
                .path.split('/')
                .join(' '),
          },
          wordpress__POST: {
            title: node => node.title,
            textContent: node => innertext(node.content),
            url: node => `/news/${node.slug}`,
            urlSearchable: node =>
              url
                .parse(node.link)
                .path.split('/')
                .join(' '),
          },
          wordpress__wp_industry: {
            title: node => node.title,
            textContent: node => innertext(node.content),
            url: node => `/business/industries/${node.slug}`,
            urlSearchable: node =>
              url
                .parse(node.link)
                .path.split('/')
                .join(' '),
          },
        },
      },
    },
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'xxxxxx',
        protocol: 'http',
        hostingWPCOM: false,
        useACF: true,
        auth: {
          htaccess_user: 'admin',
          htaccess_pass: 'xxxxxx',
          htaccess_sendImmediately: false,
        },
        verboseOutput: false,
      },
    },
    'gatsby-transformer-sharp',
  ],
}

距离这篇文章已经有一段时间了，但是从 2.2 版本开始Gatsby 添加了新的 API https://www.gatsbyjs.org/blog/2019-03-18-releasing-new-schema-customization/这将使定制架构变得更加容易。这不是 wordpress 的例子，而是 gatsby 的例子gatsby-transformer-remark，但我确信它是适用的。

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

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

...content...

如果盖茨比到达.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字段始终为文件类型，否则它将是null.

一些注意事项：

• 根节点如MarkdownRemark必须实施Node
• 一个节点可以实现多个接口
• 你必须“努力”到相关领域。在这个例子中，我必须声明MarkdownRemarkFrontmatter类型，然后将其传递给frontmatter领域在MarkdownRemark node.
• 如果未指定，Gatsby 将推断其余字段。在上面的例子中，由于我没有指定category领域在MarkdownRemarkFrontmatter，盖茨比会像之前一样推断出来。
• 查找这些类型的最有用的方法（MarkdownRemark, MarkdownRemarkFrontmatter）是在 graphiql 中查找它们（默认为localhost:8000/___graphql)