wp-graphql / wp-graphql-acf
Advanced Custom Fields bindings for wp-graphql
Installs: 36 714
Dependents: 2
Suggesters: 0
Security: 0
Stars: 322
Watchers: 21
Forks: 65
Open Issues: 91
Language:HTML
Type:wordpress-plugin
Requires (Dev)
- dev-develop
- v0.4.1
- v0.4.0
- v0.3.5
- v0.3.4
- v0.3.3
- v0.3.2
- v0.3.1
- v0.3.0
- 0.2.0
- v0.1.5
- dev-master
- dev-release/v0.4.1
- dev-bug/#1441-flex-repeater-fields-not-previewable
- dev-release/v0.4.0
- dev-release/v0.3.6
- dev-release/v0.3.5
- dev-feature/#152-add-preview-support
- dev-release/v0.3.4
- dev-release/v0.3.3
- dev-release/v0.3.2
- dev-feature/relationship-custom-model-filter
- dev-release/v0.3.1
- dev-release/v0.2.1
- dev-release/v0.3.0
- dev-v0.3.0/fix-flex-field-registry
- dev-revert-49-bug/#48-multiple-users-acf-field-not-working
- dev-feature/#38-formatting-updates
- dev-feature/#36-remove-yarnlock
- dev-feature/#32-remove-package.json
- dev-bug/#33-field-group-assigned-to-post-of-type-not-in-schema
- dev-bug/#25-multiple-select-values-dont-work
- dev-feature/#19-remove-freemius-dependency
This package is auto-updated.
Last update: 2021-01-19 21:24:32 UTC
README
WPGraphQL for Advanced Custom Fields automatically exposes your ACF fields to the WPGraphQL Schema.
- Install and Activate
- Dependencies
- Adding Fields to the WPGraphQL Schema
- Supported Fields
- Text
- Text Area
- Number
- Range
- URL
- Password
- Image
- File
- WYSIWYG Editor
- oEmbed
- Gallery
- Select
- Checkbox
- Radio Button
- Button Group
- True/False
- Link
- Post Object
- Page Link
- Relationship
- Taxonomy
- User
- Google Map
- Date Picker
- Date/Time Picker
- Time Picker
- Color Picker
- Message
- Accordion
- Tab
- Group
- Repeater
- Flexible Content
- Clone
- Options Pages
- Location Rules
Install and Activate
Installing From Github
To install the plugin from Github, you can download the latest release zip file, upload the Zip file to your WordPress install, and activate the plugin.
Click here to learn more about installing WordPress plugins from a Zip file.
Installing from Composer
composer require wp-graphql/wp-graphql-acf
Dependencies
In order to use WPGraphQL for Advanced Custom Fields, you must have WPGraphQL and Advanced Custom Fields (free or pro) installed and activated.
Adding Fields to the WPGraphQL Schema
TL;DR: Here's a video showing an overview of usage.
Advanced Custom Fields, or ACF for short, enables users to add Field Groups, either using a Graphical User Interface, PHP code, or local JSON to various screens in the WordPress dashboard, such as (but not limited to) the Edit Post, Edit User and Edit Term screens.
Whatever method you use to register ACF fields to your WordPress site should work with WPGraphQL for Advanced Custom Fields. For the sake of simplicity, the documentation below will primarily use the Graphic User Interface for examples.
Add ACF Fields to the WPGraphQL Schema
The first step in using Advanced Custom Fields with WPGraphQL is to create an ACF Field Group.
By default, field groups are not exposed to WPGraphQL. You must opt-in to expose your ACF Field Groups and fields to the WPGraphQL Schema as some information managed by your ACF fields may not be intended for exposure in a queryable API like WPGraphQL.
Show in GraphQL Setting
To have your ACF Field Group show in the WPGraphQL Schema, you need to configure the Field Group to "Show in GraphQL".
Using the ACF GUI
When using the ACF Graphic User Interface for creating fields, WPGraphQL for Advanced Custom Fields adds a Show in GraphQL field to Field Groups.
Setting the value of this field to "Yes" will show the field group in the WPGraphQL Schema, if a GraphQL Field Name is also set
Registering Fields in PHP
When registering ACF Fields in PHP, @todo
Supported Fields
In order to document interacting with the fields in GraphQL, an example field group has been created with one field of each type.
To replicate the same field group documented here you can download the exported field group and import it into your environment.
For the sake of documentation, this example field group has the location rule set to "Post Type is equal to Post", which will allow for the fields to be entered when creating and editing Posts in the WordPress dashboard, and will expose the fields to the Post
type in the WPGraphQL Schema.
Text Field
Text fields are added to the WPGraphQL Schema as a field with the Type String
.
Text fields can be queried and a String will be returned.
Here, we have a Text field named text
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { textArea } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "textArea": "Text Area Value" } } } }
Text Area Field
Text Area fields are added to the WPGraphQL Schema as a field with the Type String
.
Text Area fields can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { textArea } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "textArea": "Text value" } } } }
Number Field
Number fields are added to the WPGraphQL Schema as a field with the Type Integer
.
Number fields can be queried and an Integer will be returned.
Here, we have a Number field named number
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { number } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "number": 5 } } } }
Range Field
Range fields are added to the WPGraphQL Schema as a field with the Type Integer
.
Range fields can be queried and an Integer will be returned.
Here, we have a Range field named range
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { range } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "range": 5 } } } }
Email Field
Email fields are added to the WPGraphQL Schema as a field with the Type String
.
Email fields can be queried and a String will be returned.
Here, we have an Email field named email
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { email } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "email": "test@example.com" } } } }
URL Field
Url fields are added to the WPGraphQL Schema as a field with the Type String
.
Url fields can be queried and a String will be returned.
Here, we have a URL field named url
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { url } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "url": "https://wpgraphql.com" } } } }
Password Field
Password fields are added to the WPGraphQL Schema as a field with the Type String
.
Password fields can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { password } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "password": "123456" } } } }
Image Field
Image fields are added to the WPGraphQL Schema as a field with the Type MediaItem
.
Image fields can be queried and a MediaItem will be returned.
Here, we have an Image field named image
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { image { id sourceUrl(size: MEDIUM) } } }
And the results of the query would be:
{ "data": { "post": { "acfDocs": { "image": { "id": "YXR0YWNobWVudDozMjM=", "sourceUrl": "http://wpgraphql.local/wp-content/uploads/2020/03/babe-ruth-300x169.jpg" } } } } }
File Field
File fields are added to the WPGraphQL Schema as a field with the Type MediaItem
.
File fields can be queried and a MediaItem will be returned.
Here, we have a File field named file
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { file { id mediaItemUrl } } } }
And the results of the query would be:
{ "data": { "post": { "acfDocs": { "file": { "id": "YXR0YWNobWVudDozMjQ=", "mediaItemUrl": "http://acf2.local/wp-content/uploads/2020/03/little-ceasars-receipt-01282020.pdf" } } } } }
WYSIWYG Editor Field
WYSIWYG fields are added to the WPGraphQL Schema as a field with the Type String
.
WYSIWYG fields can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post( id: "acf-example-test" idType: URI ) { acfDocs { wysiwyg } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "wysiwyg": "<p>Some content in a WYSIWYG field</p>\n" } } } }
oEmbed Field
oEmbed fields are added to the WPGraphQL Schema as a field with the Type String
.
oEmbed fields can be queried and a String will be returned.
Here, we have a oEmbed field named oembed
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { oembed } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "oembed": "https://www.youtube.com/watch?v=ZEytXfaWwcc" } } } }
Gallery Field
Gallery fields can be queried and a list of MediaItem types will be returned.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { gallery { id sourceUrl(size: LARGE) } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "gallery": [ { "id": "YXR0YWNobWVudDoyNTY=", "sourceUrl": "http://wpgraphql.local/wp-content/uploads/2020/02/babe-ruth.jpg" }, { "id": "YXR0YWNobWVudDoyNTU=", "sourceUrl": "http://wpgraphql.local/wp-content/uploads/2020/02/babe-ruth-baseball-986x1024.jpg" } ] } } } }
Select Field
Select fields, without multiple selections allowed, can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { select } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "select": "choice_1" } } } }
Checkbox Field
Checkbox fields can be queried and a list (array) of Strings (the selected values) will be returned.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { checkbox } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "checkbox": [ "choice_1" ] } } } }
Radio Button Field
Radio Button fields are added to the WPGraphQL Schema as a field with the Type String
.
Radio Button fields can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { radioButton } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "radioButton": "choice_2" } } } }
Button Group Field
Button Group fields are added to the WPGraphQL Schema as a field with the Type String
.
Button Group fields can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { buttonGroup } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "buttonGroup": "choice_2" } } } }
True/False Field
True/False fields are added to the WPGraphQL Schema as a field with the Type Boolean
.
True/False fields can be queried and a String will be returned.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { trueFalse } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "trueFalse": true } } } }
Link Field
Link fields are added to the WPGraphQL Schema as a field with the Type ACF_Link
.
The available fields on the ACF_Link
Type are:
Here, we have a Link field named link
on the Post Edit screen within the "ACF Docs" Field Group.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { link { target title url } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "link": { "target": "", "title": "Hello world!", "url": "http://acf2.local/hello-world/" } } } } }
Post Object Field
Post Object fields are added to the WPGraphQL Schema as a field with a Union of Possible Types the field is configured to allow.
If the field is configured to allow multiple selections, it will be added to the Schema as a List Of the Union Type.
Since Post Object fields can be configured to be limited to certain Post Types, the Union will represent those Types.
For example, if the Post Object field is configured to allow Posts of the post
and page
types to be selected:
Then the Union type for the field will allow Post
and Page
types to be returned, as seen in the Schema via GraphiQL:
Here, we have a Post Object field named post_object
on the Post Edit screen within the "ACF Docs" Field Group, configured with the Post "Hello World".
As a GraphQL consumer, we don't know in advance if the value is going to be a Page or a Post.
So we can specify, via GraphQL fragment, what fields we want if the object is a Post, or if it is a Page.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { postObject { __typename ... on Post { id title date } ... on Page { id title } } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "postObject": { "__typename": "Post", "id": "cG9zdDox", "title": "Hello world!", "date": "2020-02-20T23:12:21" } } } } }
If the input of the field was saved as a Page, instead of a Post, like so:
Then the same query above, would return the following results:
{ "data": { "post": { "acfDocs": { "postObject": { "__typename": "Page", "id": "cGFnZToy", "title": "Sample Page" } } } } }
Now, if the field were configured to allow multiple values, the field would be added to the Schema as a listOf
, returning an Array of the Union.
If the field were set with a value of one Page, and one Post, like so:
Then the results of the same query as above would be:
{ "data": { "post": { "acfDocs": { "postObject": [ { "__typename": "Page", "id": "cGFnZToy", "title": "Sample Page" }, { "__typename": "Post", "id": "cG9zdDox", "title": "Hello world!", "date": "2020-02-20T23:12:21" } ] } } } }
Page Link Field
Page Link fields are added to the WPGraphQL Schema as a field with a Union of Possible Types the field is configured to allow.
Since Page Link fields can be configured to be limited to certain Post Types, the Union will represent those Types.
For example, if the Post Object field is configured to allow Posts of the post
and page
types to be selected:
Then the Union type for the field will allow Post
and Page
types to be returned, as seen in the Schema via GraphiQL:
Here, we have a Page Link field named page_link
on the Post Edit screen within the "ACF Docs" Field Group, and the value is set to the "Sample Page" page.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { pageLink { __typename ... on Post { id title date } ... on Page { id title } } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "pageLink": { "__typename": "Page", "id": "cGFnZToy", "title": "Sample Page" } } } } }
Here, we set the value to the "Hello World" Post:
And the results of the same query are now:
{ "data": { "post": { "acfDocs": { "pageLink": { "__typename": "Post", "id": "cG9zdDox", "title": "Hello world!", "date": "2020-02-20T23:12:21" } } } } }
Relationship Field
Relationship fields are added to the WPGraphQL Schema as a field with a Union of Possible Types the field is configured to allow.
Since Relationship fields can be configured to be limited to certain Post Types, the Union will represent those Types.
For example, if the Post Object field is configured to allow Posts of the post
and page
types to be selected:
Then the Union type for the field will allow Post
and Page
types to be returned, as seen in the Schema via GraphiQL:
Here, we have a Relationship field named relationship
on the Post Edit screen within the "ACF Docs" Field Group, and the value is set to "Hello World!" post, and the "Sample Page" page.
This field can be Queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { relationship { __typename ... on Post { id title date } ... on Page { id title } } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "relationship": [ { "__typename": "Post", "id": "cG9zdDox", "title": "Hello world!", "date": "2020-02-20T23:12:21" }, { "__typename": "Page", "id": "cGFnZToy", "title": "Sample Page" } ] } } } }
Taxonomy Field
The Taxonomy field is added to the GraphQL Schema as a List Of the Taxonomy Type.
This field can be queried like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { taxonomy { __typename id name } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "taxonomy": [ { "__typename": "Category", "id": "Y2F0ZWdvcnk6Mg==", "name": "Test Category" } ] } } } }
User Field
User fields are added to the WPGraphQL Schema as a field with a User type.
This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { user { id username firstName lastName } } } }
and the response would look like:
{ "data": { "post": { "acfDocs": { "user": { "id": "dXNlcjox", "username": "jasonbahl", "firstName": "Jason", "lastName": "Bahl" } } } } }
and the response to the same query would look like:
{ "data": { "post": { "acfDocs": { "user": [ { "id": "dXNlcjox", "username": "jasonbahl", "firstName": "Jason", "lastName": "Bahl" }, { "id": "dXNlcjoy", "username": "WPGraphQL", "firstName": "WP", "lastName": "GraphQL" } ] } } } }
Google Map Field
Google Map fields are added the WPGraphQL Schema as the ACF_GoogleMap
Type.
The ACF_GoogleMap
Type has fields that expose location data. The available fields are:
This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { googleMap { streetAddress streetNumber streetName city state postCode countryShort } } } }
and the response would look like:
{ "data": { "post": { "acfDocs": { "googleMap": { "streetAddress": "1 Infinite Loop, Cupertino, CA 95014, USA", "streetNumber": "1", "streetName": "Infinite Loop", "city": "Cupertino", "state": "California", "postCode": "95014", "placeId": "ChIJHTRqF7e1j4ARzZ_Fv8VA4Eo", "countryShort": "US" } } } } }
Date Picker Field
The Date Picker field is added to the WPGraphQL Schema as field with the Type String
.
Date Picker fields can be queried and a String will be returned.
This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { datePicker } } }
and the result of the query would be:
{ "data": { "post": { "acfDocs": { "datePicker": "13/03/2020" } } } }
Date/Time Picker Field
The Date/Time Picker field is added to the WPGraphQL Schema as field with the Type String
.
Date/Time Picker fields can be queried and a String will be returned.
This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { dateTimePicker } } }
and the result of the query would be:
{ "data": { "post": { "acfDocs": { "dateTimePicker": "20/03/2020 8:15 am" } } } }
Time Picker Field
The Time Picker field is added to the WPGraphQL Schema as field with the Type String
.
Time Picker fields can be queried and a String will be returned.
This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { timePicker } } }
and the result of the query would be:
{ "data": { "post": { "acfDocs": { "timePicker": "12:30 am" } } } }
Color Picker Field
The Color Picker field is added to the WPGraphQL Schema as field with the Type String
.
Color Picker fields can be queried and a String will be returned.
This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { colorPicker } } }
and the result of the query would be:
{ "data": { "post": { "acfDocs": { "colorPicker": "12:30 am" } } } }
Message Field
Message fields are not currently supported.
Accordion Field
Accordion Fields are not currently supported.
Tab Field
Tab fields are not currently supported.
Group Field
We can query the fields within the group like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { group { textFieldInGroup textAreaFieldInGroup } } } }
And the results of the query would be:
{ "data": { "post": { "acfDocs": { "group": { "textFieldInGroup": "Text value, in group", "textAreaFieldInGroup": "Text are value, in group" } } } } }
Repeater Field
Repeater Fields are added to the Schema as a List Of the Type of group that makes up the fields.
Here, the Repeater Field is populated with 2 rows:
Row 1: Text Field: Text Value 1 Image: 256 Row 2: Text Field: Text Value 2 Image: 255This field can be queried in GraphQL like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { repeater { textFieldInRepeater imageFieldInRepeater { databaseId id sourceUrl } } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "repeater": [ { "textFieldInRepeater": "Text Value 1", "imageFieldInRepeater": { "id": "YXR0YWNobWVudDoyNTY=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth.jpg" } }, { "textFieldInRepeater": "Text Value 2", "imageFieldInRepeater": { "id": "YXR0YWNobWVudDoyNTU=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-baseball-scaled.jpg" } } ] } } } }
Flexible Content Field
These Layouts can be made up of other types of fields, and can be added and arranged in any order.
Flexible Content Fields are added to the WPGraphQL Schema as a List Of Unions.
The Union for a Flex Field is made up of each Layout in the Flex Field as the possible Types.
In our example, we've created a Flex Field with 3 layouts named "Layout 1", "Layout 2" and "Layout 3". In the Schema, we can see the Flex Field Union's Possible Types are these 3 layouts.
Each of these Layout types will contain the fields defined for the layout and can be queried like fields in any other Group.
Here's an example of a Flex Field named flexible_content
, with 3 layouts:
- Layout 1
- Text field named "text"
- Text field named "another_text_field"
- Layout 2
- Image field named "image"
- Layout 3
- Gallery field named "gallery"
Above are the possible layouts and their fields. These layouts can be added and arranged in any order. While we, as a GraphQL consumer, don't know ahead of time what order they will be in, we do know what the possibilities are.
Here's an example of a Flex Field named flexible_content
with the values saved as "Layout One", "Layout Two" and "Layout Three", in that order, all populated with their respective fields.
We can query this field like so:
{ post(id: "acf-example-test", idType: URI) { acfDocs { flexibleContent { __typename ... on Post_Acfdocs_FlexibleContent_LayoutOne { text anotherTextField } ... on Post_Acfdocs_FlexibleContent_LayoutTwo { image { id sourceUrl(size: MEDIUM) } } ... on Post_Acfdocs_FlexibleContent_LayoutThree { gallery { id sourceUrl(size: MEDIUM) } } } } } }
and the results of the query would be:
{ "data": { "post": { "acfDocs": { "flexibleContent": [ { "__typename": "Post_Acfdocs_FlexibleContent_LayoutOne", "text": "Text Value One", "anotherTextField": "Another Text Value" }, { "__typename": "Post_Acfdocs_FlexibleContent_LayoutTwo", "image": { "id": "YXR0YWNobWVudDoyNTY=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-300x169.jpg" } }, { "__typename": "Post_Acfdocs_FlexibleContent_LayoutThree", "gallery": [ { "id": "YXR0YWNobWVudDoyNTY=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-300x169.jpg" }, { "id": "YXR0YWNobWVudDoyNTU=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-baseball-289x300.jpg" } ] } ] } } } }
If we were to re-arrange the layouts, so that the order was "Layout Three", "Layout One", "Layout Two", the results of the query would be:
"data": { "post": { "acfDocs": { "flexibleContent": [ { "__typename": "Post_Acfdocs_FlexibleContent_LayoutThree", "gallery": [ { "id": "YXR0YWNobWVudDoyNTY=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-300x169.jpg" }, { "id": "YXR0YWNobWVudDoyNTU=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-baseball-289x300.jpg" } ] } { "__typename": "Post_Acfdocs_FlexibleContent_LayoutOne", "text": "Text Value One", "anotherTextField": "Another Text Value" }, { "__typename": "Post_Acfdocs_FlexibleContent_LayoutTwo", "image": { "id": "YXR0YWNobWVudDoyNTY=", "sourceUrl": "http://acf2.local/wp-content/uploads/2020/02/babe-ruth-300x169.jpg" } }, ] } } }
Clone Field
The clone field is not fully supported (yet). We plan to support it in the future.
Options Pages
Reference: https://www.advancedcustomfields.com/add-ons/options-page/
To add an option page and expose it to the graphql schema, simply add 'show_in_graphql' => true when you register an option page.
Example Usage
function register_acf_options_pages() { // check function exists if ( ! function_exists( 'acf_add_options_page' ) ) { return; } // register options page $my_options_page = acf_add_options_page( array( 'page_title' => __( 'My Options Page' ), 'menu_title' => __( 'My Options Page' ), 'menu_slug' => 'my-options-page', 'capability' => 'edit_posts', 'show_in_graphql' => true, ) ); } add_action( 'acf/init', 'register_acf_options_pages' ) Example Query query GetMyOptionsPage { myOptionsPage { someCustomField } }
Alternatively, it's you can check the Fields API Reference to learn about exposing your custom fields to the Schema.
Location Rules
Supported Locations
@todo: Document supported location rules and how they map from ACF to the WPGraphQL Schema