CheckboxControl and RadioControl fields causing ApolloError: Internal server error

jan-clockworkwp commented 3 months ago

Description

While working on a custom block and trying to use RadioControl and/or CheckboxControl fields, I am facing an ApolloError: Internal server error on the frontend. I have followed instructions from the official docs and https://github.com/wpengine/faustjs/pull/1573. Everything seems to be working; fields are properly rendered in the WP Admin, GraphQL schema is updated, the codegen script is not complaining either, the attribute is available for autocomplete when writing a query in GraphiQL. However, once the query is run, the following ApolloError is triggered. Below is an example of the error for the linkShow custom block attribute:

"errors": [
    {
      "debugMessage": "Undefined array key \"linkShow\"",
      "message": "Internal server error",
      "extensions": {
        "category": "internal"
      },
      "locations": [
        {
          "line": 226,
          "column": 11
        }
      ],
      "path": [
        "page",
        "editorBlocks",
        0,
        "attributes",
        "linkShow"
      ]
    }
  ],

This issue is not occurring for other custom attributes, only for these two (there may be others with a similar issue, but I have not tested them yet). I have tried various names for the custom attribute and played with different combinations of default values to no avail. Is there any better way to debug these ApolloErrors? Thanks for looking into this.

Steps to reproduce

Clone the block-support example project.
Modify block-b by adding new whatever named custom attribute with or without a default value, for example:
```
"test": {
"type": "boolean",
},
```

Modify Component.js file by adding new attribute to the editorFields config:

test: {
label: 'Checkbox test',
location: 'inspector',
control: 'checkbox',
},

Run faust blockset script to build modified block.
Add modified block to some page and try to view the page on the front end. Or simply run GraphQL query in the GraphiGL IDE.

Additional context

No response

@faustwp/core Version

3.0.1

@faustwp/cli Version

3.0.1

FaustWP Plugin Version

1.3.1

WordPress Version

6.5.2

Additional environment details

"@apollo/client": "^3.10.4",
"@faustwp/blocks": "^4.0.0",
"@wordpress/scripts": "^27.7.0",
"@faustwp/block-editor-utils": "^0.2.0",
"@wordpress/base-styles": "^4.49.0",
"@wordpress/block-library": "^8.35.0",
"@wordpress/style-engine": "^1.41.0",

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

[X] Yes

theodesp commented 3 months ago

Hey @jan-clockworkwp. Thank you for the report. I followed the steps you mentioned above, but I was able to query the new boolean field so I wasn't able to reproduce this issue in my setup.

Maybe this is related to this issue: https://github.com/wpengine/wp-graphql-content-blocks/issues/238

ChrisWiegman commented 3 months ago

I do believe this is related to https://github.com/wpengine/wp-graphql-content-blocks/issues/238 as @theodesp indicates above. I will do some investigation and try to reproduce.

theodesp commented 2 months ago

@jan-clockworkwp

https://github.com/wpengine/wp-graphql-content-blocks/releases/tag/v4.0.1

Should contain a fix for this issue. Please verify that it works and I can close this issue.

jan-clockworkwp commented 2 months ago

Well done @theodesp, both radio and checkbox controls are working now. I have just one comment that probably an update in the Faust official docs is needed. Let me explain why. In the official docs, the section Form Control Reference List, RadioControl is saying it should be of type boolean. It works okay that way, but I can't see the reason for using radio buttons for true/false over the CheckBoxControl. If string values are used for RadioControl in the options list, the attribute type needs to be changed to 'string' so they and default values work properly. According to this, it would make much more sense in the official docs to say that RadioControl should be of type string.

wpengine / faustjs