Bringing Dynamic Content to 11ty with Slinkity and GraphQL | StepZen
Published:
Ben Holmes demonstrates integrating Slinkity with StepZen to create a full-stack Jamstack application using React components and a PostgreSQL database.
Episode Summary
In this episode, Ben Holmes joins Anthony Campolo to showcase how Slinkity enhances Eleventy with dynamic content capabilities. They build a full-stack Jamstack application by integrating Slinkity, a framework that extends Eleventy with React components, with StepZen, a GraphQL API platform. The demonstration covers setting up a Slinkity project, connecting it to a PostgreSQL database via Supabase, and using StepZen to create a GraphQL API layer. They discuss the benefits of this approach for developers wanting to build full-stack applications with familiar tools like React and PostgreSQL, while leveraging the power of GraphQL. The episode highlights the flexibility of StepZen in connecting to various data sources and the potential of Slinkity in the evolving landscape of Jamstack technologies.
Chapters
00:00 - Introduction and Overview of Slinkity
Anthony introduces the StepZen stream and welcomes Ben Holmes, the maintainer of Slinkity. They discuss Slinkity’s role in enhancing Eleventy, a static site generator, with dynamic content capabilities. Ben explains that Slinkity integrates Vite, a modern bundler, into the Eleventy workflow, allowing developers to use React components and other JavaScript frameworks within their Eleventy projects. They touch on the concept of islands architecture and how Slinkity implements it, enabling developers to add interactivity to specific parts of their static sites without compromising performance.
02:56 - Setting Up a Basic Slinkity Project
The hosts begin setting up a basic Slinkity project from scratch. They create essential files like .gitignore, eleventy.js (the Eleventy configuration file), and a simple index.md as the entry point. Ben explains the purpose of each file and how Slinkity integrates with Eleventy’s configuration. They demonstrate how to start the Slinkity development server and show the initial rendered output. This section provides viewers with a step-by-step guide on getting a Slinkity project up and running, emphasizing its simplicity and compatibility with existing Eleventy setups.
07:15 - Introducing React Components with Slinkity
Anthony and Ben dive into adding React components to the Slinkity project. They create a simple “Hello” component and discuss how to integrate it into the Eleventy markdown file using Slinkity’s shortcodes. Ben explains the concept of partial hydration and how Slinkity manages to render React components within static content. They encounter and resolve a minor issue with component placement, highlighting the importance of proper file structure in a Slinkity project. This segment demonstrates how Slinkity bridges the gap between static site generation and dynamic React components.
14:23 - Integrating StepZen and Setting Up a GraphQL Endpoint
The focus shifts to integrating StepZen, a GraphQL API platform, with the Slinkity project. Anthony explains the concept of Fullstack Jamstack and how StepZen fits into this architecture. They set up a basic StepZen configuration, create a simple GraphQL schema, and demonstrate how to start a StepZen server. The hosts discuss the benefits of using GraphQL as an intermediary layer between the frontend and backend, showcasing how StepZen simplifies the process of creating and managing GraphQL APIs.
21:35 - Connecting to a Supabase PostgreSQL Database
Anthony guides the viewers through setting up a Supabase project and creating a simple “books” table in the PostgreSQL database. They explain how Supabase provides RESTful endpoints for database operations and how StepZen can utilize these endpoints to create a GraphQL API. The hosts demonstrate inserting sample data into the database and configuring StepZen to connect to the Supabase API. This section highlights the ease of integrating a real database into a Jamstack application using StepZen and Supabase.
31:18 - Fetching Data in the Slinkity Frontend
The final part of the demonstration focuses on fetching data from the StepZen GraphQL API in the Slinkity frontend. Anthony and Ben modify the React component to make a GraphQL query using the fetch API. They discuss various approaches to data fetching in React, including the use of libraries like React Query. The hosts also touch on the challenges of handling environment variables and API keys in a frontend application. This segment showcases the full integration of all components - Slinkity, React, StepZen, and Supabase - resulting in a functioning full-stack Jamstack application.
41:26 - Conclusion and Future Directions
In the closing segment, Anthony and Ben reflect on the demonstration and discuss the potential of combining Slinkity with StepZen for full-stack Jamstack development. They compare this approach to other frameworks like Gatsby and discuss the evolving landscape of web development, including the debate between single-page and multi-page applications. The hosts emphasize the importance of collaboration between similar projects in the open-source community and invite viewers to contribute to Slinkity’s development. They provide resources for further learning and engagement with both Slinkity and StepZen communities.