GatsbyJS - GraphQL ACF query issue

Question

So I am encountering some issues with the way that my ACF is structured on a custom post type. Due to the way the post type works (it's for work case studies) there is the option to choose to use a video, showreel or photo to highlight some of the work done from the field project_choice, then the field group for these are conditional based to then show. Unfortunately due to the way that GraphQL is querying the data, it sees these fields as empty, I assume on its first iteration. So it doesn't query the data for the rest of the posts and thus when on localhost:8000/___graphql I am unable to query the other two project_choice groups.

Below is an output from 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

My queryable data with GraphQL, note that within project_group there is project_video, there should also be the option to query project_photo and showreel_group. Although when these are added, it breaks.

    {
      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
            }
          }
        }
      }
    }

The ACF structure in case needed, project_video, project_photo, and showreel_group are all conditionals from the option chosen from 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]

I have also tried to solve this issue by passing the project_choice into a conditional at component level, then use a StaticQuery to gather project_photo, showreel_group, and project_video in each catch, but as you can guess, that also didn't work.

I am wondering after some research if its due to the way that ACF returns empty fields, if it returns them as false it will just disregard the query, but if it is set to null it may not?

If anyone could shine any light on this, even if it means restructuring the ACF fields then that would be great, as this is one of the last things I have left to solve for a frontend rebuild I am doing. :)

Answer 1

FOUND SOLUTION

So my first assumption was correct, basically, the query will see the field as false, which will cause it to not query for those fields again.

I found a solution using a php function to sit within functions.php which basically tells ACF to return null if it is empty rather than 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

The above solution was the easiest for me, without taking a lot of time out reading up about Gatsby's new solution to this issue, although there are some links below for you to read if you wish to do it the new way.

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

some background behind the issue is found here.