我们从 Wordpress 后端引入了一些帖子，有些有图片(在 ACF 字段中)，有些没有。问题是 Gatsby 根据它接收到的第一个节点来推断模式。如果它接收到一个没有图片的节点，那么 schema 是错误的。

Where does Gatsby’s GraphQL schema come from? With Gatsby, we use plugins which fetch data from different sources. We then use that data to automatically infer a GraphQL schema.

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

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

在上面的示例中，有时“照片”不存在并且它破坏了一切...

Gatsby 配置:

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 has added a new 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-node.js 中告诉 Gatsby 有关图像字段的信息:

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

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

这将保证 image 字段始终为文件类型，否则将为 null。

一些注意事项:

• 像MarkdownRemark这样的根节点必须实现Node
• 一个节点可以实现多个接口(interface)
• 您必须“按照自己的方式”进入相关领域。在此示例中，我必须声明 MarkdownRemarkFrontmatter 类型，然后将其传递给 MarkdownRemark 节点中的 frontmatter 字段。
• 如果未指定，Gatsby 将推断其余字段。在上面的示例中，由于我没有在 MarkdownRemarkFrontmatter 中指定 category 字段，所以它会像以前一样由 Gatsby 推断。
• 查找这些类型(MarkdownRemark、MarkdownRemarkFrontmatter)最有用的方法是在 graphiql 中查找它们(默认位于 localhost:8000/___graphql)

关于javascript - 如何为 Gatsby 提供 GraphQL 模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50770217/