Gatsby graphiQL - 无法为不可为空的字段 ImageSharpFluid.src

如何解决Gatsby graphiQL - 无法为不可为空的字段 ImageSharpFluid.src

我将 Gatsby 和 graphql 与无头 wordpress 一起用于网站。

我想使用 gatsby-image 插件为来自 wordpress 的图像获取 srcSet 和模糊效果，但它在 graphiQL 游乐场中引发错误。我想在下面一步一步解释整个过程，以便更好地理解。

gatsby-image 插件具有 two types of responsive image 固定和流畅：

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

所以，我需要第二个 - 流体。

它还具有two image components静态和动态。

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

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

我使用的是 wordpress（即 CMS）。所以，我需要第二个 - 动态

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

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

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

当时一切都准备好进行查询，所以我尝试了他们在文档中的第一个示例 - pulling images from wordpress 和 IT WORKED。

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

当我尝试获取 gatsbyImageData

时它也会失败

我该如何解决这个问题？

提前致谢。

解决方法

您提到的 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 的初学者以找到一个开始。 Gatsby Starters

希望这能让你开始:)

如果您在插件选项中使用了缓存，如以下代码，尝试删除工作区中的 .cache 文件夹并重新启动服务器。

{
  resolve: `gatsby-source-wordpress`,options: {
    production: {
      hardCacheMediaFiles: true,},

可能需要一些时间来获取图像，然后您的页面应该可以加载而不会出现任何错误。