-
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.
-
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 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 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 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 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 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 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.