Architecting Jamstack Applications with GraphQL | Jamstack Boston

Anthony shows how to use StepZen to stitch together a Shopify backend with a Redwood application, enabling easy querying of products from the frontend.

Episode Summary

In this presentation, Anthony walks through building a Jamstack application using RedwoodJS and StepZen. He starts by explaining the basics of GraphQL and how StepZen allows you to stitch together multiple backends into a unified GraphQL API. Anthony then demonstrates creating a Redwood project, setting up a StepZen backend connected to Shopify, and querying product data from the Redwood frontend. He covers key concepts like schema definition, API key management, and serverless deployment. Throughout, Anthony explains architectural decisions and tradeoffs in the Redwood and serverless ecosystem. The presentation provides a practical example of using modern Jamstack tools to rapidly build a full-stack application with a headless commerce backend.

Chapters

00:00 - Introduction to GraphQL and StepZen

Anthony begins by introducing GraphQL, explaining its core concepts using the GraphQL.org homepage as a reference. He describes GraphQL as a query language for APIs and demonstrates a simple “hello world” example of creating a schema and querying it. Anthony then introduces StepZen, explaining how it allows developers to connect a frontend to a backend using GraphQL without having to implement it themselves. He touches on the benefits of using frameworks like RedwoodJS that have built-in GraphQL integration, setting the stage for the rest of the presentation.

02:56 - Setting Up a Redwood Project

In this section, Anthony starts building out a Redwood project. He demonstrates how to create a new Redwood application, generate pages, and explains the project structure. Anthony walks through the creation of a home page and an about page, showcasing Redwood’s command-line interface and routing system. He explains the separation between the frontend (web) and backend (api) sides of a Redwood application, and how they work together. This chapter provides a foundational understanding of Redwood’s architecture and development workflow.

06:00 - Integrating StepZen with Shopify

Anthony moves on to setting up the StepZen backend, which will connect to a Shopify store. He explains the structure of a StepZen project, including the index.graphql file that stitches together multiple backend schemas. Anthony demonstrates how to create a simple product schema and use StepZen’s @rest directive to connect to the Shopify API. He covers the process of managing API keys securely using a config.yaml file and shows how to start the StepZen server. This section highlights the ease of integrating third-party APIs using StepZen’s built-in connectors.

11:47 - Building the Redwood API

In this chapter, Anthony focuses on building out the Redwood API to interface with the StepZen backend. He explains the structure of the Redwood API, including the GraphQL handler that stitches together the backend. Anthony demonstrates how to create a GraphQL schema in Redwood that mirrors the StepZen schema, and how to implement resolvers using GraphQL requests to the StepZen API. He emphasizes the importance of keeping API keys secure by making requests from the backend rather than the frontend. This section illustrates how Redwood’s API layer can act as a secure middleware between the frontend and external services.

20:47 - Querying Data from the Frontend

Anthony concludes the practical demonstration by showing how to query data from the Redwood frontend. He introduces Redwood’s concept of cells, which provide a declarative way to fetch and display data. Anthony implements a ProductsCell that queries the backend for product data and renders it on the homepage. He explains the different states a cell can be in (loading, empty, failure, success) and how to handle each one. Finally, he demonstrates the complete flow of data from Shopify through StepZen, to the Redwood API, and finally to the frontend. This chapter ties together all the previous concepts into a working full-stack application.

22:58 - Q&A and Advanced Topics

The presentation concludes with an extended Q&A session where Anthony addresses various questions from the audience. He discusses Redwood’s plans for supporting different serverless providers, the challenges of adapting to platforms like Cloudflare Workers, and the future direction of Redwood’s backend architecture. Anthony explains the current limitations of deploying Redwood as a single Lambda function and the potential for breaking it into smaller, more optimized functions. He also touches on the options for running Redwood in a more traditional server environment. This chapter provides valuable insights into the broader ecosystem and future developments in the Jamstack space.