ACF Options Sub Page support

[Twansparant]

Hi there,

I'm starting to work on my first headless project using GraphQL and I like it a lot!
As described here I can query my ACF options page just fine, however I like to organize my options in several sub pages as described here using the acf_add_options_sub_page acf function. Unfortunately this is not supported yet.

With the following code:

if (function_exists('acf_add_options_page')) {
	acf_add_options_page( [
		'page_title'		=> __('Site Options', 'headless-wp'),
		'menu_title'		=> __('Site Options', 'headless-wp'),
		'menu_slug'		=> 'site-options',
		'capability'		=> 'edit_posts',
		'redirect'		=> true,
		'position'		=> '40',
		'show_in_graphql'	=> true
	]);

	acf_add_options_sub_page([
		'page_title'		=> __('Sub Options 1', 'headless-wp'),
		'menu_title'		=> 'Sub Options 1' ,
		'menu_slug'		=> 'sub-options-1',
		'parent_slug'		=> 'site-options'
	]);

	acf_add_options_sub_page([
		'page_title'		=> __('Sub Options 2', 'headless-wp'),
		'menu_title'		=> 'Sub Options 2',
		'menu_slug'		=> 'sub-options-2,
		'parent_slug'		=> 'site-options'
	]);
}

Only this query will return data because of the redirect parameter:

{
    siteOptions {
      subOptions1
    }
}

But Sub Options 2 is not querable at the moment.
Do you have any plans on adding support for this in the near future?

Thanks a lot!

[peteluffman]

You need 'show_in_graphql' => true on the sub page declarations as well. Sub pages are working fine for me with this :)

[cytronn]

Hello,
I've been trying to get my subpages fields using this

acf_add_options_page(array(
    'page_title'    => 'Theme Options',
    'menu_title'    => 'Theme Options',
    'menu_slug'     => 'theme-options',
    'capability'    => 'edit_posts',
    'show_in_graphql' => true
  ));

  acf_add_options_sub_page(array(
    'page_title'    => 'Footer Settings',
    'parent_slug'   => 'theme-options',
    'menu_title'    => 'Footer Settings',
    'menu_slug'     => 'footer-settings',
    'post_id' => 'footer_settings',
    'show_in_graphql' => true
  ));

  acf_add_options_sub_page(array(
    'page_title'    => 'Header Settings',
    'parent_slug'   => 'theme-options',
    'menu_title'    => 'Header Settings',
    'menu_slug'     => 'header-settings',
    'post_id' => 'header_settings',
    'show_in_graphql' => true
  ));

However, when I open my graphql page from gatsby, allWordpressAcfOptions only returns one page which is empty, with no children attached. What am I missing here? I couldn't find any proper way to get access..

Thank you !

EDIT: add GRAPHQL query and response

query:

query MyQuery {
  allWordpressAcfOptions {
    edges {
      node {
        id
        children {
          children {
            id
          }
        }
      }
    }
  }
}

response:

{
  "data": {
    "allWordpressAcfOptions": {
      "edges": [
        {
          "node": {
            "id": "3d3d56cc-b73a-557b-a37c-06ed67f70aca",
            "children": []
          }
        }
      ]
    }
  },
  "extensions": {}
}

[jasonbahl]

👋🏻 sorry for the delay here, but Options Pages are now supported (and tested) with v0.5.0 (#250)

When you register an options page and set it to show_in_graphql and give it a graphql_field_name, it will be available as a GraphQL Type to assign the Field Group to.

Below is a screenshot of the new GraphQL Settings in action:

I used the following code to register some options pages:

acf_add_options_page(array(
  'page_title' 	=> 'Theme General Settings',
  'menu_title'	=> 'Theme Settings',
  'menu_slug' 	=> 'theme-general-settings',
  'capability'	=> 'edit_posts',
  'redirect'		=> false,
  'show_in_graphql' => true,
  'graphql_field_name' => 'ThemeGeneralSettings',
));

acf_add_options_sub_page(array(
  'page_title' 	=> 'Theme Header Settings',
  'menu_title'	=> 'Header',
  'parent_slug'	=> 'theme-general-settings',
  'menu_slug' 	=> 'theme-header-settings',
  'show_in_graphql' => true,
  'graphql_field_name' => 'ThemeHeaderSettings',
));

acf_add_options_sub_page(array(
  'page_title' 	=> 'Theme Footer Settings',
  'menu_title'	=> 'Footer',
  'parent_slug'	=> 'theme-general-settings',
  'menu_slug' 	=> 'theme-footer-settings',
  'show_in_graphql' => true,
  'graphql_field_name' => 'ThemeFooterSettings',
));

And now when I set the Field Group to show on the "Theme General Settings" options page, you can see it's checked in the "GraphQL Types to Show the Field Group On" option below.