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

Question

我正在使用gatsby-source-wordpress 为博客寻找帖子的gatsby 网站。但是，如果任何 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 中没有特色图像，我想使用模式自定义来设置默认图像。但我完全不知道如何正确地这样做。我在 this documentation 工作以指导我，但我只是没有正确地理解它。

一个类似的工作示例：

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

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"
              }
            ]
          }
        }
      ]
    }
  }
}

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

当谈到嵌套节点和图像文件时，我完全不知所措。我正朝着based on this article 和this code example 的以下方向前进，但到目前为止它不起作用：

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 查询不受影响（如顶部所示）。

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

Answer 1

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

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

“featured_media”：空

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

为什么？

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