WordPress ACF Gatsby环境下GraphQL无法获取ACF选项页数据如何解决

排查及查询方法 #

1. 补全选项页注册的GraphQL配置

你需要在注册ACF选项页的代码中添加GraphQL暴露参数，示例代码如下：

if( function_exists('acf_add_options_page') ) {
    acf_add_options_page(array(
        'page_title'    => 'Theme Options',
        'menu_title'    => 'Theme Options',
        'menu_slug'     => 'theme-options',
        'capability'    => 'edit_posts',
        'redirect'      => false,
        // 以下两个为必填的GraphQL配置项
        'show_in_graphql' => true,
        'graphql_field_name' => 'themeOptions',
    ));
}

2. 确认字段组开启GraphQL支持

进入你绑定到Theme Options的ACF字段组设置页，打开「Show in GraphQL」开关，保存配置后清理站点缓存。

3. 正确的查询语句

你可以直接在根查询下调用你设置的graphql_field_name值获取数据，示例查询如下：

query GetThemeOptions {
  themeOptions {
    # 替换为你自己定义的ACF字段名，自动转为小驼峰格式
    siteTitle
    footerCopyright
    contactPhone
  }
}

常见踩坑说明 #

• ACF字段名在GraphQL中会自动转为小驼峰格式，比如你后台定义的字段名为footer_copyright，查询时要写footerCopyright
• 每次修改配置后需要清理WPGraphQL缓存，再刷新GraphQL IDE的schema，才能看到新增的themeOptions查询字段
• 如果你是用可视化工具注册的选项页而非手动写代码，需要确认工具是否支持开启GraphQL暴露，否则需要手动覆盖注册参数

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