从Gatsby使用meta query查询Wordpress时遇where参数不识别问题

问题原因 #

gatsby-source-wordpress 默认不会自动同步 WPGraphQL 扩展的自定义查询参数，你在 WordPress 端通过 WPGraphQL Meta Query 插件添加的 where 查询参数，默认不会被同步到 Gatsby 的 GraphQL Schema 中，因此会触发参数不存在的报错。

解决步骤 #

• 第一步：修改项目根目录下的 gatsby-config.js 配置，找到 gatsby-source-wordpress 插件的配置项，添加参数注册和透传配置：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        // 保留你原本的其他配置，比如WP GraphQL端点地址等
        url: `你的WordPress GraphQL接口地址`,
        // 新增以下配置
        type: {
          Query: {
            allWpPage: {
              args: {
                where: {
                  type: `WpPageWhereInput`,
                  description: `WPGraphQL Meta Query 筛选参数`,
                },
              },
            },
          },
        },
        deriveDataTypeFromRemoteSchema: true,
      },
    },
    // 保留其他插件配置
  ]
}

如果你使用的是v6以下版本的gatsby-source-wordpress，将上述type配置项放到schema字段下即可。

• 第二步：配置修改完成后，执行清理缓存并重启项目的命令：

gatsby clean && gatsby develop

重启完成后即可在Gatsby的GraphiQL工具中正常使用带where参数的查询语句。

补充说明 #

如果需要给文章、自定义文章类型也开启meta query筛选能力，无需逐个配置参数，只需在type.Query下对应类型的查询配置中添加相同的where参数注册即可。

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