The interaction between the WordPress backend and the custom frontend framework happens through the API layer. The API layer will call the content from the WordPress backend and push it to whatever frontend technology the developer chooses. The two options for the API layer are the WordPress REST API or WPGraphQL.
The REST API comes bundled with WordPress, however, the data access pattern that it requires can be slow for the developer because it requires multiple round trips to reconstruct a fully modeled post, for example. REST requires each resource to have its own endpoint, so to get a post with the author and category would be three separate API calls. In contrast, WPGraphQL allows us to ask for a post with the author and category all in one request. Because of this, WPGraphQL is our preferred API layer. WPGraphQL is a free plugin that provides an extendable GraphQL schema and API for your WordPress site. WPGraphQL is faster than the REST API because it gets the exact data that is asked for as well as fewer functions executing through query optimization, less data downloading, more efficient data loading, and multiple resources included in a single request. For more information, watch this in-depth comparison of WPGraphQL and the WordPress REST API.
Our recommendation: WPGraphQL
Content Modeling Tool
When developing your headless web application, you may find that you need to add extra content fields or post types. The Advanced Custom Fields plugin allows developers to easily create custom content models and custom fields.
You will also need to install the WPGraphQL for ACF plugin if you want to use WPGraphQL as your API layer. This plugin is a WPGraphQL extension that exposes ACF data via the WPGraphQL schema. It is not yet available in the WordPress Plugin repository, so you have to download the ZIP file from the Github repository and upload it manually onto your WordPress site. Developers can then start querying for their data immediately.
Our recommendation: Advanced Custom Fields
When using WordPress, there are always tons of options for what plugins are available. The general rule for headless WordPress is that as long as a plugin does not touch the frontend of the WordPress site then it will work normally.
Good candidates for headless plugins will usually work well with WPGraphQL. Check out this list of WPGraphQL extension plugins. For more options, check out this list of plugins tagged as ‘headless’ in the WordPress plugin repository.
The Faust.js plugin ensures that your WordPress site runs smoothly as a headless CMS. This includes things like smart content redirects and enabling post previews.
Our recommendation: Faust.js and whatever else you need!
Our recommendation: Atlas
The flexibility of tech stack options is one of the major benefits of headless WordPress for a developer! While the decisions can feel intimidating at first, hopefully, this blog post has helped you make educated choices about what you’re building!
Stay tuned for our next blog post to walk through building a simple headless WordPress app with Next.js & WPGraphQL!