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

Posted

技术标签:

【中文标题】Gatsby graphiQL - 不能为不可为空的字段 ImageSharpFluid.src 返回 null【英文标题】:Gatsby graphiQL - Cannot return null for non-nullable field ImageSharpFluid.src 【发布时间】:2021-07-01 16:07:14 【问题描述】:

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

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

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

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

所以,我需要第二个 - fluid

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

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

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

我正在使用 WordPress(即 CMS)。所以,我需要第二个 - Dynamic

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

为此,我发现 Gatsby 有一个 gatsby-source-wordpress 插件可以从 WordPress 中提取图片。

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

当时一切都准备好进行查询,所以我尝试了他们在文档中的第一个示例 - pulling images from wordpress 并且它工作了。

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

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

我该如何解决这个问题?

提前致谢。

【问题讨论】:

' # 在 GraphQL 资源管理器中,使用字段名称 # 如“src”。在您网站的代码中,删除它们 # 并使用 Gatsby 提供的片段。 src' 片段结果相同 notices/cmets 是关于使用图像道具...它们不再是公开/严格定义的...不应该在操场上测试...使用图像组件或console.log()页面/模板查看道具 控制台出现同样的错误 查询片段,localFile 已记录?全部无效/一些道具? ...构建日志中的错误?组件 props 或数据相关请求中有什么? 【参考方案1】:

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



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

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

【讨论】:

【参考方案2】:

您为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:WordPressv3 以找到一个启动器。 Gatsby Starters

希望这能让你开始:)

【讨论】:

以上是关于Gatsby graphiQL - 不能为不可为空的字段 ImageSharpFluid.src 返回 null的主要内容,如果未能解决你的问题,请参考以下文章

使用 gatsby-source-graphql 时,GraphIQL 资源管理器未在 Gatsby 中显示

GraphQL 查询从 JSON 数据源返回 GraphiQL 和 App 中的空对象

错误:不能为不可为空的 postgres 返回 null

如何查询 gatsby-image?

Schema graphql 错误给出“不能为不可为空的字段 Organisation.id 返回 null”为啥?

GraphQL 查询返回错误“不能为不可为空的字段返回 null”