Connecting to Prismic's REST API with StepZen | StepZen
Published:
Anthony Campolo joins Alex Trost's Frontend Horse to demo integrating Prismic's headless CMS with StepZen's GraphQL API using StepZen's REST connector to map Prismic's REST API data to a GraphQL schema.
Episode Summary
In this episode, Anthony Campolo hosts Alex Trost from Prismic to explore integrating Prismic’s headless CMS with StepZen’s GraphQL API. They start by creating a simple blog post content type in Prismic and publishing sample content. Alex explains Prismic’s content modeling approach and API structure. Anthony then demonstrates how to use StepZen’s REST connector to map Prismic’s REST API response to a custom GraphQL schema. They discuss the benefits of StepZen for combining multiple data sources into a unified GraphQL API, comparing it to Gatsby’s data layer. The episode showcases how developers can quickly create a GraphQL API on top of existing REST endpoints with minimal code. They also briefly explore Prismic’s native GraphQL API and discuss potential future collaboration between the two services.
Chapters
00:00 - Introduction and Overview
Alex Trost introduces himself as a developer experience engineer at Prismic, a headless CMS focused on component-driven content creation. He explains Prismic’s concept of “slices” - reusable content components that editors can use to build pages. Alex also mentions his side project, Front End Horse, which includes a newsletter, blog, and livestream focused on creative coding and frontend development. The hosts discuss the appeal of creative coding and using code to generate art. They touch on the benefits of Prismic’s approach in empowering content creators while still allowing developers to use modern frameworks.
05:45 - Exploring Prismic’s Content Modeling
Anthony begins exploring Prismic’s interface, creating a new repository called “Zen Horse”. They discuss Prismic’s approach to content modeling, explaining the difference between repeatable types (like blog posts) and single types (like a homepage). They create a simple blog post type with title and rich text fields. Alex explains how Prismic automatically generates API IDs for fields and the importance of field naming conventions. They publish a sample blog post and examine Prismic’s API browser, which allows developers to see the raw JSON data and API endpoints for their content.
15:26 - Introduction to StepZen and REST Connector
Anthony introduces StepZen, explaining its purpose as a tool for combining multiple data sources into a unified GraphQL API. He demonstrates how to use StepZen’s REST connector to map Prismic’s REST API response to a custom GraphQL schema. They discuss the benefits of StepZen’s approach, which allows developers to easily extract specific data from nested JSON responses without writing complex resolvers. Anthony shows how to create a simple query that returns the blog post type and content, explaining StepZen’s syntax for defining GraphQL types and connecting them to REST endpoints.
29:27 - Refining the StepZen Schema and Queries
The hosts dive deeper into refining the StepZen schema, discussing how to extract specific fields from Prismic’s nested JSON response. They explore StepZen’s setter functionality, which allows developers to map deeply nested data to flat GraphQL types. Anthony demonstrates how to query the data using StepZen’s GraphQL explorer, showing how easy it is to construct queries by clicking on available fields. They compare this approach to Prismic’s native GraphQL API, discussing the differences in query structure and the potential benefits of using StepZen as an intermediary layer.
38:54 - Use Cases and Future Possibilities
Alex and Anthony discuss potential use cases for combining StepZen with Prismic, such as integrating analytics data or information from other services like Supabase. They explore how StepZen can serve as an API gateway, simplifying the process of combining multiple data sources into a single GraphQL endpoint. The hosts discuss the benefits of this approach for developers, including increased velocity and a simpler mental model for working with diverse data sources. They also touch on potential future collaboration between Prismic and StepZen to create more integrated solutions for developers.
43:40 - Wrap-up and Additional Resources
In the final segment, Alex promotes Prismic’s Slice Machine, a tool for building websites faster with reusable components. He mentions upcoming Slice Machine challenges and directs viewers to resources for learning more. Alex also promotes an upcoming Prismic livestream featuring their new React kit and Gatsby 4 integration. The hosts express mutual appreciation for each other’s work and communities, highlighting the collaborative nature of the developer ecosystem. They close by mentioning future collaborations and thanking viewers for watching.