Building Your First Headless WordPress Project with ACF PRO and WPGraphQL

Building API-driven WordPress experiences can empower developers to deliver new and exciting experiences for their clients and expand their offerings. While some developers make the choice to go fully headless or decoupled, all developers can benefit from understanding how to build WordPress experiences using API-driven patterns. In this session, we’ll start with a basic React app in a code sandbox and use data from WordPress, ACF, and WPGraphQL to create a single-page app powered by WordPress. Although we’ll use React in the session, we’ll try to have enough scaffolding in place so that even those unfamiliar with JavaScript can code along with us.

By the end of this session you should be able to:

✔️ Understand when a Headless infrastructure makes sense for your project

✔️ Model different types of data in ACF and expose that data in the REST API and WPGraphQL

✔️ Fetch data from the WordPress backend using WPGraphQL inside your sandbox application

✔️ Use data from WordPress to render dynamic UI components in React

✔️ Deploy fully headless projects using the Atlas platform

GitHub Repo:

Headless WordPress resources:

[tsxpneo]

I've done a headless react Spa with ACF and Apollo based on a previous video and it works nicely after you helped me out with a tip regarding routing, and it rocks. I think at this point the main thing that would prevent me from actually using headless WP in production for relaunches or new WP installations are the following two: a) security and updating - the attack surface for WordPress may be smaller, but there's the added surface of whichever framework is applied and to be honest, it's easier to track vulnerabilities in wp plugins than in npm installed components, at least for me at this point. How wld you deal with that? And b) gdpr consent management. A tool like ComplianZ is a must-have on any site, and while I can imagine there's a hack to use it in a headless setup, it's probably not nearly as simple to set up as with wp-head. Are there consent frameworks that have similar functionality that work well with headless wp? I should mention that most sites I handle would benefit from headless, but at the same time aren't sufficiently big to warrant too much hand-crafted tooling.

[bw]

None of these videos every do anything more then a surface level overview of everything. Make a tutorial for beginners that includes actually programming of header, footers and content layouts. I download some ready to github from Corey and I can't even figure out where to embed my Google fonts or how to start reverse engineering these solutions. And then what about longevity, updates to code etc, how does one continue operating a stable build with the latest updates.