Skip to content
Home » ACF – GraphQL API’s returning null values

ACF – GraphQL API’s returning null values

Wordpress-ACF-GraphQL

We were updating our website and was adding links to our blog pages. we came across a strage problem. For trh website CMS we were making use of WordPress along with Advanced Custom Fields Pro(ACF) Plugin. We were using the GraphQL APIs from WordPress to render the HTML page using Gatsby. Everything was working fine till we did a recent update of a new field to the services offering. we added a URL field to link to our blog page. But the GraphQL query qas was returning null values even when we had give values.

WordPress Environment Details

WordPress Version : 6.1.1

Advanced Custom Fields Pro Version. : 6.0.7

WPGraphQL: 1.14.0

WPGraphQL for Advanced Custom Fields : 0.3.5

We were adding fields groups as usual

But the query was returning empty values. Even when were were updating the content and republishing for the changes to reflect it was giving the same response. Even tough the subsequent values were getting updated . We appended random strings to title. But the url field was still coming in as empty

This GraphQL Query

{
  pageBy(pageId: 786) {
    acf_home  {
      services {
        title 
        url
        description
      }
    }
  }
}
{
  "data": {
    "pageBy": {
      "acf": {
        "services": [
          {
            "title": "Product Engineering 2",
            "url":null,
            "description": "At CeeGees, product engineering is a lot of fun because it entails everything from idea creation to design, development, testing, and finally deployment of the software product. You come with your dream and we help you fulfil it . Read More 2"
          },
          {
            "title": "Quality Engineering Services",
            "url":null,
            "description": "Quality Engineering Services are a set of processes, methodologies, and techniques designed to ensure that a product or service meets the quality standards and the requirements of the stakeholders."
          },
          {
            "title": "Product Design",
            "url":null,
            "description": "Product design at CeeGees is a little different, because our designers make sure to balance user wants with user needs in order to enable the company to reliably produce effective, and user-friendly products.\r\n"
          }
        ]
      }
    }
  },
  "extensions": {
    "debug": [ 
     {
        "type": "DEBUG_LOGS_INACTIVE",
        "message": "GraphQL Debug logging is not active. To see debug logs, GRAPHQL_DEBUG must be enabled."
      }
    ]
  }
}

After spending sometime debugging and not able to get the expected results back , we turned on the debugger from the settings. This options is turned off by default and it is recommended to keep it off for production.

After turning these options we got insights on whats going wrong. the issue was caused by a name conflict that got created as part of a the duplicate types being registered as part of the schema. This happened because we had some legacy ACF field groups which was persisted due to backward compatibility reasons.

{
  "data": {
    "pageBy": {
      "acf": {
        "services": [
          {
            "title": "Product Engineering 2",
            "url":null,
            "description": "At CeeGees, product engineering is a lot of fun because it entails everything from idea creation to design, development, testing, and finally deployment of the software product. You come with your dream and we help you fulfil it . Read More 2"
          },
          {
            "title": "Quality Engineering Services",
            "url":null,
            "description": "Quality Engineering Services are a set of processes, methodologies, and techniques designed to ensure that a product or service meets the quality standards and the requirements of the stakeholders."
          },
          {
            "title": "Product Design",
            "url":null,
            "description": "Product design at CeeGees is a little different, because our designers make sure to balance user wants with user needs in order to enable the company to reliably produce effective, and user-friendly products.\r\n"
          }
        ]
      }
    }
  },
  "extensions": {
    "debug": [
      {
        "type": "DUPLICATE_TYPE",
        "message": "You cannot register duplicate Types to the Schema. The Type 'page_Acf' already exists in the Schema. Make sure to give new Types a unique name.",
        "type_name": "page_Acf",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_TYPE",
        "message": "You cannot register duplicate Types to the Schema. The Type 'page_Acf_services' already exists in the Schema. Make sure to give new Types a unique name.",
        "type_name": "page_Acf_services",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_TYPE",
        "message": "You cannot register duplicate Types to the Schema. The Type 'post_Acf' already exists in the Schema. Make sure to give new Types a unique name.",
        "type_name": "post_Acf",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_FIELD",
        "message": "You cannot register duplicate fields on the same Type. The field 'acf' already exists on the type 'page'. Make sure to give the field a unique name.",
        "field_name": "acf",
        "type_name": "page",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_FIELD",
        "message": "You cannot register duplicate fields on the same Type. The field 'services' already exists on the type 'page_Acf'. Make sure to give the field a unique name.",
        "field_name": "services",
        "type_name": "page_Acf",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_FIELD",
        "message": "You cannot register duplicate fields on the same Type. The field 'logo' already exists on the type 'page_Acf'. Make sure to give the field a unique name.",
        "field_name": "logo",
        "type_name": "page_Acf",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_FIELD",
        "message": "You cannot register duplicate fields on the same Type. The field 'title' already exists on the type 'page_Acf_services'. Make sure to give the field a unique name.",
        "field_name": "title",
        "type_name": "page_Acf_services",
        "stack": [ 
        ]
      },
      {
        "type": "DUPLICATE_FIELD",
        "message": "You cannot register duplicate fields on the same Type. The field 'description' already exists on the type 'page_Acf_services'. Make sure to give the field a unique name.",
        "field_name": "description",
        "type_name": "page_Acf_services",
        "stack": [ 
        ]
      }
    ],
    "queryAnalyzer": {
      "keys": "c88054d76d822a5ddc4952fa41438c6ce5fe8c8a482d0edd26ab366e827cf3c4 graphql:Query cG9zdDo3ODY=",
      "keysLength": 91,
      "keysCount": 3,
      "skippedKeys": "",
      "skippedKeysSize": 0,
      "skippedKeysCount": 0,
      "skippedTypes": []
    }
  }
}

Once this was enabled we got an understanding of what is going wrong. All we had to do was remove the duplicate associations , get the result we wanted and turn off the debug mode.

Hope this helps you. if you find this useful , Share with relevant others so that they can save time.