Font Awesome field returns nulls for new registered fields

[jan-clockworkwp]

Description

Hi, seems like after some updates there is an issue with the field resolution for custom registered field like for example FontAwesomeIcon (code provided in steps to reproduce).

I am successfully using this field that I registered just a couple of weeks ago on pages and also on the options page in some previously registered fields. However, when I try to register a new field of this type, it suddenly returns null for item attributes in GraphQL. The value is set and visible in the WP Admin, properly stored in the database, and the field is correctly resolved in the filter graphql_resolve_field. When I hook into graphql_resolve_field and dump the $result value for this field, all data looks like the data I would expect to be returned by GraphQL. However, if the query is run, all object items contain a value of null. If the field does not have any value, null is returned as expected.

"icon": {
    "id": null,
    "class": null,
    "element": null,
    "family": null,
    "hex": null,
    "prefix": null,
    "style": null,
    "unicode": null
},
"emptyIconField": null

Probably worth mentioning that if I colocate this new field just next to the working icon that is part of the repeater socialIcons FontAwesome field on the options page, it returns proper data and not nulls. In example below iconFa is the new icon that does not work in previous example.

"socialIcons": [
    {
        "icon": {
            "id": "x-twitter"
        },
        "iconFa": {
            "id": "medal",
            "class": "fa-classic fa-solid fa-medal",
            "element": "<i class=\"fa-classic fa-solid fa-medal\" aria-hidden=\"true\"></i>",
            "family": "classic",
            "hex": "\\f5a2",
            "prefix": "fa-classic fa-solid",
            "style": "solid",
            "unicode": "&#xf5a2;"
        }
    },
    {
        "icon": {
            "id": "linkedin"
        },
        "iconFa": {
            "id": "lightbulb",
            "class": "fa-classic fa-regular fa-lightbulb",
            "element": "<i class=\"fa-classic fa-regular fa-lightbulb\" aria-hidden=\"true\"></i>",
            "family": "classic",
            "hex": "\\f0eb",
            "prefix": "fa-classic fa-regular",
            "style": "regular",
            "unicode": "&#xf0eb;"
        }
    }
]

This looks like something similar that was happening here #128 , but I was not able to figure out what is going wrong between filters graphql_resolve_field where the correct value is resolved and graphql_request_results where the incorrect value is in the response and what plugin is responsible for introducing this strange behavior.

To discard all the nuances mentioned above and the intricacies related to the setup, I have set up a vanilla testing environment with only the necessary plugins enabled and updated to the latest versions. I am getting null values for the options page registered field as well as for the field registered on the page. Could anyone please have a look at what is going wrong between the field resolution and what is actually returned by the WPGraphQL plugin?

Steps to reproduce

1. Set up the environment with ACF Pro, WPGraphQL, Font Awesome for ACF, WPGraphQL ACF extensions
2. Register FontAwesomeIcon field type and object type

/** Register a Font Awesome icon GraphQL type to the shape that is coming from the ACF field
 * @see: https://www.wpgraphql.com/functions/register_graphql_object_type
 */
add_action('graphql_register_types', function () {
    register_graphql_object_type('FontAwesomeIcon', [
        'description' => 'Represents a Font Awesome icon',
        'fields' => [
            'element' => [
                'type' => 'String',
                'description' => __('The HTML element for the icon', 'gadoe'),
            ],
            'class' => [
                'type' => 'String',
                'description' => __('The CSS class for the icon', 'gadoe'),
            ],
            'id' => [
                'type' => 'String',
                'description' => __('The ID of the icon', 'gadoe'),
            ],
            'family' => [
                'type' => 'String',
                'description' => __('The icon family', 'gadoe'),
            ],
            'style' => [
                'type' => 'String',
                'description' => __('The icon style', 'gadoe'),
            ],
            'prefix' => [
                'type' => 'String',
                'description' => __('The prefix for the icon class', 'gadoe'),
            ],
            'hex' => [
                'type' => 'String',
                'description' => __('The hex value of the icon', 'gadoe'),
            ],
            'unicode' => [
                'type' => 'String',
                'description' => __('The unicode value of the icon', 'gadoe'),
            ],
        ],
    ]);
});

/** Register Font Awesome third party ACF field type
 * @see: https://acf.wpgraphql.com/adding-support-for-3rd-party-acf-field-type/
 */
add_action('wpgraphql/acf/registry_init', function () {
    register_graphql_acf_field_type('font-awesome', [
        'graphql_type' => static function () {
            return 'FontAwesomeIcon';
        },
    ]);
});

3. Register dummy options page and dummy icon field via ACF Admin or simply import provided fields export
4. Populate data for the new fields
5. Try to query data in GraphiQL IDE, if field was populated with the icon then data is returned but values are set to null, if icon is not populated null is returned.

query Page {
  testingOptionPage {
    testingOptionPageFields {
      __typename
      icon {
        id
      }
      emptyIconField {
        id
      }
    }
  }
  pages(where: {search: "Sample"}) {
    nodes {
      title
      pageFields {
        icon {
          id
        }
      }
    }
  }
}

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

add_action( 'acf/include_fields', function() {
if ( ! function_exists( 'acf_add_local_field_group' ) ) {
return;
}

acf_add_local_field_group( array(
'key' => 'group_674847d833baa',
'title' => 'Page Fields',
'fields' => array(
	array(
		'key' => 'field_674847d80aaa1',
		'label' => 'Icon',
		'name' => 'icon',
		'aria-label' => '',
		'type' => 'font-awesome',
		'instructions' => '',
		'required' => 0,
		'conditional_logic' => 0,
		'wrapper' => array(
			'width' => '',
			'class' => '',
			'id' => '',
		),
		'icon_sets' => array(
			0 => 'solid',
		),
		'custom_icon_set' => '',
		'default_label' => '',
		'default_value' => '',
		'save_format' => 'object',
		'allow_null' => 0,
		'show_preview' => 1,
		'enqueue_fa' => 0,
		'allow_in_bindings' => 0,
		'show_in_graphql' => 1,
		'graphql_description' => '',
		'graphql_field_name' => 'icon',
		'graphql_non_null' => 0,
		'fa_live_preview' => '',
		'choices' => array(
		),
	),
),
'location' => array(
	array(
		array(
			'param' => 'post_type',
			'operator' => '==',
			'value' => 'page',
		),
	),
),
'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' => 'pageFields',
'map_graphql_types_from_location_rules' => 0,
'graphql_types' => '',

) );

acf_add_local_field_group( array(
'key' => 'group_66b9e493244cf',
'title' => 'Testing Option Page',
'fields' => array(
	array(
		'key' => 'field_67483561ce9cb',
		'label' => 'Icon',
		'name' => 'icon',
		'aria-label' => '',
		'type' => 'font-awesome',
		'instructions' => '',
		'required' => 0,
		'conditional_logic' => 0,
		'wrapper' => array(
			'width' => '',
			'class' => '',
			'id' => '',
		),
		'relevanssi_exclude' => 0,
		'icon_sets' => array(
			0 => 'solid',
		),
		'custom_icon_set' => 'ACFFA_custom_icon_list_v6_Infographics',
		'default_label' => '',
		'default_value' => '',
		'save_format' => 'object',
		'allow_null' => 0,
		'show_preview' => 0,
		'enqueue_fa' => 0,
		'allow_in_bindings' => 0,
		'show_in_graphql' => 1,
		'graphql_description' => '',
		'graphql_field_name' => 'icon',
		'graphql_non_null' => 0,
		'fa_live_preview' => '',
		'choices' => array(
		),
	),
	array(
		'key' => 'field_67483a386b5d5',
		'label' => 'Empty Icon Field',
		'name' => 'empty_icon_field',
		'aria-label' => '',
		'type' => 'font-awesome',
		'instructions' => '',
		'required' => 0,
		'conditional_logic' => 0,
		'wrapper' => array(
			'width' => '',
			'class' => '',
			'id' => '',
		),
		'relevanssi_exclude' => 0,
		'icon_sets' => array(
			0 => 'solid',
			1 => 'regular',
			2 => 'brands',
		),
		'custom_icon_set' => '',
		'default_label' => '',
		'default_value' => '',
		'save_format' => 'element',
		'allow_null' => 0,
		'show_preview' => 1,
		'enqueue_fa' => 0,
		'allow_in_bindings' => 1,
		'show_in_graphql' => 1,
		'graphql_description' => '',
		'graphql_field_name' => 'emptyIconField',
		'graphql_non_null' => 0,
		'fa_live_preview' => '',
		'choices' => array(
		),
	),
),
'location' => array(
	array(
		array(
			'param' => 'options_page',
			'operator' => '==',
			'value' => 'testing-option-page',
		),
	),
),
'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' => 'testingOptionPageFields',
'map_graphql_types_from_location_rules' => 0,
'graphql_types' => '',

) );
} );

add_action( 'acf/init', function() {
acf_add_options_page( array(
'page_title' => 'Testing Option page',
'menu_slug' => 'testing-option-page',
'menu_title' => 'Testing Options Page',
'position' => 9999,
'redirect' => false,
'menu_icon' => array(
'type' => 'dashicons',
'value' => 'dashicons-admin-generic',
),
'icon_url' => 'dashicons-admin-generic',
'show_in_graphql' => true,
'graphql_type_name' => 'TestingOptionPage',
) );
} );

Additional context

No response

WPGraphQL Version

1.29.2

WPGraphQL For ACF Version

2.4.1

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

Pro: 6.3.11

WordPress Version

6.7.1

PHP Version

8.3.11

Additional enviornment details

Advanced Custom Fields: Font Awesome v4.1.1

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.