在 gatsby-node 中创建自定义模式后 ChildImageSharp 为空答案

【问题标题】：ChildImageSharp is null after creating custom schema in gatsby-node在 gatsby-node 中创建自定义模式后 ChildImageSharp 为空
【发布时间】：2021-04-24 00:04:42
【问题描述】：

我正在使用 gatsby 和 Strapi 构建一个网站，但我遇到了一个无法解决的问题。

这是我的问题：

如果我的客户在 CMS 中留下空白字段，我制作了一个自定义的 graphQL Schema 以避免构建失败。但由于我为主页横幅这样做，childImageSharp 为空。

我假设我的自定义 graphql 模式错误，但我不明白在哪里。

这是我的文件：

Homepage.js

const IndexPage = ({ data }) => {
  return (
    <Layout>
      {data.allStrapiBanner.edges[0].node.banner.childImageSharp.fixed &&
        <Img
          fixed={data.allStrapiBanner.edges[0].node.banner.childImageSharp.fixed}
          imgStyle={{ position: "static" }}
        />
      }
    </Layout>
  )
}

export default IndexPage


export const pageQuery = graphql`
    allStrapiBanner {
      edges {
        node {
          banner {
            childImageSharp {
              fixed(width: 800){
                src
              }
            }
          }
        }
      }
    }
  }
`

这是我的 gatsby-node.js 自定义架构：

exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type allStrapiBanner implements Node {
      banner: childImageSharp
    }
    type childImageSharp{
      childImageSharp: fixed
    }
    type fixed{
      fixed(width: Int): src
      }
    type src{
      src: String
    }
  `
  createTypes(typeDefs)
}

现在 gatsby 构建没有错误，当我没有将图像上传到我的横幅字段但当我上传图像时 childImageSharp 为空

我已经阅读了文档 (https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/)，但我无法让它工作。如果有人可以给我一个提示，告诉我如何正确地为 childImageSharp 创建我的自定义架构。

非常感谢您

【问题讨论】：

标签： javascript graphql gatsby

【解决方案1】：

已解决

经过数小时的蛮力尝试了解问题所在，我终于解决了我的问题。我不敢相信它是如此简单：

我只是将 gastby-node.js 中的架构更改为

exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type allStrapiBanner implements Node {
      banner: File
    }
  `
  createTypes(typeDefs)
}

它的工作原理

【讨论】：