Gatsby构建失败：WpConnectionType.nodes接口字段缺失报错求助

问题描述 #

基于Gatsby搭建的项目新增WordPress博客功能后，gatsby develop可正常运行，但执行gatsby build构建生产版本时触发ERROR #85928，报错提示多个WpXXXConnectionType类型未实现WpConnectionType.nodes接口字段，涉及WpEnqueuedScriptConnectionType、WpEnqueuedStylesheetConnectionType等类型。

报错日志片段 #

warn `isModuleDeclaration` has been deprecated, please migrate to `isImportOrExportDeclaration`
    at isModuleDeclaration (C:\PROJEKTY\magia\node_modules\@babel\types\lib\validators\generated\index.js:3940:35)
    at PluginPass.Program (C:\PROJEKTY\magia\node_modules\babel-plugin-lodash\lib\index.js:102:44)
success Building production JavaScript and CSS bundles - 23.950s
⠋ Building Rendering Engines
[============================]   32.205 s 36/36 100% Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (120kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
success Building Rendering Engines - 85.813s
success Building HTML renderer - 22.491s
success Execute page configs - 0.114s
success Validating Rendering Engines - 5.941s
success Caching Webpack compilations - 0.005s

 ERROR #85928  GRAPHQL.QUERY_RUNNING

An error occurred during parallel query running.

  Error: Interface field WpConnectionType.nodes expected but WpEnqueuedScriptConnectionType does not provide it.
  Interface field WpConnectionType.nodes expected but WpEnqueuedStylesheetConnectionType does not provide it.
  Interface field WpConnectionType.nodes expected but WpActionMonitorActionConnectionType does not provide it.
  Interface field WpConnectionType.nodes expected but WpPluginConnectionType does not provide it.
  Interface field WpConnectionType.nodes expected but WpThemeConnectionType does not provide it.

  - graphql-runner.ts:129 GraphQLRunner.validate
    [magia]/[gatsby]/src/query/graphql-runner.ts:129:22

  - graphql-runner.ts:218 GraphQLRunner.query
    [magia]/[gatsby]/src/query/graphql-runner.ts:218:49

  - query-runner.ts:140 queryRunner
    [magia]/[gatsby]/src/query/query-runner.ts:140:14


not finished Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 146.946s
not finished run queries in workers - 0.200s

解决方案 #

1. 过滤WordGraphQL中不需要的字段/类型 #

报错涉及的类型（如EnqueuedScript、ActionMonitorAction等）属于WordPress后台非内容数据，Gatsby构建时无需拉取。在gatsby-source-wordpress配置中添加过滤规则：

修改gatsby-config.js中的WordPress插件配置：

{
  resolve: `gatsby-source-wordpress`,
  options: {
    url: `https://subdomain.domain.net/graphql`,
    // 只拉取需要的内容类型
    type: {
      Post: { limit: 1000 },
      MediaItem: { limit: 1000 },
      // 按需添加其他需要的类型（如Page）
    },
    // 或直接排除不需要的字段
    excludeFieldNames: [`enqueuedScripts`, `enqueuedStylesheets`, `actionMonitorActions`, `plugins`, `themes`],
  }
}

2. 对齐依赖版本兼容性 #

当前gatsby-source-wordpress@7.7.0与Gatsby 5.7.0可能存在版本兼容问题，更新到最新兼容版本：

npm uninstall gatsby-source-wordpress
npm install gatsby-source-wordpress@latest

同时确保所有Gatsby生态插件版本一致（如gatsby-plugin-sharp、gatsby-transformer-sharp等）。

3. 修复gatsby-node.js与模板的空值处理 #

若文章无特色图片，当前代码会因空值调用报错，添加空值判断：

修改gatsby-node.js中的页面创建逻辑：

allPosts.forEach(post => {
  createPage({
    path: post.uri,
    component: slash(postTemplate),
    context: {
      id: post.id,
      title: post.title,
      content: post.content,
      excerpt: post.excerpt,
      image: post.featuredImage?.node?.localFile?.childImageSharp?.gatsbyImageData || null,
      alt: post.featuredImage?.node?.altText || ''
    },
  })
})

修改文章模板文件的图片渲染逻辑：

const BlogPostTemplate = ({pageContext}) => {
  const image = pageContext.image ? getImage(pageContext.image) : null;

  return(
    <Layout headerColor='#1a1e23'>
      <Wrap>
        {image && <GatsbyImage image={image} alt={pageContext.alt}/>}
        <Container dangerouslySetInnerHTML={{ __html:  `<h1>${pageContext.title}</h1> ${pageContext.content}` }} />
      </Wrap>
    </Layout>
  )
}

4. 清理缓存后重新构建 #

执行以下命令清理缓存与依赖，重新安装后构建：

gatsby clean
rm -rf node_modules package-lock.json
npm install
gatsby build

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