问题描述

我正在一个gatsby网站上工作，gatsby-source-wordpress用于为博客提供帖子。但是，如果任何 WordPress 帖子不包含特色图片，则会导致构建失败。我了解这是预期的行为。

这是我看到的构建错误：

  29 |           {posts.map(({ node: post }, index) => ( 
  30 |             <li key={post.id} {...post}>
> 31 |               <Img fixed={post.featured_media.localFile.childImageSharp.fixed} />
     |                                               ^
  32 |               <p>
  33 |                 <Link to={`/insights/${post.slug}`}>
  34 |                   {post.title}

  WebpackError: TypeError: Cannot read property 'localFile' of null

这是由结果查询引起的，该查询在第二个节点中返回空结果，因为帖子上没有特色图像：

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "id": "28ec9054-5b05-5f94-adcb-dcbfc14659b1",
            "featured_media": {
              "id": "f12d613b-e544-560b-a86f-cd0a7f87801e",
              "localFile": {
                "id": "7fca2893-ff80-5270-9765-d17d3dc21ac2",
                "url": "https://www.mycustomdomain.com/wp-content/uploads/2020/01/some-featured-image.jpg"
              }
            }
          }
        },
        {
          "node": {
            "id": "91a236ed-39d5-5efc-8bed-290d8344b660",
            "featured_media": null
          }
        }
      ]
    }
  }
}

我想如何解决：

作为一个理想的解决方案，如果 WordPress 中没有特色图像，我想使用模式自定义来设置默认图像。但我完全不知道如何正确地这样做。我正在使用此文档来指导我，但我只是没有正确地理解它。

一个类似的工作示例：

标签数据类似于特色图片，如果帖子没有标签，则查询返回 null。但是，我可以undefined使用如下方式设置默认标签createResolvers：

exports.createResolvers = ({ createResolvers }) => {
  const resolvers = {
    wordpress__POST: {
      tags: {
        resolve(source, args, context, info) {
          const { tags } = source
          if (tags === null || (Array.isArray(tags) && !tags.length)) {
            return [
              {
                id: 'undefined',
                name: 'undefined',
                slug: 'undefined',
              }
            ]
          } else {
            return info.originalResolver(source, args, context, info)
          }
        },
      },
    },
  }
  createResolvers(resolvers)
}

这工作如以下查询结果所示：

{
  "data": {
    "allWordpressPost": {
      "edges": [
        {
          "node": {
            "id": "28ec9054-5b05-5f94-adcb-dcbfc14659b1",
            "tags": [
              {
                "id": "undefined"
              }
            ]
          }
        },
        {
          "node": {
            "id": "91a236ed-39d5-5efc-8bed-290d8344b660",
            "tags": [
              {
                "id": "50449e18-bef7-566a-a3eb-9f7990084afb"
              },
              {
                "id": "8635ff58-2997-510a-9eea-fe2b88f30781"
              },
              {
                "id": "97029bee-4dec-5198-95af-8464393f71e3"
              }
            ]
          }
        }
      ]
    }
  }
}

我尝试的图像（不起作用......）

当谈到嵌套节点和图像文件时，我完全不知所措。根据本文和此代码示例，我正朝着以下方向前进，但到目前为止它不起作用：

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  const resolvers = {
    wordpress__POST: {
      featured_media: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: 'https://www.mycustomdomain.com/wp-content/uploads/2017/05/placeholder.png',
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  }
  createResolvers(resolvers)
}

我意识到上面的代码没有if else声明，所以期望所有特色图像都将被占位符图像替换。但是，生成的 GraphQL 查询不受影响（如顶部所示）。

谁能在这里指出我正确的方向？我似乎无法理解在那里可以找到哪些信息。

标签： wordpressgraphqlschemagatsby

WebpackError：TypeError：无法读取 null 的属性“localFile”

'localFile' of null表示 nulled 是localfile- featured_media... 的父级，您可以在结果中看到：

“特色媒体”：空

...所以你正在尝试修复localfile，而你应该在featured_media水平上工作

为什么？

您可以在空节点上轻松地有条件地 [in react] 渲染您需要的内容（占位符、组件）……为什么您要尝试修复 graphql 响应？

wordpress - 如果GraphQL返回null，使用Gatsby`createResolvers`设置默认图像？