Conditional images within Repeater field return null

miacias commented 2 months ago

Description

I have existing data that I cannot retrieve from ACF via WPGraphQL. Specifically, the productImage field, nested within two repeaters, is returning null when images are saved.

Steps to reproduce

I'm not sure if the conditional element matters or the styled layout of the repeater fields, so here is everything from my experience that caused the issue:

Create a field group called "Sale" that applies to a Post's category
Add a repeater field to the field group called "Categories" with a layout of Block
Add a checkbox field to the Categories field group called "Category Name" with a pre-filled choice list
Add a repeater field called "Products" with a layout of Table inside the Categories repeater
Add a true/false field inside the Products repeater called "Popular"
Add an image field called "Product Image" that conditionally appears only when the "Popular" true/false field's value is true (checked) with a return format of Image URL
Create a Post, select the given category, "Sale," that will populate the "Products" field group
Make a set of 5 products with some popular and some not popular. For products that are popular, add an image
Query the post by databaseId

example query:

query GetSalePostById($databaseId: ID!, $asPreview: Boolean = false) {
  post(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
    databaseId
    sale {
      popular
      productImage {
        node {
          sourceUrl
          mediaDetails {
            width
            height
          }
        }
      }
    }
  }
}

example query variables:

{
  "databaseId": "467"
}

PHP or JSON export of the ACF Field Group(s)

acf-export-2024-09-16.zip

Additional context

No response

WPGraphQL Version

1.28.1

WPGraphQL For ACF Version

2.4.1

ACF (Advanced Custom Fields) Version. Free or Pro?

Pro 6.3.6

WordPress Version

6.6.2

PHP Version

8.3.8

Additional enviornment details

additional plugins

Faustjs v1.4.1

coding environment

LocalWP v9.0.5+6706
MySQL v8.0.16

Front end framework: Nextjs

package.json

"dependencies": {
    "@apollo/client": "^3.11.8",
    "@faustwp/cli": "^3.1.0",
    "@faustwp/core": "^3.1.0",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-brands-svg-icons": "^6.6.0",
    "@fortawesome/free-regular-svg-icons": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@wordpress/base-styles": "^5.7.0",
    "@wordpress/block-library": "^9.7.0",
    "classnames": "^2.5.1",
    "graphql": "^16.9.0",
    "next": "^14.2.11",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "sass": "^1.78.0",
    "sharp": "^0.33.5"
  },
  "devDependencies": {
    "next-secure-headers": "^2.2.0"
  },
  "engines": {
    "node": ">=18",
    "npm": ">=8"
  }

Please confirm that you have searched existing issues in the repo.

[X] Yes

Please confirm that you have disabled ALL plugins except for WPGraphQL, WPGraphQL For ACF, ACF, etc.

[X] Yes
[ ] My issue is with compatibility with a specific WordPress plugin, and I have listed all my installed plugins (and version info) above.

miacias commented 1 month ago

miacias commented 2 weeks ago

Here are some screenshots showing this issue in action where the images exist but return null:

miacias commented 2 weeks ago

Results from testing with other ACF types below within the given constraints from above (field nested in repeater, nested in repeater):

unexpected behavior:

gallery returns empty array
file returns null
image returns null

expected behavior:

number returns number
text returns text
true/false returns true/false
wysiwyg editor returns html string
embed link returns embed link

jamiemorganward commented 1 week ago

I have had a similar issue. Image fields inside a nested repeater with a return_format of 'url' will always show up as 'null' in the GraphQL response.

I haven't been able to work out exactly what is going on, but it seems to be because all image GraphQL fields are registered as a MediaItem connection in the schema, but the entire repeater field array is passed into the resolver. In this case the value of the image field is a URL, which doesn't match the schema.

I haven't tested it but I'd assume it's the same situation with files too. I also added some Page Links and they consistently show up as null. Again page links are strings but the schema defines them as connections as mentioned in #208.

It seems that there's an issue with repeater fields where the schema of nested fields doesn't always match what's returned by ACF.

In my case I was simply able to change the return_format of the image field to 'array' and that fixed it.

miacias commented 1 week ago

@jamiemorganward very good! Thank you for your insight on getting around this. I'm curious how this will be handled moving forward. Do you think this classes as a bug or is technically working as intended?

wp-graphql / wpgraphql-acf