时间戳

首页 > 解决方案 > Gatsby graphiQL - 不能为不可为空的字段 ImageSharpFluid.src 返回 null

graphql - Gatsby graphiQL - 不能为不可为空的字段 ImageSharpFluid.src 返回 null

问题描述

我正在将 Gatsby 和 graphql 与无头 WordPress 一起用于网站。

我想使用 gatsby-image 插件来获得来自 WordPress 的图像的 srcSet 和模糊效果，但它在 graphiQL 操场上引发错误。为了更好地理解，我想在下面逐步解释整个过程。

gatsby-image 插件有两种类型的响应式图像固定和流动：

要在两者之间做出决定，问问自己：“我知道这张图片的确切尺寸吗？” 如果是，则为第一种。如果没有并且它的宽度和/或高度需要根据屏幕的大小而变化，那么它就是第二种类型。

所以，我需要第二个 one- fluid。

它还有两个图像组件静态和动态。

如果您使用的是每次使用该组件时都相同的图像，例如徽标或首页英雄图像，则可以使用 StaticImage 组件。

如果您需要动态图像（例如它们来自 CMS），您可以通过 GraphQL 加载它们并使用 GatsbyImage 组件显示它们。

我正在使用 WordPress（即 CMS）。所以，我需要第二个 -动态

在编写查询之前，我必须了解如何对来自 WordPress 方案的文件进行正确的查询。

出于这个原因，我发现 Gatsby 有一个gatsby-source-wordpress插件来从 WordPress 中提取图像。

我已经安装并配置了所有必需的软件包，例如gatsby-plugin-image, gatsby-plugin-sharp,gatsby-transformer-sharp等。我所做的一切都完全按照官方文档所说的那样。

那时一切都准备好进行查询，所以我尝试了他们在文档中的第一个示例 -从 wordpress 中提取图像并且它工作。

在此处输入图像描述

所以是时候最终得到我想要的并尝试第二个示例（流体），但它失败并显示错误消息Cannot return null for non-nullable field ImageSharpFluid.srcSet.

在此处输入图像描述

当我尝试获取时它也失败了gatsbyImageData

在此处输入图像描述

我该如何解决这个问题？

提前致谢。

标签： graphqlgatsbygatsby-imagegraphiqlwp-graphql

解决方案

您提到的文档gatsby-source-wordpress已过时。签出这个：https ://www.gatsbyjs.com/plugins/gatsby-source-wordpress/

您的查询看起来像旧查询。我不确定您正在运行哪些插件版本，但如果您正在运行最新版本，您的查询应该如下所示：

query MyQuery {
  allWpPost {
    nodes {
      featuredImage {
        node {
          localFile {
            childrenImageSharp {
              gatsbyImageData(width: 200, placeholder: BLURRED, formats: [AVIF, WEBP, JPG])
            }
          }
        }
      }
    }
  }
}

此外，不推荐使用 gatsby-image 插件，取而代之的是gatsby-plugin-image。

如果您想要一个设置如何组合在一起的示例，您可以搜索启动器CMS:WordPress并v3找到一个启动器。盖茨比首发

希望这能让你开始:)

推荐阅读