Headless Craft CMS with GraphQL and React
Learn how to build a simple React-based recipe website using GraphQL to query Craft CMS in headless mode. You will learn how to use the Apollo Client library to streamline GraphQL requests and incorporate pagination, search, and category filtering of recipes. No knowledge of GraphQL is required; basic understanding of React and Craft CMS is recommended.
-
Headless Craft CMS with GraphQL and React, Part 1: Configuring GraphQL in Craft
November 4, 2025Get started building a simple headless Craft CMS site using GraphQL and React. In Part 1 we'll get our site ready to receive API requests by creating a GraphQL schema and token and configuring Craft for headless mode.
-
Headless Craft CMS with GraphQL and React, Part 2: Setting Up Apollo Client
November 4, 2025We continue our build-out of a simple recipe website using React and headless Craft CMS. In Part 2 we'll install and configure the Apollo Client library to simplify querying data via GraphQL.
-
Headless Craft CMS with GraphQL and React, Part 3: Populating the Listing Page
November 4, 2025We'll learn to write a GraphQL query then use Apollo Client to query our Craft CMS site for a recipe listing before populating it on our React front-end.
-
Headless Craft CMS with GraphQL and React, Part 4: Populating a Single Entry Page
November 12, 2025We'll continue lighting up our front-end templates by writing a GraphQL query for a single Craft CMS entry and populating its field data in a React component.
-
Headless Craft CMS with GraphQL and React, Part 5: Adding Pagination
December 3, 2025We'll use Apollo Client to add simple pagination to our listing page in order to break our Craft CMS entries data into smaller, more manageable chunks.
-
Headless Craft CMS with GraphQL and React, Part 6: Refactoring the Listing Component
December 10, 2025Before we dive into dynamic entry filtering we need to do a little organization of our listing page component.
-
Headless Craft CMS with GraphQL and React, Part 7: Adding Search Filtering
December 29, 2025We'll add a React-managed search field to our listing page so users can search for a specific recipe using Craft CMS's built-in search functionality and Apollo Client's reactive variables.
-
Headless Craft CMS with GraphQL and React, Part 8: Adding Category Filtering
January 7, 2026For our final tutorial we'll learn how to query Craft CMS for a category listing and use that data to populate a list of checkboxes on our frontend. Then we'll write some React event logic to dynamically re-fetch the Apollo query when a checkbox is toggled.