Gatsby: Querying gallery fields using ACF flexible content + gatsby-source-wordpress

[gosseti]

I currently have a set-up where I’m using Gatsby to query from WordPress using gatsby-source-wordpress, and building a static site from the data.

Some of these pages use ACF (Advanced Custom Fields) to add some extra data to the default WordPress set-up. So far so good, apart from when it comes to ACF galleries using ACF’s flexible content, which use nested fields for images in the gallery.

Essentially what I want to have is a case-study custom post type that has ACF flexible content containing text and gallery content blocks. So far I’ve managed to pull in the text blocks, but no luck with the gallery (as these are nested arrays of gallery images).

This is my query code:

{
  allWordpressWpCaseStudy {
    edges {
      node {
        id
        title
        slug
        content
        acf {
          content_case_study {
            __typename
            ... on WordPressAcf_text {
              id
              text
            }
            ... on WordPressAcf_gallery {
              id
              caption
              // what goes in here to get the gallery images?
            }
          }
        }
      }
    }
  }
}

Where I’m using allWordpressWpCaseStudy it works well, but I’m unsure whether I need to use fragments (and how to use them) to grab the individual galleries by their ID (the current query gives me IDs for the gallery, but not the images themselves). Is this even the correct way to do it?

When hitting the /wp-json/wp/v2/case_study endpoint I can receive all the data successfully, so the problem seems to be in the way that I’m querying things within Gatsby. Here’s an example response from the JSON endpoint (trimmed down for brevity):

[
  {
    "id": 58,
    "date": "2018-09-21T04:39:16",
    "modified": "2018-09-21T20:05:17",
    "slug": "national-geographic",
    "status": "publish",
    "type": "case_study",
    "link": "https://api.ps-spaces.com/case_study/national-geographic/",
    "title": {
      "rendered": "National Geographic"
    },
    "content": {
      "rendered": "<p class=\"p1\">Qui homero civibus perfecto no, ei pro legendos iracundia. Te verear deserunt theophrastus nec, saepe constituto te mei, elitr persius his id. Sed an consul maiorum fabellas, per nisl altera accusam id, quaestio necessitatibus est ex. Vitae evertitur nec ne.</p>\n<p class=\"p1\">Autem eirmod ex his, electram vulputate rationibus nec ad. Usu an dico oblique iuvaret, eu mea reque assum everti. Et natum dicant mentitum mei, sed an sale consequat. Vis phaedrum mandamus te, ferri fuisset phaedrum vix no.</p>\n",
      "protected": false
    },
    "template": "",
    "categories": [],
    "acf": {
      "content": [
        {
          "acf_fc_layout": "text",
          "text": "Lorem ipsum dolor amet food truck PBR&B activated charcoal poutine, everyday carry vaporware biodiesel meh blog pour-over bicycle rights locavore. Mumblecore viral succulents mlkshk etsy salvia tumeric bicycle rights dreamcatcher selfies umami selvage XOXO bushwick. Austin actually selfies, heirloom literally mlkshk asymmetrical flexitarian. Shoreditch cred distillery, yuccie pabst banh mi prism selfies af glossier normcore tacos twee live-edge."
        },
        {
          "acf_fc_layout": "gallery",
          "gallery": [
            {
              "ID": 59,
              "sizes": {
                "thumbnail": "https://api.ps-spaces.com/wp-content/uploads/2018/09/13-07-2018-PS-Testing-day_1_-5-150x150.jpg",
                "thumbnail-width": 150,
                "thumbnail-height": 150,
                // …etc.
              }
            },
            {
              "ID": 39,
              "sizes": {
                "thumbnail": "https://api.ps-spaces.com/wp-content/uploads/2018/08/brixton-1-header-150x150.jpg",
                "thumbnail-width": 150,
                "thumbnail-height": 150,
               // …etc.
              }
            }
          ],
          "caption": "Caption Text"
        },
        {
          "acf_fc_layout": "text",
          "text": "Lorem ipsum dolor amet affogato taiyaki meggings tbh, occupy adaptogen deep v flexitarian pop-up. Humblebrag subway tile fanny pack cardigan ennui church-key. Helvetica typewriter mlkshk, cardigan lomo enamel pin tacos. Pinterest chambray irony succulents tacos vaporware. Roof party cliche shaman, vexillologist flannel keytar next level meh shabby chic taiyaki tousled pug tbh brooklyn. Shaman freegan shoreditch kale chips godard vaporware marfa ugh cardigan slow-carb. Scenester kombucha +1 kickstarter kitsch."
        }
      ]
    }
  }
]

Doing some inspection via the normalizer function in gatsby-config.js, it’s showing me that the arrays for the gallery images become empty and renamed to gallery___NODE: []. Why is this array being renamed and emptied, despite the JSON being perfectly intact and containing the data I need?

[benistary]

Same problem in my project and it starts when I've updated node with homebrew on my mac. There is official fix for this kind of errors ( https://www.gatsbyjs.org/packages/gatsby-source-wordpress/#graphql-error---unknown-field-on-acf ) but for me it stops working.

[kakadiadarpan]

@gosseti maybe this documentation can help you.

[gosseti]

I’ve set those options up and no luck with it unfortunately. It seems even when the gallery is part of the top level ACF query, it still can’t find it, and still shows an empty array in the normalizer. We are getting the gallery through on the API endpoint, it’s just being transformed incorrectly into a GraphQL schema.

{
  allWordpressWpCaseStudy {
    edges {
      node {
        id
        title
        slug
        content
        acf {
          gallery {
            // this doesn’t work either
          }
        }
      }
    }
  }
}

I’m going to have a dig into the core plugin code and see where it might be tripping up.

[kakadiadarpan]

@pieh any suggestions on this?

[pieh]

It looks like this does empty the array:
https://github.com/gatsbyjs/gatsby/blob/efe95a4eb4326e4b116c54346ced7412cc7be467/packages/gatsby-source-wordpress/src/normalize.js#L399-L406
The job of that piece of code is to replace wordpress image data with link to local image NODE (to enable sharp transformation).

do you have any media entities if you use that in normalizer in gatsby-config: const media = entities.filter(e => e.__type === `wordpress__wp_media`) ? Maybe urls don't match and that's why entries get filtered out

[gosseti]

Running const media = entities.filter(e => e.__type === 'wordpress__wp_media') in the gatsby-config.js’s normalizer returns an empty array [].

I’m currently patching up gatsby-source-wordpress’s normalize.js to do a check to see if there’s a nested array in the acf property inside the getMediaFromValue function.

Would this be the best way to go? Essentially we need to flag deleteField: false for those cases and it’ll be good to go (based on my tests so far).

[pieh]

If you get empty media array then wordpress plugin can't match images to media nodes - did you disable media endpoint? Try setting verboseOutput in gatsby-config for wordpress plugin to true

[gosseti]

Oh very silly of me, that was exactly it! I’d blacklisted the media endpoint in excludedRoutes. That’s now added back in and everything is working perfectly.

[imlastrebor]

I think I have same problem but haven't find solution. I've added acf gallery and flexible content gallery to my post and can't find either of these. Media is listed in gatsby-config.js to includedRoutes and I turned verboseOutput to true. How you query acf gallery if i'm doing that wrong?