GatsbyJS - GraphQL ACF 查询问题

Question

所以我遇到了一些关于我的 ACF 在自定义 post 类型上构建的方式的问题。由于 post 类型的工作方式（用于工作案例研究），可以选择使用 video、showreel 或 photo 来突出显示某些从字段 project_choice 完成的工作，然后这些字段组是有条件的，然后显示。不幸的是，由于 GraphQL 查询数据的方式，它会将这些字段视为 empty，我假设是在它的第一次迭代中。因此它不会查询其余 post 的数据，因此在 localhost:8000/___graphql 上我无法查询其他两个 project_choice 组。

下面是 gatsby develop

的输出


    warn Multiple node fields resolve to the same GraphQL field `wordpress__wp_angel_in_action.acf.project_group.project_video` - [`project_video___NODE`, `project_video`]. Gatsby will use `project_video___NODE`.
    warn Multiple node fields resolve to the same GraphQL field `wordpress__wp_media.guid` - [`guid___NODE`, `guid`]. Gatsby will use `guid___NODE`.
    warn Multiple node fields resolve to the same GraphQL field `wordpress__acf_angel_in_action.acf.project_group.project_video` - [`project_video___NODE`, `project_video`]. Gatsby will use `project_video___NODE`.
    warn There are conflicting field types in your data.
    
    If you have explicitly defined a type for those fields, you can safely ignore this warning message.
    Otherwise, Gatsby will omit those fields from the GraphQL schema.
    
    If you know all field types in advance, the best strategy is to explicitly define them with the `createTypes` action, and skip inference with the `@dontInfer` directive.
    See https://www.gatsbyjs.org/docs/actions/#createTypes
    
     - type: boolean
       value: false
     - type: number
       value: 512
    wordpress__wp_angel_in_action.acf.project_group.showreel_group.image_0:
     - type: boolean
       value: false
     - type: number
       value: 604
    wordpress__wp_angel_in_action.acf.project_group.showreel_group.image_1:
     - type: boolean
       value: false
     - type: number
       value: 668
    wordpress__wp_angel_in_action.acf.project_group.showreel_group.image_2:
     - type: boolean
       value: false
     - type: number
       value: 656
    wordpress__wp_angel_in_action.acf.image_section_two:
     - type: array
       value: [ ..., { image___NODE: [Object], dummy: true }, ... ]
     - type: boolean
       value: false
    wordpress__PAGE.acf.lower_images:
     - type: array
       value: [ ..., { image: 259 }, ... ]
     - type: boolean
       value: false
    wordpress__acf_angel_in_action.acf.project_group.project_photo:
     - type: boolean
       value: false
     - type: number
       value: 512
    wordpress__acf_angel_in_action.acf.project_group.showreel_group.image_0:
     - type: boolean
       value: false
     - type: number
       value: 604
    wordpress__acf_angel_in_action.acf.project_group.showreel_group.image_1:
     - type: boolean
       value: false
     - type: number
       value: 668
    wordpress__acf_angel_in_action.acf.project_group.showreel_group.image_2:
     - type: boolean
       value: false
     - type: number
       value: 656
    wordpress__acf_angel_in_action.acf.image_section_two:
     - type: array
       value: [ ..., { image___NODE: [Object], dummy: true }, ... ]
     - type: boolean
       value: false
    wordpress__acf_pages.acf.lower_images:
     - type: array
       value: [ ..., { image: 259 }, ... ]
     - type: boolean
       value: false

我用GraphQL查询的数据，注意project_group里面有project_video，应该还有查询project_photo和showreel_group的选项.尽管添加这些时，它会中断。


    {
      allWordpressWpAngelInAction {
        edges {
          node {
            title
            slug
            excerpt
            acf {
              subtitle
              hero {
                hero_image {
                  title
                  source_url
                }
              }
              image_section_one {
                image {
                  source_url
                }
              }
              text_section_one
              project_group {
                project_choice {
                  label
                }
                project_video {
                  source_url
                }
              }
              text_section_two
            }
          }
        }
      }
    }

ACF 结构以备不时之需，project_video、project_photo 和 showreel_group 都是从 project_choice.

中选择的选项的条件句


    project_group
      project_choice [radio button]
      project_video [file]
      project_photo [file]
      showreel_group [group]
        image_0 [file]
        image_1 [file]
        image_2 [file]
      project_text [text area]

我还尝试通过将 project_choice 传递到组件级别的条件来解决此问题，然后使用 StaticQuery 来收集 project_photo、showreel_group 和 project_video 在每个捕获中，但正如您猜到的那样，这也没有用。

我想知道经过一些研究，这是否是由于 ACF returns empty 字段的方式，如果它 returns 它们作为 false 它只会忽略查询，但如果设置为 null 可能不会？

如果有人能对此有所启发，即使这意味着重构 ACF 字段，那也很好，因为这是我为正在做的前端重建剩下的最后一件事。 :)

Answer 1

找到解决方案

所以我的第一个假设是正确的，基本上，查询会将字段视为 false，这将导致它不再查询这些字段。

我找到了一个使用 php 函数的解决方案，它位于 functions.php 中，它基本上告诉 ACF return null 如果它是 empty 而不是false.

function nullify_empty($value, $post_id, $field)
{
    if (empty($value)) {
        return null;
    }

    return $value;
}
add_filter('acf/format_value/type=group', 'nullify_empty', 100, 3); // prevents false groups
add_filter('acf/format_value/type=image', 'nullify_empty', 100, 3); // prevents false image field
add_filter('acf/format_value/type=relationship', 'nullify_empty', 100, 3); // prevents false relationship
add_filter('acf/format_value/type=file', 'nullify_empty', 100, 3); // prevents false file
add_filter('acf/format_value/type=repeater', 'nullify_empty', 100, 3); // prevents false repeater
add_filter('acf/format_value/type=gallery', 'nullify_empty', 100, 3);  // prevents false gallery

上面的解决方案对我来说是最简单的，没有花很多时间阅读 Gatsby 针对这个问题的新解决方案，尽管如果您希望以新的方式进行操作，下面有一些链接供您阅读.

https://www.gatsbyjs.org/blog/2019-03-04-new-schema-customization/

some background behind the issue is found here.

GatsbyJS - GraphQL ACF 查询问题

GatsbyJS - GraphQL ACF query issue

reactjs

advanced-custom-fields

graphql

gatsby