Expose WordPress Advanced Custom Field (ACF) Plugin Data to the GraphQL Endpoint
The data that is added to the REST API through Advanced Custom Fields (ACF) is also not present automatically in our GraphQL endpoint.
You'll be used to the problem and workflow to fix the issue now.
In this lesson, we will add the wp-graphql-acf plugin which allows us to expose ACF data to our GraphQL endpoint. There's even a UI to flip the switch here.
Instructor: [0:00] One thing that's missing from our GraphQL endpoint is the ACF fields that we've added to our custom post type. To expose those, we're going to have to add another plugin, wp-graphql-acf. Let's download that zip file. Add a new plugin. Upload our plugin. Choose our file, install, and activate.
[0:18] Now if we go to our custom field and to our custom field type and scroll to the bottom, we see we know I have this option to show in GraphQL, which we're going to set to true. We have to give a field name for GraphQL. I normally call this ACF in every instance, and alias it when it returns to my frontend. Let's update that, click on GraphQL.
[0:38] We can see we have ACF available to us with the material price and weight that we added to our chair type. The material here is plastic. Price is 70, and the weight is 10. They didn't exist in the second one. We did not add them to our original post.
[0:52] In the frontend, when lots of GraphQL queries have been amalgamated, we sometimes have a huge width having the same field name. We can alias these fields to be the CHAR-ACF fields, which then would appear that way.
[1:05] We an alias them during the GraphQL query, and keep this consistently ACF. This is how I normally do this, but it is possible instead to have this as CHAR-ACF fields to begin with.