GraphQL IDE Loading Issue

[KeelanJon]

Opening an issue here after a discussion with @jasonbahl on Slack.

Currently having an issue where my Graphql IDE within WordPress seems to run into an error and gets stuck loading. This seems to have occurred after an automatic update on a client website, but it has been a while since I worked on the website in question so I am unable to provide insight into what versions I was running previously. However, at the time of writing the website is now running the most up-to-date versions of WPGraphQL 1.22.0, WPGraphQl for ACFs 2.1.2, ACFs Pro 6.2.7, and WordPress 6.4.2.

I'm aware this seems to have something to do with the field groups within ACFs. I've managed to narrow it down to which field groups are causing the issue, but after investigating I cannot see any existing reason why these fields should be resulting in an error, so I've attached the ACF JSON file below to provide the opportunity for further investigation in case this is a user error or something that requires a deeper look.

I'll add that deleting and re-inserting the same fields using the same naming conventions seems to resolve the issue. The Fields that I've found need removing and re-inserting are Flexible Content Layouts within the 'Template General' Field Group. Specifically 'Our Work', 'Process Block', 'Services', and 'Image Carousel'.

I hope this helps prevent these issues in the future, and should you need any further information please let me know.
Thank you.

acf-export-2024-03-08.json

[jasonbahl]

@KeelanJon I've transferred this issue from the old repo (https://github.com/wp-graphql/wp-graphql-acf - which will be archived in the not-too distant future) to the new repo (https://github.com/wp-graphql/wpgraphql-acf). 🙏🏻

[faisalakandha]

@KeelanJon hey man, I was facing the same issue after adding a news field group in acf. All of my existing field group labels were in English. However, after I had created that new field group with a label in Bengali my GraphiQL IDE started to act out and was facing the same issue as you. After that I deleted that field group (with Bengali label) and it fixed my issue and now GraphiQL IDE is working as expected.

[KeelanJon]

@faisalakandha Thank you for the insight man.

As a note, in my case, a quick fix was simply to download the JSON file for the field group that was causing the issue, and then I just went through it and made a slight adjustment to the "key" value e.g. "field_65b227020e85d". Then deleting the original acf group and importing this adjusted new JSON file did the trick and ensured all of the existing field data wasn't removed.

I guess changing the key value treats it as a new custom field group and acts as a sort of re-register? But I'm not sure how all this works on the back end.

[jasonbahl]

@KeelanJon if changing the keys worked, that makes me think there was some level of caching somewhere that was causing things to mis-beheve. I'm glad that solved it, but an interesting problem/solution. Would be nice to see if there's some steps to consistently reproduce 🤔

@faisalakandha There are definitely issues with special characters used in GraphQL Field Names and Type Names.

This is (kind of) documented here: https://acf.wpgraphql.com/upgrade-guide/#field-group-names-cannot-start-with-a-number-or-other-special-character

I think non-ascii characters cannot be in the GraphQL Field Name or Type Name at all