In web development today, decoupling frontend and backend systems has gained significant traction, giving rise to headless websites.
Traditionally, Content Management Systems (CMSs) have always been coupled together, but that came with many limitations, such as restricted flexibility and scalability. However, modern headless CMS empowers developers to decouple the frontend, built with any framework, from the backend via a headless CMS.
What Is a Headless CMS?
A Headless CMS is a specialized content management system that exclusively manages your site’s backend. Unlike traditional CMSs, it doesn’t dictate how content appears on the frontend. Instead, it provides an Application Programming Interface (API) for developers to retrieve and deliver content to any device or platform.
Today, numerous headless CMS platforms exist. However, transitioning your content from WordPress, which you are already familiar with, may seem unnecessary. Fortunately, there’s an alternative—headless WordPress.
Headless WordPress
WordPress, in its traditional form, is not inherently a headless CMS. WordPress is a popular and powerful CMS that is known for its ease of use and flexibility in content creation and management. However, it traditionally combines content management and how it’s presented in a single system.
Nowadays, developers have created headless implementations of WordPress by utilizing its REST API. In such cases, WordPress still functions as the CMS where you create, manage, and store content. However, instead of rendering the frontend or the website directly through WordPress templates and themes, the frontend presentation is decoupled or detached from the backend.
This allows developers to build applications using different technologies and frameworks while still leveraging the familiar WordPress content management capabilities. It’s a way to make WordPress function more headless, even though it’s not the default configuration.
This article explores two approaches to fetching data from your headless WordPress CMS into your frontend framework, focusing on two primary methods: WPGraphQL and REST API.
Understanding REST API for Headless WordPress
The REST API is a foundational pillar in WordPress development that facilitates data retrieval in JSON format. Since WordPress 4.7, it has been built into WordPress and does not require any plugin for it to work.
It provides data access to the content of your site and implements the same authentication restrictions — content that is public on your site is generally publicly accessible via the REST API, while private content, password-protected content, internal users, custom post types, and metadata is only available with authentication or if you specifically set it to be so.
To get your WordPress data in a JSON format, append /wp-json to your WordPress site URL:
http://yoursite.com/wp-jsonIf JSON API is not enabled when you visit http://yoursite.com/wp-json by default, you can enable it by opening your Permalinks under WordPress Settings and selecting Post Name or any other one of your choice except Plain:
This works for local and public WordPress sites, offering endpoints for posts, pages, comments, media, etc.
http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/mediaThere is more to what you can do with the REST API. Read our complete guide to learn more.
Exploring WPGraphQL for Headless WordPress
In 2012, Facebook introduced GraphQL, a revolutionary approach to data retrieval over APIs. Its declarative nature and selective data fetching provided a robust alternative to traditional REST APIs.
In 2015, Jason Bahl recognized the demand for a solution that combines the flexibility of GraphQL with the content capabilities of WordPress and then released WPGraphQL, a game-changer for WordPress developers.
WPGraphQL is a GraphQL-based plugin that offers a more efficient and tailored approach to data querying. It presents a single endpoint, enabling precise data retrieval and reducing over-fetching issues prevalent in REST API.
How To Use WPGraphQL
To use WPGraphQL, follow these steps:
- Install the WPGraphQL Plugin: Begin by installing the WPGraphQL plugin on your WordPress site. You can do this through the WordPress dashboard or by downloading it from the official WordPress plugin repository.
WpGraphQL plugin in WP marketplace. - Explore the GraphQL Playground: Once installed, WPGraphQL provides a built-in GraphQL Playground. To access it, navigate to the GraphQL tab on your WordPress dashboard:
Exploring GraphQL IDE in WordPress. The playground lets you explore the schema, run queries, and test mutations interactively.
- Craft Your Queries: Utilize the power of GraphQL by crafting queries tailored to your specific data requirements. Leverage the self-documenting schema to understand the available data and relationships.
Fetch WordPress Posts data with WPGraphQL.
You can now integrate WPGraphQL into your frontend application, whether it’s built with React, Vue, or any other framework, by using a single GraphQL endpoint to fetch data efficiently and update your UI dynamically.
Key Features of WPGraphQL
WPGraphQL has key features for a streamlined and targeted data retrieval experience, as shown below.
Single Endpoint for Precise Data Retrieval
WPGraphQL provides a unified endpoint, typically /graphql, allowing you to retrieve specific data efficiently. This contrasts with the REST API, where you need multiple endpoints to gather the same information.
For REST API, suppose you want to retrieve details about a specific post and its comments. You need to make multiple requests to different endpoints, for example:
To get information about a post:
http://yoursite.com/wp-json/wp/v2/posts/123To get comments related to the post:
http://yoursite.com/wp-json/wp/v2/comments?post=123On the other hand, with WPGraphQL, you can achieve the same result with a single, focused query:
{
post(id: "123") {
title
content
comments {
edges {
node {
content
}
}
}
}
}In this example, the GraphQL query is sent to a single endpoint. The query specifies that we want information about the post with ID “123,” including its title, content, and associated comments. WPGraphQL processes this query and returns a response containing precisely the data we requested, all in one go.
Targeted Queries for Efficient Retrieval
With GraphQL, you can craft specific queries tailored to your needs. This allows you to request only the necessary data, minimizing over-fetching.
Suppose you want to retrieve a few details (title, author, and date) about all posts. The REST API cannot do this. To retrieve these details, you’d need to use an endpoint like this:
http://yoursite.com/wp-json/wp/v2/postsThis endpoint retrieves the entire data set for all the posts, including content, categories, and associated data. With WPGraphQL, you can craft a targeted query to fetch only the specific data you need:
{
posts {
title
date
author {
name
}
}
}In this example, the GraphQL query is designed to retrieve details about the posts. However, we only ask for the title, date, and the author’s name. WPGraphQL allows you to request only the fields you’re interested in, resulting in a more efficient and lightweight response.
Multiple Root Resources
In WPGraphQL, you can query multiple root resources in a single request, making it flexible and efficient:
{
posts {
edges {
node {
title
content
}
}
}
pages {
edges {
node {
title
content
}
}
}
}Choosing the Ideal Head for Headless WordPress
When embarking on the journey of a headless WordPress setup, one of the critical decisions you face is selecting the ideal head – the frontend technology that will power your user interface and dictate the user experience.
This decision holds immense importance as it directly impacts your web application’s performance, scalability, and maintainability. Several frontend frameworks and technologies are compatible with headless WordPress, each with its strengths and considerations.
For example, you can choose a Static Site Generator (SSG) and deploy it to Kinsta’s Static Site Hosting for free, so you only have to bother about hosting WordPress (the backend) and enjoy free hosting for the head (frontend).
Similarly, you can also use a more robust approach, for example, using a JavaScript library like React to power up your frontend and keep WordPress processing the backend.
Summary
Both WPGraphQL and the REST API offer powerful ways to fetch data from a headless WordPress CMS and integrate it seamlessly into frontend applications. The choice between the two depends on your project’s specific needs and your preferred data retrieval approach.
If you opt for the REST API, you gain access to a built-in solution in WordPress, making it easy to retrieve data in JSON format. On the other hand, WPGraphQL provides a more modern and efficient approach, leveraging the power of GraphQL.
As the headless trend continues to evolve, developers can choose the tool that best aligns with their workflow and project goals, ensuring seamless and efficient integration between WordPress and the frontend framework of their choice.
At Kinsta, creating and managing your WordPress (backend) is a breeze with our specialized WordPress Hosting. It has valuable features, including edge caching, site backups, free Cloudflare SSL certificates, Kinsta CDN, and more.
Also, you can deploy your frontend using our Application Hosting or Static Site Hosting for SSGs. This unified approach allows both your frontend and backend to be readily hosted and accessed through a single dashboard.
Joel Olawanle
Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it’s frameworks.
