Gatsby: [gatsby-source-wordpress] GraphQLError with ACF

[timurc]

Description

When ACF to Rest is enabled, the step building schema fails in both develop and build with the error:

⠁ [ { GraphQLError: Type acf must define one or more fields.
      at SchemaValidationContext.reportError (/Users/anykey/Blog/blog-2018/node_modules/graphql/type/validate.js:98:19)
      at validateFields (/Users/anykey/Blog/blog-2018/node_modules/graphql/type/validate.js:231:13)
      at /Users/anykey/Blog/blog-2018/node_modules/graphql/type/validate.js:206:7
      at Array.forEach (<anonymous>)
      at validateTypes (/Users/anykey/Blog/blog-2018/node_modules/graphql/type/validate.js:192:40)
      at validateSchema (/Users/anykey/Blog/blog-2018/node_modules/graphql/type/validate.js:66:3)
      at graphqlImpl (/Users/anykey/Blog/blog-2018/node_modules/graphql/graphql.js:92:61)
      at /Users/anykey/Blog/blog-2018/node_modules/graphql/graphql.js:66:223
      at Promise._execute (/Users/anykey/Blog/blog-2018/node_modules/bluebird/js/release/debuggability.js:313:9)
      at Promise._resolveFromExecutor (/Users/anykey/Blog/blog-2018/node_modules/bluebird/js/release/promise.js:483:18)
      at new Promise (/Users/anykey/Blog/blog-2018/node_modules/bluebird/js/release/promise.js:79:10)
      at graphql (/Users/anykey/Blog/blog-2018/node_modules/graphql/graphql.js:63:10)
      at graphqlRunner (/Users/anykey/Blog/blog-2018/node_modules/gatsby/dist/bootstrap/index.js:335:14)
      at Promise (/Users/anykey/Blog/blog-2018/gatsby-node.js:12:7)
      at Promise._execute (/Users/anykey/Blog/blog-2018/node_modules/bluebird/js/release/debuggability.js:313:9)
      at Promise._resolveFromExecutor (/Users/anykey/Blog/blog-2018/node_modules/bluebird/js/release/promise.js:483:18)
    message: 'Type acf must define one or more fields.',
    locations: undefined,
    path: undefined } ]

It does not happen if the Rest to ACF plugin on WP is disabled.

Disabling or enabling ACF in the gatsby config (useACF) does not change if the error happens or not.

Changing to API v2 in Rest to ACF does not change the behaviour.

The only custom field defined is a file field. It briefly works when I add this to the configuration. I can also add a file to a new post and this appears in gatsby. In the moment I add a new post in WP the error above occurs.

Steps to reproduce

I got the same error in my local environment and the server. So to reproduce, checking out the repo and trying to run it should resolve in the error described above. I do want to deploy from time to time, so I will sometimes disable the ACF to REST plugin, but I will keep it enabled for the sake of reproducing the for anyone who can help.

Environment

Repository: https://github.com/timurc/jardindecarlos

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.5.0 - ~/.nvm/versions/node/v10.5.0/bin/node
    npm: 6.1.0 - ~/.nvm/versions/node/v10.5.0/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 62.0.3
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.35 => 2.0.35 
    gatsby-image: ^2.0.19 => 2.0.19 
    gatsby-plugin-feed: ^2.0.9 => 2.0.9 
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7 
    gatsby-plugin-less: ^2.0.7 => 2.0.7 
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1 
    gatsby-plugin-sharp: ^2.0.10 => 2.0.10 
    gatsby-remark-copy-linked-files: ^2.0.6 => 2.0.6 
    gatsby-remark-images: ^2.0.5 => 2.0.5 
    gatsby-remark-prismjs: ^3.0.3 => 3.0.3 
    gatsby-remark-responsive-iframe: ^2.0.6 => 2.0.6 
    gatsby-remark-smartypants: ^2.0.6 => 2.0.6 
    gatsby-source-filesystem: ^2.0.6 => 2.0.6 
    gatsby-source-wordpress: ^3.0.10 => 3.0.10 
    gatsby-transformer-remark: ^2.1.11 => 2.1.11 
    gatsby-transformer-sharp: ^2.1.7 => 2.1.7 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

As always: thanks in advance for any hint to what could fix it and and thanks for the awesome work that already went into this!

[karolis-sh]

https://github.com/gatsbyjs/gatsby/issues/10735 might be related due to similar errors Error: Type {field_name} must define one or more fields.

[EvHaus]

I am having the same issue with gatsby-source-wordpress. To reproduce simply add the following gatsby-config.js plugin:

{
    resolve: 'gatsby-source-wordpress',
    options: {
        baseUrl: 'intranet.gnec.ca',
        hostingWPCOM: false,
        includedRoutes: [
            '**/*/*/news',
            '**/*/*/project',
        ],
        protocol: 'https',
        useACF: false,
    },
}

The error is a complete failure of the Gatsby build with:

error Type acf_9 must define one or more fields.

Type acf_12 must define one or more fields.


  Error: Type acf_9 must define one or more fields.
  Type acf_12 must define one or more fields.

  - query-compiler.js:152
    [gnec.ca]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:152:44

  - Generator.next

  - debuggability.js:313 Promise._execute
    [gnec.ca]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [gnec.ca]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [gnec.ca]/[bluebird]/js/release/promise.js:79:10

  - query-compiler.js:220 Runner.write
    [gnec.ca]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:220:7

  - query-compiler.js:100
    [gnec.ca]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:100:26

  - Generator.next


error UNHANDLED REJECTION


  Error: Type acf_9 must define one or more fields.
  Type acf_12 must define one or more fields.

  - query-compiler.js:152
    [gnec.ca]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:152:44

  - Generator.next

  - debuggability.js:313 Promise._execute
    [gnec.ca]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [gnec.ca]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [gnec.ca]/[bluebird]/js/release/promise.js:79:10

  - query-compiler.js:220 Runner.write
    [gnec.ca]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:220:7

  - query-compiler.js:100
    [gnec.ca]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:100:26

  - Generator.next

After some digging around, it turns out this is caused by some ACF fields which have variable types. In my case, I have a field called acf.featured_image which is usually a string but it's not required, so if it's empty the Wordpress API returns it as a boolean value of false. GraphQL doesn't like this.

I wasn't find any way to get around this in the Wordpress settings. ACF doesn't give me a way to set a custom default for a value so I can't find a way to tell it to use null instead of false as the default for that field.

My current workaround is to write a custom Source Plugin via the Gatsby Node API which manually calls the REST APIs I want to query, and manually processes the API response to clean up the booleans.

I'm hoping there's something the Gatsby team can do here to help with this. Maybe we can make gatsby-source-wordpress more tolerant of such situations somehow.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[domvo]

// EDIT 2
I found yet a better solution here: https://github.com/gatsbyjs/gatsby/issues/4461.
You need to tell ACF to export null instead of an empty string for empty fields. This can be achieved like this:

function nullify_empty($value, $post_id, $field)
{
    if (empty($value)) {
        return null;
    }

    return $value;
}

// Add filters for the field types, in my case this worked:
add_filter('acf/format_value/type=relationship', 'nullify_empty', 100, 3);

(c) pieh
// EDIT END

// EDIT
I solved it. The problem is not one empty ACF field but if the values of all ACF fields are empty "" the build fails. ACF has to export at least one bit of (dummy) data for the build to be successful. I added a custom field to all of my field groups being just a boolean "acf_field" that is set to true by default and is hidden via a special class.

Nonetheless this behavior should be fixed or at least taken into account in the gatsby-source-wordpress plugin.
// EDIT END

I have a very similar error using gatsby-source-wordpress along with ACF and Wordpress. My specific problem is that I have to use a lot of relationship fields in ACF. Relationship fields in ACF allow to model n-to-n relationships between post types.

My (simplified) scenario:
I have courses and teachers. A teacher can teach several courses, but does not necessarily have to do so. So sometimes my relationship field "courses" in my Custom Post Type "teacher" can be empty. This is a very viable real-life case. If this is the case the ACF field is simply an empty string like so:

Apparently the gatsby-source-wordpress plugin does not like this empty string as a value and gives me:

[...] // shortened for readability purposes
modified: '2019-02-16 01:41:28', post_modified_gmt: '2019-02-16 01:41:28', post_content_filtered: '', post_parent: 0, guid: 'http://192.168.178.33/?post_type=kurse&p=75', menu_order: 0, post_type: 'kurse', post_mime_type: '', comment_count: '0', filter: 'raw' } ]
 - type: string
   value: ''
error Type acf_8 must define one or more fields.


  Error: Type acf_8 must define one or more fields.

  - query-compiler.js:151 
    [gatsby-frontend]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:151:44

  - Generator.next

  - debuggability.js:313 Promise._execute
    [gatsby-frontend]/[bluebird]/js/release/debuggability.js:313:9

  - promise.js:483 Promise._resolveFromExecutor
    [gatsby-frontend]/[bluebird]/js/release/promise.js:483:18

  - promise.js:79 new Promise
    [gatsby-frontend]/[bluebird]/js/release/promise.js:79:10

  - query-compiler.js:224 Runner.write
    [gatsby-frontend]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:224:7

  - query-compiler.js:99 
    [gatsby-frontend]/[gatsby]/dist/internal-plugins/query-runner/query-compiler.js:99:26

  - Generator.next


error UNHANDLED REJECTION

The de-facto scenario is more complicated than my described one but the idea and the source of failire is the same. Can we get a fix for this? Or can someone help me figure out a workaround?

Thank you!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[furedal]

I have been annoyed by being required to add empty field values for every field created with ACF so i wrote a script for creating dummy-data for every registered post-type with almost all fields filled out, even the ones with flexible content. The dummy-data are hidden from the cms.

If you add an image called POST_PLACEHOLDER in your gallery, then that will be used for image associations.

Right now all the fields are constantly updated every time you go in to an edit-page in admin, So I still need to figure out when to do the updates in the right places.

https://pastebin.com/WTZF77r4

Let me know what you think

[bhenbe]

Hi @furedal ,

we meet the same issue with ACF fields on pages regarding specifics page templates.

Example:

• for the page template "contact", wp acf show contact fields
• for the page template "services", wp acf show hero fields

With you source, we are unable to show dummy text. Acf_get_field_groups (line 57) returns null.

We are looking on the ACF documentation to solve this problem.

Initially, we tried to solve the problem by specifying Types in gatsby-node.js (https://www.gatsbyjs.org/docs/actions/#createTypes) but it was an headache...

[LekoArts]

Not seeing a valid reproduction here, please open a new issue if you still run into the same issue. Thanks! (Also try out gatsby-source-wordpress-experimental with WPGraphQL)