Gatsby结合WPGraphQL构建报错：Query类型上无法查询pages字段

问题排查方案 #

你遇到的报错核心原因是gatsby-source-wordpress插件默认修改了WPGraphQL的根查询字段命名，你可以按以下顺序排查修复：

1. 修正Gatsby中的查询字段

gatsby-source-wordpress默认会为所有从WordPress拉取的类型添加Wp前缀，集合查询额外添加all前缀：

• 你在Postman中直接请求WPGraphQL用的pages字段，对应Gatsby内部的查询字段是allWpPage
• 把gatsby-node.js中的查询替换为以下代码即可：

return graphql(`
  {
    allWpPage {
      edges {
        node {
          id
          slug
          status
        }
      }
    }
  }
`)

后续处理返回结果时，取值路径也对应改为result.data.allWpPage.edges即可。

2. 如果修正字段后仍报错，按以下步骤排查拉取异常

如果启动gatsby develop后访问http://localhost:8000/___graphql在左侧文档中找不到allWpPage字段，说明数据没有成功拉取到Gatsby中：

• 先清空Gatsby缓存重试，执行命令gatsby clean && gatsby develop，大部分schema未更新的问题都可以通过清理缓存解决
• 检查你的WPGraphQL端点是否开启了匿名访问限制：如果WordPress后台WPGraphQL设置中开启了「仅允许登录用户访问API」，Gatsby的匿名拉取请求会被拦截，需要关闭该选项
• 检查站点防火墙/WAF规则，是否拦截了Gatsby的服务端请求，你本地Postman可访问不代表Gatsby构建环境可以正常请求端点
• 确认WordPress后台至少存在1篇已发布的公开页面，没有公开数据的情况下Gatsby不会生成对应的查询字段

可选：关闭类型前缀

如果你希望Gatsby中的查询和原生WPGraphQL查询语法完全一致，可以修改gatsby-config.js中插件配置，关闭前缀规则：

{
  resolve: "gatsby-source-wordpress",
  options: {
    url: "https://*********/graphql",
    type: {
      __all: {
        prefix: false
      }
    }
  },
}

注意该配置容易和Gatsby内置字段产生命名冲突，非必要不推荐开启

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