已解决 - GatsbyJS - GraphQL ACF 查询问题

Posted 2023-03-08

【中文标题】已解决 - GatsbyJS - GraphQL ACF 查询问题

【英文标题】：SOLVED - GatsbyJS - GraphQL ACF query issue

【发布时间】：2020-11-13 04:31:39

【问题描述】：

因此，我的 ACF 在自定义帖子类型上的结构方式遇到了一些问题。由于帖子类型的工作方式（用于工作案例研究），可以选择使用video、showreel 或photo 来突出显示在project_choice 领域完成的一些工作，然后这些字段组是有条件的，然后显示。不幸的是，由于 GraphQL 查询数据的方式，它将这些字段视为empty，我假设在它的第一次迭代中。所以它不会查询其余帖子的数据，因此当在 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 返回 empty 字段的方式，如果它以 false 返回它们，它将忽略查询，但如果它设置为 null 它可能不会?

如果有人能对此有所了解，即使这意味着重组 ACF 字段，那也很好，因为这是我为正在做的前端重建而要解决的最后一件事。 :)

【参考方案1】：

找到解决方案

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

我找到了一个解决方案，它使用一个位于 functions.php 中的 php 函数，它基本上告诉 ACF 返回 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.