WP ACF repeater with image bug

Node version v6.7.0 Gatsby version 1.9.108

gatsby-config.js :

module.exports = {
  siteMetadata: {
    title: `Anchor Employee Rewards`,
    date : `Today`
  },
  plugins: [
    `gatsby-plugin-glamor`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      resolve: 'gatsby-source-wordpress',
      options: {
        baseUrl: 'anchor-admin.wearewhy.co.uk',
        protocol: 'http',
        hostingWPCOM: false,
        useACF: true,
        verboseOutput: true,
      }
    }
  ],
}

gatsby-node.js

const _ = require(`lodash`)
const Promise = require(`bluebird`)
const path = require(`path`)
const slash = require(`slash`)

exports.createPages = ({ graphql, boundActionCreators }) => {
  const { createPage } = boundActionCreators
  return new Promise((resolve, reject) => {
    graphql(
      `
        {
          allWordpressPage {
            edges {
              node {
                id
                slug
                status
                template
                acf {
                  hero_image {
                    source_url
                  }
                  hero_intro
                  benefit_list {
                    title
                    intro
                    content
                    article_image {
                      source_url
                    }
                  }
                }
              }
            }
          }
          wordpressPage(title : {eq : "Home"}) {
            acf {
               hero_image {
                  source_url
              }
              hero_intro
              page_menu {
                page {
                  post_title
                  post_name
                  }
               }
            }
         }
        }
      `
    )
      .then(result => {
        if (result.errors) {
          console.log(result);
          reject(result.errors)
        }
        // Create Page pages.
      
        resolve()
      })
  })
}

pacjage.json :

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "gatsby": "^1.9.102",
    "gatsby-image": "^1.0.24",
    "gatsby-link": "^1.6.22",
    "gatsby-plugin-glamor": "^1.6.8",
    "gatsby-plugin-sharp": "^1.6.20",
    "gatsby-plugin-typography": "^1.7.10",
    "gatsby-source-wordpress": "^2.0.36",
    "gatsby-transformer-sharp": "^1.6.13",
    "react-helmet": "^5.2.0",
  }
}

We have an issue whereby our site works correctly when we add a page with a repeater that includes maybe 3 or 4 images (in the above case the field is named article_image). When we then create a couple more similar pages the site stops working with the following error in our gatsby-node.js graphQL results callback.

GraphQLError: Field "article_image" must not have a selection since type "Boolean" has no subfields.

We can see when removing source_url as suggested that image just has a value of null If we delete the article_image acf field and create a new one with another name the site works again until we have added a few images and then the same issue occurs on the new field. We’ve tested a few things on the backend such as increasing the memory for WP as we thought it could be related to WP but it doesn’t appear to be as the images are still displaying correctly in the CMS- but are not accessible from the Gatsby app.

[SimonIMG]

I might have the solution, taken from this issue. I had this exact same issue. Working perfectly before - GraphQL was able to query image IDs and URLs and Gatsby was merrily displaying the image URLs. Then I added another flexible content field which contained an Image upload field (I’d used this flexible content field previously on a different page). I was getting

Field "gallery_image" must not have a selection since type "Boolean" has no subfields

I tried what was suggested by @craig-doyle-uk :- changing the Return Value from Image Array to Image URL and back to Image Array, then resaved the two pages with these fields used.

I also tried the other, earlier suggestion of removing the first item and adding it back in. Still no luck.

I took a look at @jsanchez034 's referenced issue. Still didn’t fix my issue.

Finally I looked at @kennethormandy 's reference to #4461 and that had the solution for me.

https://github.com/gatsbyjs/gatsby/issues/4461#issuecomment-371775563

As per the above post, in my WordPress theme’s functions.php file, I added the following…

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

    return $value;
}

add_filter('acf/format_value/type=image', 'nullify_empty', 100, 3);

Now my images are querying correctly in GraphQL, Gatsby is running and images in repeatable flexible fields are displaying correctly, while those that don’t have them also display correctly.

Hope this helps someone else.

[craig-doyle-uk]

Hi @sebastienfi , thanks for the response! The repeater works on most pages for us, but it breaks on other pages. Our problem is not an error when an image is missing, but when an image is added (and only on the first item in the repeater). If the image is missing it returns false as expected but if an image is added to the first element in the repeater it returns null for all image fields and causes and GraphQL error.

eg with image added to all elements in an acf repeater :

[
 { 
   image : null
 },
 { 
   image : null
 },
 { 
   image : null
 }
]

With the first image removed :

[
 { 
  image : false
 },
 { 
  image : {
   "id": "40a42e76-47c4-5d7a-bd6b-2decb3b86bdb"  
  }
 },
 { 
  image :  {
   "id": "902a524a-fc52-5e38-a6f2-82f97beda93c"  
  }
 }
]

This bug only occurs intermittently, with everything working well most of the time, but then failing on some pages. In some cases the repeater with Graphql is working perfectly until we add another page and then a page that is working then stops working!

I have no idea of what is happening but I think it is occurring in the normalise.js file in the plugin as I can see the image data is correct when it enters that file.