ヘッドレスCMS Wordpress & Gatsby.js にてACF使用時の注意

はじめに

Wordpressを構築する際にACF（Advanced Custom Fields）を使用する人は多いと思います。
Gatsby.jsと組み合わせてヘッドレスCMSにする場合、ACFが必須以外の場合には対応しないと空の時エラーになってしまいます。その解決方法です！

最初に

WordpressとGatsby.jsの組み合わせでのヘッドレスCMS化方法は他に書かれている方多いので、敢えて記述しません。

やりたいこと

通常のWordPress構築する際に使用するACFを使用したい・・
入力値がない場合、Gatsby.js構築時にエラーになってしまうのを回避したい。

エラー内容

There was an error in your GraphQL query:
Cannot query field "{acfの名前}" on type "{query名}".

結論

WordPressのfunctions.phpに以下を追記する。
以上です！！

functions.php

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

add_filter('acf/format_value', 'nullify_empty', 10, 3);

参考サイト：