ACF Chat Fridays: WPGraphQL & ACF With Jason Bahl

ACF Chat Fridays are live discussions with the ACF team and community on the best ways to build sites with ACF, with special insights into new features coming to the plugin.

The October 27th session of ACF Chat Fridays featured special guest Jason Bahl, creator and maintainer of the WPGraphQL plugin. It allows you to separate the CMS from the presentation layer of any WordPress site by providing an extensible GraphQL schema and API. When combined with ACF, it becomes an ideal solution for creating headless WordPress sites.

Co-hosted by Iain Poulson, Matt Shaw, and Liam Gladdy.

Sign up for the next session →

Session Recording

You can see the entire session, including the WPGraphQL demo, in the player below.

Session Summary

Iain Poulson kicked off the session with a brief introduction before passing the mic to Jason Bahl, who led the forum through a thorough demo of WPGraphQL, including how to use the built-in Query Composer, how to use ACF to modify the GraphQL schema, and the magic of GraphQL fragments.

Before diving into the demo, Jason provided the forum with a concise explanation of how GraphQL works. In short, the client makes declarative queries that ask for the exact data needed. The exact data requested is then returned, with no other data in the response. This gives clients more control over applications and improves efficiency by only fetching the requested resources.

Starting with a plain WordPress install running the Twenty Twenty-Three theme, Jason took us through activating the WPGraphQL plugin, and showed how to use it to explore the schema and test operations.

The heart of WPGraphQl is the Query Composer, allowing you to compose practically any query by ticking off checkboxes (or simply typing it in). One of the essential elements of GraphQL is that the result has the exact same shape as the request. The server knows exactly which fields are being requested, and you always get back what you expect.

Jason noted that while you can use this in PHP, the more common use is to get data out of WordPress for use in a headless application.

Next, Jason took us through how to modify the GraphQL schema with ACF. While he was using ACF PRO, he noted that WPGraphQL works with the free version of the plugin as well. The WPGraphQL for Advanced Custom Fields extension is not currently available on the WordPress.org repository. You can download the current version from Github or require it with Composer:

composer require wp-graphql/wp-graphql-acf

Alternatively, you can install the latest beta release, v2.0.0-beta.5.1.0. The beta can also be required with Composer:

composer require wp-graphql/wpgraphql-acf

After creating a simple field group containing a Text field and assigning location rules, Jason demonstrated how you can now see the field group in WPGraphQL. The settings pane allows you to control if the field group is visible to GraphQL (defaulting to true), as well as where the field group shows in the schema. The location in the schema is assigned automatically based on the field group’s location, but you can override this manually if it doesn’t meet your expectations.

Jason also demonstrated how to create fragments, a very powerful concept found in GraphQL. In brief, when you create an ACF field group and show it in the GraphQL schema, you’ll see WithAcf followed by the name of the field group, for example, WithAcfTestFieldGroup. By clicking on this, you can see any type in the schema that has this interface, i.e., all the locations in the schema that have access to the data from that field group. Since Jason associated the field group he created with the post post type and the category taxonomy type, they are With the ACF test field group he created. In turn, this means that instead of querying directly on the node, it’s possible to introduce a “fragment” that specifies where it will be applied and the type in the graph to check for during resolution. If that type is found, it will execute those fields.

One strength of fragments is that they can be used to query multiple resources in a single request, such as posts and categories. Conversely, if you wanted to use REST to do this, you would need to hit a post endpoint and a category endpoint, instead of one request using a fragment and GraphQL.

For more, please make sure to watch the session here.

Q&A

Questions about the best way to use ACF, feedback about the plugin, or feature requests? ACF Chat Fridays is one of the best places to make sure your voice is heard and your questions answered.

We’ve included some of the questions and answers from the latest session below, with minor edits made for clarity and style.

Q: What are the pros and cons of using GraphQL as opposed to creating custom REST endpoints?

A: One of GraphQL’s greatest strengths is that it’s a type-based system. You can define a type once, and then use it in many places.

The effort involved in maintaining custom REST endpoints tends to rise over time, especially if you have clients with different needs. Say you have two client applications consuming the same endpoint, and client A is asking for something that B doesn’t want or need. With REST, you either build two different custom endpoints, or give one of your clients data they don’t want. With GraphQL, the client expresses exactly what they want and we can pluck it out of the schema. We can expose whatever we need.

Q: Is it possible to retrieve ACF Block data from a post or page with WPGraphQL?

A: Support for ACF Blocks is included in the latest beta release of WPGraphQL for ACF. It uses WPGraphQL Content Blocks v1.2.0+ to expose blocks to the GraphQL schema, allowing ACF Blocks and their associated field groups to be queried as GraphQL types.

Q: If I wanted to incorporate GraphQL queries in a custom plugin, is it possible to bundle WPGraphQL with that plugin, like you can do with ACF?

A: WPGraphQL and WPGraphQL for ACF cannot be bundled this way. Instead, they must be installed on any site where they’re needed.

Q: In the REST API, you have to design endpoints to gather specific data. In GraphQL, is all the data already there?

A: You still have to ask GraphQL for what you want, but the big difference is that when you hit an endpoint in REST, you get what the server says you’ll get. There are query parameters you can use, but the server is in control. In the GraphQL schema, the client has more control.

The real magic in GraphQl is fragments. When building any complicated system, you break it up into parts. If you’re using REST, you need to figure out how all of the components get the data they need from a single request. With GraphQL fragments, you can just build them and import them into the template, and each component can define what it needs. You end up with a pretty small root template.

Q: My team develops WordPress sites with a page builder, and we’re very used to creating and working in PHP files, starting with TailPress as a base. Does ACF plan to move towards the WordPress full site editor approach with html files, or will ACF Blocks made in PHP stick around for a while?

A: We aim to support every way to WordPress, whether that’s classic, a hybrid approach, or full block themes. You can build however you like with ACF.

Resources & Links

We share relevant resources during the call. We’ll sum them up here and try to provide a bit of context:

• Jason Bahl on Twitter
• WPGraphQL
• WPGraphQL for Advanced Custom Fields
• Beta Release: WPGraphQL for Advanced Custom Fields v2.0.0-beta.5.1.0
• WPGraphQL Content Blocks
• Introduction to GraphQL
• ACF on Twitter
• ACF Emails and News
• Sign up for ACF Beta News
• ACF’s Feedback Page

Coming Up on ACF Chat Fridays

Join us on November 10th at 2pm GMT for the next session of ACF Chat Fridays.

What do you think we should cover at our sessions in November, December, and throughout 2024? Let us know on Twitter.

Sign up for the next session of ACF Chat Fridays here:

https://wpeng.in/acf-chat-fridays/

The list of upcoming sessions is below. You can watch the October 13th session on YouTube.

• November 10, 2023
• December 8, 2023

Tag or DM us on Twitter to let us know you’ll be there. Suggest new topics, let us know what you’d like to see, and send us feedback with #ACFChatFridays on Twitter.

About the Author

For plugin support, please contact our support team directly, as comments aren't actively monitored.