Gatsby通过GraphQL请求WordPress媒体文件仅返回最新项问题求助

核心问题：查询语法错误 #

你在本地Gatsby端点使用的wpMediaItem是单个媒体项查询，默认只会返回最新的一条数据；而WordPress端用的mediaItems是复数查询，所以能返回所有媒体项。

修正查询语句 #

将查询改为复数形式allWpMediaItem，即可获取所有媒体项：

{
  allWpMediaItem {
    nodes {
      altText
      databaseId
      localFile {
        childImageSharp {
          gatsbyImageData(placeholder: TRACED_SVG, width: 100)
          id
        }
      }
    }
  }
}

其他可能的问题及修复 #

1. Gatsby缓存导致数据未更新 #

Gatsby会缓存构建数据，可能旧缓存未刷新。执行以下命令清理缓存后重新启动：

gatsby clean
gatsby develop

2. 媒体项状态限制 #

检查WordPress里的媒体项是否均为发布状态，如果是草稿、私密或待审核状态，gatsby-source-wordpress默认不会拉取这些内容。

3. 图片处理插件异常 #

返回结果中childImageSharp为null，可能是图片处理插件未正常工作：

• 确认gatsby-plugin-sharp、gatsby-transformer-sharp、gatsby-plugin-image已正确安装，可重新安装依赖：

npm install gatsby-plugin-sharp gatsby-transformer-sharp gatsby-plugin-image

• 检查图片格式是否支持（支持JPG、PNG、WebP等，SVG或特殊格式无法被childImageSharp处理）

4. WordPress数据源配置限制 #

检查gatsby-source-wordpress的配置，是否添加了includedRoutes或其他过滤规则限制媒体项拉取。当前你的配置无相关限制，但如果后续添加规则，需确保包含媒体项路由：

{
  resolve: `gatsby-source-wordpress`,
  options: {
    url: `http://34.133.115.37/graphql`,
    includedRoutes: [
      "**/mediaItems", // 确保包含媒体项路由
      // 其他需要的路由
    ]
  },
},

内容的提问来源于stack exchange，提问作者Schniffenhausen