Fields inside repeater return null and/or empty arrays: Link, File and Post Object

[gnathang]

Description

Hiya, I'm using Next.js and WPGraphQL/Apollo in a headless WP system using Colby Faycock's great starter.

I think this issue has already been flagged, but I think that nested Link, File and Post Object field types return null, or produce empty edges and nodes arrays, in the case of Post Object.

With the Link field it seems that the field name is being renamed 'pageLink' every time. (In my fields, this field is named as slideLink). All other ACF field types I've used so far seem to work fine.

An example ACF structure, if it helps: Flex (field group) > Flex (flexible content) > Text Slides (flexible content layout) > Slides (repeater) > SlideLink (link field).

I'm not sure if the 'make non-null' option has anything to do this this or not!

Here's some screenshots in GraphiQL IDE in the order Link, File and Post Object (with console log).

Thank you!

Steps to reproduce

1. upload the field group 'flex' from the JSON file attached below
2. choose the 'Text Slides' layout to test the slideLink (link) fields inside the 'slides' repeater. (please note in this example, the slideLink field name always changes to pageLink in the schema, hence I have used it here.
3. choose the 'Video' layout to test the videoFileUpload (file) field.
4. choose the 'Wayfinder' flex to test the pagePost (post object) field.
5. query these using the pictures like this:

here's the query i'm using in my next.js app:

query PageByUri($uri: ID!) { page(id: $uri, idType: URI) { flex { fieldGroupName flex { ... on FlexFlexTextSlidesLayout { fieldGroupName layout thisIsALink { target url title } slides { bigTitle smallTitle textBody video { cursor node { sourceUrl(size: BANNER) srcSet(size: BANNER) uri sizes(size: BANNER) } } image { cursor node { altText sizes(size: BANNER) sourceUrl(size: BANNER) srcSet(size: BANNER) uri } } } } ... on FlexFlexWayfinderLayout { fieldGroupName introText layout smallTitle title link { target title url } signposts { fieldGroupName pagePost { edges { cursor } nodes { ... on Post { id featuredImage { cursor node { altText srcSet(size: BANNER) sourceUrl(size: BANNER) } } title(format: RAW) postId link } slug uri ... on Page { featuredImage { cursor node { altText sourceUrl(size: BANNER) srcSet(size: BANNER) uri } } content(format: RAW) id } } } } } } } } }
__

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

acf-export-2024-06-03.json

Additional context

No response

WPGraphQL Version

Version 1.26.0

WPGraphQL For ACF Version

Version 2.2.0

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

7.3.0.1, Pro

WordPress Version

6.5.3

PHP Version

8.4 (tried on 8.0 too, but didn't work!)

Additional enviornment details

No response

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

• Yes

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

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

[gnathang]

please let me know what other info you need for the reproduction :)

[ttstauss]

This issue is holding us back from migrating to the new plugin. Here's a very minimal reproduction if that's helpful (our implementation is via blocks but seems to still be an issue with a normal acf field group which this includes): https://www.dropbox.com/scl/fi/llfjlg1vm0akppue0ulpy/ACF-Repeater-Fields.zip?rlkey=g7z0t11zu78on7lq52puf1g30&st=43twx36g&dl=0 (this is a zip generated from LocalWP). The username and password is test.

[jasonbahl]

@gnathang when I tried to reproduce, I started by importing your ACF Field Group, but I get the following debug message:

The ACF Field or Field Group could not be added to the schema. GraphQL Field and Type names cannot start with a number

          "key": "layout_620295a0f3b18",
          "name": "2_col_text",
          "label": "2 Column Text",

I will fix that field group config and try again, but wanted to point that out.

[jasonbahl]

@gnathang after updating the name of the layout to "two_col_text" I then saved data in the flex field:

And was able to query and see results:

---

I tried to reproduce with the following:

• WordPress: 6.5.4
• PHP: 8.1.23
• WPGraphQL v1.27.0
• ACF Pro v6.3.1.2
• WPGraphQL for ACF v2.3.0

[jasonbahl]

@ttstauss it looks like the issue with the "Page Link" field is different than the issue opened here.

It looks like WPGraphQL for ACF is mistakenly mapping the PageLink field type to a connection, but that's not actually how the ACF Page Link Field is intended to be used. see: https://www.advancedcustomfields.com/resources/page-link/#template-usage

The page link field is intended to return a link (string) and not an object representing the page.

I think we should open a separate issue to fix the Type mapping for the ACF "Page Link" field type as it should return a string and not a Connection as it currently does, as ACF does not return data that can be used to resolve a connection, instead it returns a url.

[jasonbahl]

@ttstauss I opened a new issue related to the PageLink field specifically: #213

[ttstauss]

Thanks, @jasonbahl! That makes total sense.

[gnathang]

thanks both! will try this out now.

is it this same problem that makes the file and post object field types return null also?

and does it have anything to do with being inside a repeater? because elsewhere it seems to work fine!

[jasonbahl]

is it this same problem that makes the file and post object field types return null also?

@gnathang can you elaborate? fields on repeaters appear to be working as expected for me:

I can add data to a repeater within a flex field using the ACF Field Group export you shared:

And I can query and get values, as expected, for the fields:

If you're getting null values, I would recommend:

• Ensuring the data is publicly queryable. i.e. are you trying to query for non-public data? (i.e. unpublished posts, etc)
• Try reproducing without extra plugins activated. Possibly something is happening in a filter or something
• Check the plugin versions
• Check the values in the database to ensure the data has been saved the way you expect to to be saved

---

if there's an issue with file and post object field types, it would be good to provide an isolated reproduction in a new issue. Can you reproduce it with just WPGraphQL + ACF + WPGraphQL for ACF active and nothing else? Does it happen with just a simple field group or only with more complex field group setups? For example, I've seen some issues arise because different field groups have the same graphql_field_name as another field group and things get weird.

[gnathang]

Sorry for the slow reply. I have now returned some values for the Page Link field! Having trouble with null results elsewhere, but will reach out to Discord and discussions first. Thank you all for your help!

[josephfusco]

Hey @gnathang, if you can expand on the troubles you are having, we would love to see if we can get this resolved. The more info you can share the better 🙌🏼

[vilmarfonseca]

Hey @jasonbahl and @josephfusco,

I wanted to share my experience regarding this issue. We’re currently working on a client project where we need to update WPGraphQL for ACF from version 0.6.2 to 2.4.1, but we’re blocked by this specific issue.

I set up a new WordPress project using DDEV and managed to replicate the problem by matching the configuration from our client project. We’re primarily using ACF fields, particularly the Link type, to add submenu items to the header navigation. To thoroughly test this, I enhanced the example to include all the field types with reported error on this thread, and I can confirm that the issue persists with Link, Page Link, and File fields.

Here’s a snapshot of the ACF fields setup:

And here are the query results:

We would greatly appreciate any help resolving this issue, especially with the Link field, as it’s crucial for our menu. We’ve been stuck on this migration for a while, so any insights would be valuable. Thank you in advance! :)

Steps to Reproduce

1. Create a new project using ddev.
2. Install only the necessary plugins:
   • WPGraphQL v1.28.1
   • WPGraphQL for ACF v2.4.1
   • ACF Pro v6.3.7
3. Add an empty custom theme.
4. In ACF, import the JSON below to create the required fields:

    {
        "key": "group_641a25d87f96c",
        "title": "Navigation Menu",
        "fields": [
            {
                "key": "field_641a266d347b2",
                "label": "Items",
                "name": "items",
                "aria-label": "",
                "type": "repeater",
                "instructions": "",
                "required": 0,
                "conditional_logic": 0,
                "wrapper": {
                    "width": "",
                    "class": "",
                    "id": ""
                },
                "layout": "block",
                "pagination": 0,
                "min": 0,
                "max": 0,
                "collapsed": "field_641a26cc347b4",
                "button_label": "Add Row",
                "show_in_graphql": 1,
                "graphql_description": "",
                "graphql_field_name": "items",
                "graphql_non_null": 0,
                "rows_per_page": 20,
                "sub_fields": [
                    {
                        "key": "field_6702c91aca488",
                        "label": "Title",
                        "name": "title",
                        "aria-label": "",
                        "type": "text",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "default_value": "",
                        "maxlength": "",
                        "allow_in_bindings": 0,
                        "placeholder": "",
                        "prepend": "",
                        "append": "",
                        "show_in_graphql": 1,
                        "graphql_description": "",
                        "graphql_field_name": "title",
                        "graphql_non_null": 0,
                        "parent_repeater": "field_641a266d347b2"
                    },
                    {
                        "key": "field_6702ca252c94d",
                        "label": "Post Object",
                        "name": "post_object",
                        "aria-label": "",
                        "type": "post_object",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "post_type": "",
                        "post_status": "",
                        "taxonomy": "",
                        "return_format": "object",
                        "multiple": 0,
                        "allow_null": 0,
                        "allow_in_bindings": 0,
                        "bidirectional": 0,
                        "show_in_graphql": 1,
                        "graphql_description": "",
                        "graphql_field_name": "postObject",
                        "graphql_connection_type": "one_to_many",
                        "ui": 1,
                        "bidirectional_target": [],
                        "parent_repeater": "field_641a266d347b2"
                    },
                    {
                        "key": "field_6702ca362c94e",
                        "label": "Page Link",
                        "name": "page_link",
                        "aria-label": "",
                        "type": "page_link",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "post_type": "",
                        "post_status": "",
                        "taxonomy": "",
                        "allow_archives": 1,
                        "multiple": 0,
                        "allow_null": 0,
                        "allow_in_bindings": 0,
                        "show_in_graphql": 1,
                        "graphql_description": "",
                        "graphql_field_name": "pageLink",
                        "graphql_connection_type": "one_to_many",
                        "parent_repeater": "field_641a266d347b2"
                    },
                    {
                        "key": "field_6702caf7554d9",
                        "label": "Link",
                        "name": "link",
                        "aria-label": "",
                        "type": "link",
                        "instructions": "",
                        "required": 0,
                        "conditional_logic": 0,
                        "wrapper": {
                            "width": "",
                            "class": "",
                            "id": ""
                        },
                        "return_format": "url",
                        "allow_in_bindings": 0,
                        "show_in_graphql": 1,
                        "graphql_description": "",
                        "graphql_field_name": "link",
                        "graphql_non_null": 0,
                        "parent_repeater": "field_641a266d347b2"
                    }
                ]
            }
        ],
        "location": [
            [
                {
                    "param": "nav_menu_item",
                    "operator": "==",
                    "value": "5"
                }
            ]
        ],
        "menu_order": 0,
        "position": "normal",
        "style": "default",
        "label_placement": "top",
        "instruction_placement": "label",
        "hide_on_screen": "",
        "active": true,
        "description": "",
        "show_in_rest": 0,
        "show_in_graphql": 1,
        "graphql_field_name": "navigationMenu",
        "map_graphql_types_from_location_rules": 0,
        "graphql_types": ""
    }
]

5. Create a new menu and add content to the fields at Appearance -> Menus.
6. Query the menu data using the GraphQL IDE.

Versions

• PHP - v8.2
• Wordpress - v6.6.2