Connecting to Prismics REST API with StepZen

Episode Description

Anthony Campolo and Alex Trost explore connecting Prismic's headless CMS to StepZen's GraphQL gateway using the REST API.

Episode Summary

In this episode of the StepZen Stream, Anthony Campolo is joined by Alex Trost, a developer experience engineer at Prismic and creator of Front End Horse, a community focused on creative coding and front-end development. After discussing what creative coding means and how headless CMSs like Prismic empower both developers and content editors through component-driven design with "slices," the pair dive into a hands-on demo. They create a new Prismic repository from scratch, set up a blog post content type, publish content, and then explore how to connect Prismic's REST API to StepZen's GraphQL gateway. Anthony walks through StepZen's REST connector, demonstrating how directives, result roots, and setters allow developers to reach into deeply nested JSON responses and surface exactly the data they need in a clean GraphQL schema. They briefly compare Prismic's own GraphQL API with the StepZen approach, noting ergonomic differences. Alex highlights StepZen's real value as a unifying data layer—similar to Gatsby's data mesh but framework-agnostic—that shines when combining multiple services like analytics, e-commerce, and databases into a single graph. The episode wraps with a mention of Prismic's Slice Machine tool and plans to expand the integration on a future Front End Horse stream.

Chapters

00:00:24 - Introductions and Front End Horse

Anthony welcomes Alex Trost to the StepZen Stream. Alex introduces himself as a developer experience engineer at Prismic and the creator of Front End Horse, a community built around creative front-end development and horse puns. He explains that Prismic is a headless CMS centered on component-driven content using reusable sections called slices.

The two discuss their overlapping communities and tease upcoming guest appearances on each other's streams. Alex describes how Prismic bridges the gap between developers and content editors, giving editors a page-builder experience on top of solid frameworks like Next.js or Nuxt, without sacrificing performance the way a traditional site builder might.

00:03:13 - Creative Coding and the Web

Anthony asks Alex to define creative coding, and Alex explains it as a broad umbrella covering generative art, SVG-based visuals, 3D work with Three.js, and anything that brings artistry to the front end. He highlights community members like George Francis who create stunning generative artwork with code and math concepts like Voronoi tessellations and the golden ratio.

Anthony connects this to his own background in the arts, reflecting on how the process of creating and refining work translates naturally into coding. They discuss the idea of using code as a tool for artistic expression, where algorithms can produce unexpected and inspiring visual outputs that a human designer might never conceive on their own.

00:09:29 - Setting Up a Prismic Repository

Anthony begins screen sharing and walks through the Prismic homepage, noting the prominent GraphQL query displayed there. He and Alex discuss when to use Prismic's REST API versus its GraphQL API, with Alex explaining that most developers interact through the Prismic client library rather than making raw API requests. They touch on framework-specific differences, particularly how Gatsby's plugin pulls content into its own GraphQL data layer.

The pair then creates a brand-new Prismic repository called "zenhorse," walking through the onboarding flow. Alex explains the distinction between repeatable types like blog posts and single types like homepages, and they configure a simple blog post content type with a title and rich text field, discussing nuances like field names versus API IDs.

00:17:00 - Creating Content and Exploring the API Browser

With the content type set up, Anthony creates and publishes a sample blog post, then navigates to Prismic's built-in API browser. Alex explains that he uses this tool for debugging—verifying that content appears correctly in API responses. Anthony highlights useful features like toggling between HTML and JSON views and the self-referencing endpoint URL included in each result.

They discuss the concept of refs in Prismic, which represent specific content versions and power features like previews. Alex warns that the ref value changes with each new publication, which could affect how StepZen connects to the API long-term—a detail they plan to address in a future stream.

00:25:29 - Connecting Prismic to StepZen

Anthony shifts to the StepZen side of the demo, showing the index.graphql file and the Prismic schema. He explains how StepZen's REST connector works: you define a GraphQL type, point it at a REST endpoint, and use a result root to target the specific part of the JSON response you need. He demonstrates how setters allow you to reach into deeply nested objects—like extracting title and rich text from within a results.data path—without writing custom resolver code.

Alex asks thoughtful questions about typing JSON responses more specifically and whether StepZen offers a visual explorer similar to Gatsby's. Anthony demonstrates the explorer, showing how anyone can build a GraphQL query just by clicking fields, and they view the returned blog post data confirming the integration works end to end.

00:35:02 - Comparing GraphQL Approaches and the Value of StepZen

Anthony briefly demonstrates Prismic's own GraphQL API, showing the edges-and-nodes pattern it uses compared to StepZen's flatter, more customizable query structure. Alex shares his honest take that for Prismic-only projects the native tools are sufficient, but StepZen becomes compelling when you start combining multiple data sources—analytics from Plausible, a database in Supabase, e-commerce from Shopify—into a single unified graph.

Anthony explains that StepZen is technically a managed GraphQL gateway, built by former Apigee engineers, and that it dramatically reduces the boilerplate code normally required to wire up resolvers for multiple REST endpoints. Alex likens it to having Gatsby's beloved data layer available as a standalone service usable with any framework, which is something he has wanted for a long time.

00:43:09 - Wrap-Up and Prismic Slice Machine

The conversation winds down with Alex highlighting Prismic's Slice Machine, a development tool designed to speed up website creation by letting developers build and manage slices locally. Anthony spots a broken link in Prismic's search results, which Alex appreciates catching, and directs viewers to slicemachine.dev for the correct resource.

Alex mentions an upcoming Prismic livestream covering Gatsby 4 and a new React kit, and the two confirm plans for Anthony to appear on Front End Horse in December to expand the StepZen-Prismic integration into a fuller project. They close by thanking viewers and expressing enthusiasm for continued collaboration between the two communities.

Transcript

00:00:24 - Anthony Campolo

Hello everyone. Welcome to another episode of the StepZen Stream. We have a really exciting episode for you today. We have my good friend Alex Trost. Alex, welcome to the show.

00:00:35 - Alex Trost

Hey, thanks so much for having me. I'm really thrilled to be here, Anthony. Always good to talk with you—now I get to work with you too. I don't know, I'm super excited. So thanks for having me.

00:00:46 - Anthony Campolo

Yeah, and I've been telling you about StepZen for a while. Last week after I had Ben Holmes on, at the end he was like, oh, so this is how you get your friends to try out StepZen, huh? Like, pretty much could have just invited

00:00:59 - Alex Trost

me over for dinner or something, man. It seems like it might be easier, but now we get to chat with everyone here. I think it's a win-win. I think it works.

00:01:06 - Anthony Campolo

Right at the end of the meal I'm like, so about this GraphQL query. But I'm especially excited because we're going to get some good graph-themed horse puns, I would imagine.

00:01:15 - Alex Trost

You know, we're going to try to keep it on brand.

00:01:17 - Anthony Campolo

So why don't you let our listeners know like who you are, what you do, where you work, all that kind of stuff.

00:01:22 - Alex Trost

Yeah, absolutely. So I'm a developer experience engineer over at Prismic. Prismic is a headless CMS that really focuses on component-driven data. Basically the focus with Prismic is that you build your site with slices, and slices are essentially like big components that you can move and reuse, and your editors can build out pages with these big sections of your website. So that's really what we focus the CMS experience around. I work there trying to make the developer experience a bit better. On the side—or I guess in addition to that—I also run a thing called Front End Horse. It started out as a newsletter and a blog and now it's kind of grown into a community, and streaming is kind of the thing that I'm focusing on for the most part there. So yeah, I stream. I have great guests on. I think we've got you scheduled for December, is that right?

00:02:26 - Anthony Campolo

Yep. Yeah, I think December 21st, somewhere around there. So we'll be hyping that up. We might actually end up building a little bit on top of what we build today because it'll be fairly bare bones. But I think when I get on yours I'll probably throw in like a Redwood app or something ridiculous.

00:02:40 - Alex Trost

Oh, I'm excited. Great. So we focus on creative coding and front-end development and horse puns there. We encourage very strongly a pun culture in chat, and the community is a whole lot of fun. If you're looking for a friendly place to just talk about creative coding and front-end development, yeah, hop on over—or trot on over. Yeah, I got to work on it.

00:03:13 - Anthony Campolo

I can attest to the just sheer wonderfulness of the community over there. I always have a really good time and I've gotten to meet a lot of people who have lots and lots of skill sets that I certainly don't have. And what I really enjoy is the heavy design and CSS emphasis that you have. And I'm kind of curious, like, when you use the term creative coding, what exactly does that mean?

00:03:36 - Alex Trost

Yeah, it's definitely a big blanket term that covers a whole lot of things. I think I kind of need to narrow down to, like, creative front-end coding, because there's tons of coding with shaders and lots of things that might not necessarily make its way to the front end, but will eventually. But it's still creative coding. So people code in all different kinds of languages, but really the focus of the newsletter and of the stream is: can we add some creativity, add something kind of artistic or new or just fun to the web, to the front end? That's really what I focus on. I bring on guests like George Francis, our friend who's very active in the community. He does a lot of generative art that's SVG or JavaScript based. And we learn from them and figure out how to do cool stuff in Three.js and all that good stuff. Hey, Lucia, looking at the homepage seems cool. Prisma creates a continuum between developers and content creators. Yeah, that's a really good way of putting it. It's exactly that sort of thing where we want to empower the content creators to not have to go tag a developer every time they want to launch a new page.

00:05:10 - Anthony Campolo

Right?

00:05:11 - Alex Trost

They can use the pieces that the developer has built. And because the developer builds it out in a good framework like Next.js or Nuxt or Gatsby or whatever the developer chose as the best tool for the job, the editors get to build those new pages in a solid framework but still get that page builder experience that something like Wix would give. But a Wix front end isn't going to run the same way as a nice refined Nuxt or Next app. So kind of a win-win for everybody.

00:05:45 - Anthony Campolo

Yeah, that's my coworker Lucia. And what you're describing is—if anyone saw a stream we did a while ago on Storyblok, they're also a headless CMS. They have a content editor. They have their own weird specific words to describe things. Like they have blocks instead of slices. But I do enjoy this kind of model that I see a lot of headless CMSs converging on, which is giving the best of both worlds in the sense of you want to have that decoupled aspect so you can build your front end the way you want. The typical Jamstack kind of way—we're really big into the Jamstack here at StepZen. And so we like these tools that give the developer the ability to hit it with an endpoint, like a REST API or GraphQL API. Prismic offers both, which I think is similar with Storyblok. And that's really cool because you want to give developers that flexibility. Then you want the content editors to be able to edit the content as well. And what I find really cool is that you can also get newer devs involved, because they can start editing the content and then also start playing with the API.

00:06:56 - Anthony Campolo

Then they can start to map how those two things actually go together. Oh, we got some spam. You must be a popular fellow. He got spammed. Yeah, I don't know if I actually

00:07:09 - Alex Trost

have them follow me wherever I go.

00:07:11 - Anthony Campolo

Yeah, I'm logged into my Anthony account on Twitch, so I can't delete that right now. But not the end of the world. At least he's not trying to sell his crypto. Yeah, but the last thing on that creative coding stuff is that I love that because I used to be in kind of the arts field and I definitely enjoy just creating stuff in general. What got me kind of into coding is because I like the process of creating things, like honing a piece of work, and whether that's something visual or something auditory—I was a musician—but it's really the same kind of idea of how do you make something that other people enjoy, but then also how do you find a process that allows the creator to truly express themselves? And people talk about, you know, code as art kind of thing. I never really bought into that. But using code to make art, that makes a lot of sense to me because you can generate almost anything you can think of, especially when you get into the generative art stuff you were saying, which is that you start creating these algorithms that can mix and match different color combinations that you could never even think of.

00:08:21 - Anthony Campolo

And you can just spit out a bunch of stuff and be like, all right, well, 99% of this looks weird, but this thing looks kind of cool. Let me take that piece and then kind of go off of that from there.

00:08:31 - Alex Trost

Yeah. But then even using stuff like the Fibonacci—you know, like the golden ratio—and using color theory to pick your colors, you can use math and things like that to make some super cool things. And I'm always blown away by the Voronoi tessellations and stuff like that that George and others get into. Like, wow, this is really wild. And it just looks super cool. I've been learning a bunch, basically. I don't know much. I bring people on to teach us about how they make these incredible things with just CSS or just with code. It's been a lot of fun. I get to meet a lot of great people and I'm sure you can relate.

00:09:15 - Anthony Campolo

Totally. Yeah. That's a good thing to do. Our episode has not aired yet, but there's an upcoming FSJAM episode with you with your name on it. So keep your eyes on that.

00:09:27 - Alex Trost

Yeah. Excited for that. That was a lot of fun.

00:09:29 - Anthony Campolo

Yeah. I'm gonna do some screen sharing now and let's get into. Oh, here's the Front End Horse also. Nice little stirrup, I think.

00:09:40 - Alex Trost

Yep.

00:09:42 - Anthony Campolo

I love that. You literally just picked Front End. You picked Horse because there's a dot horse domain.

00:09:48 - Alex Trost

And it's really funny to me, the name. Like, to look someone in the face and say, yeah, just type in frontend.horse, and they're like, dot com? No, I mean, I own that. Sure. But that's not it.

00:10:04 - Anthony Campolo

All right, so here is our Prismic homepage and you actually have a GraphQL query prominently displayed right here, which I think is pretty cool. And we're going to be looking more at the REST API, so I'll be curious. You could talk a little bit about why exactly you think someone would use one versus the other. I have my own reasons that are StepZen-specific. But if someone's asking you how they should access the API through Prismic, how would you tell them to think about whether to use the REST or the GraphQL one?

00:10:36 - Alex Trost

Yeah, from my experience, for the most part accessing the API comes down to using the client. To be honest, when I'm actually building out projects, I'm typically going in and hitting it not so much through just a raw request to the GraphQL API or to the REST API, but more so picking the framework that I'm using—or if it's just JavaScript or if I'm using something like SvelteKit that doesn't yet have a plugin or an integration—I'm pretty much reaching for the Prismic client just as a personal thing.

00:11:23 - Anthony Campolo

And then with one of these React ones, the Prismic client gives you specific instructions for how would you do this with useEffect

00:11:32 - Alex Trost

and stuff like that, I'm guessing. Yeah, the React one. We just released a brand new React kit in beta that's going to be a little bit different than this, but for the most part that just handles the rendering of the content. No, we don't—do we have that? That's probably like a developer product thing for React. For the most part, querying is going to be pretty similar across most of your JavaScript applications. The big difference—actually, the ones that are more different than others, let me try to get that sentence out—are Nuxt and Gatsby. Gatsby definitely handles things in a very different way than Nuxt does. With Next.js you're making your standard query in a getServerSideProps thing, whereas with Gatsby we actually have a Prismic plugin that brings your content in and exposes it all within Gatsby's GraphQL layer inside the mesh. Right.

00:12:50 - Anthony Campolo

And that's awesome because that's going to be pretty similar to what StepZen does. For anyone who doesn't know—because this is the StepZen Stream, so you may or may not know—we have the ability to basically feed in lots of different data sources into one unified graph. So this is really useful for your front end because let's say that I have this Prismic site and I have blog posts as well, but I also have an e-commerce thing with Shopify—and I bet you probably have Shopify integrations as well. So this is one of those things where there's going to be many, many ways to do this, but with StepZen it's just a generic way to feed literally any endpoint you could possibly think of into one unified graph. So if you wanted to have your blog and your e-commerce and your own bespoke Redwood application with a database for your users and bring that all together in a coherent way—that's the idea with StepZen. So we're going to show how to connect to Prismic's REST API to feed some data in, and then when I get on your stream we'll build that out further.

00:13:57 - Anthony Campolo

It's like an actual kind of full project. Right now I just want to show how do you hit the API, how do you get data back? Because you have some interesting conventions around refs and things like that. Took me a little bit of time to figure out the GraphQL one especially. So we're not really going to go into that one at all. But you said that you were more familiar with the REST API anyway.

00:14:18 - Alex Trost

Yeah, the GraphQL API, just full disclosure, doesn't work 100% the way that a typical GraphQL API would work because you

00:14:28 - Anthony Campolo

got to do GETs.

00:14:29 - Alex Trost

Yeah, there's just a few differences where it doesn't feel like a full GraphQL API. I think we're working on getting a bit further along with that implementation in the coming months. For the most part, if you want to get nested linked data, you use something called Graph Query, which is our own—I don't say proprietary, but it's kind of our own personal thing. But connect StepZen and let us do the rest. Nice, nice. Yeah. So to get linked data, you're going to want to use something called Graph Query in order to say, give me this document and the author and the author's photo, to get those kinds of relationships without having.

00:15:28 - Anthony Campolo

Yeah, this makes a lot more sense.

00:15:29 - Alex Trost

Yeah. What was I going to say beyond that? Oh, just about StepZen—what you just described. I've been saying for a while I want Gatsby's data layer as a service. It's one of my favorite things about Gatsby. Just having all that data, being able to see it in that way, being able to check off the things I want, not having to worry about just the fetches within my components and all that stuff. I love that aspect of Gatsby, but Gatsby has its trade-offs and its shortcomings, and sometimes I want to pick up Next.js but then I'm like, oh man, passing data around here just isn't as nice. I've always wanted the data mesh, that data layer of Gatsby as a service. I'm super excited to see StepZen up close.

00:16:26 - Anthony Campolo

Yeah, we got a StepZen Next Starter. We got a StepZen WordPress Next. We got a bunch of stuff with Next already. That's one of the things I also really like—once you get your front end connected to a StepZen thing, that's just handled. Then whatever you want to bring into your StepZen graph, you can do. So that's kind of what I do: I go out and find things like Prismic and figure out how to connect to the actual endpoint itself and feed the data in. And then it's like, okay, you can take literally any of our starters, just drop this Prismic schema in and then you're good to go.

00:17:00 - Alex Trost

Awesome.

00:17:02 - Anthony Campolo

We'll start—let's do this totally from scratch. Let's create a new repository and we will call this zenhorse.

00:17:12 - Alex Trost

Very calm, meditative.

00:17:17 - Anthony Campolo

Why do they ask you whether you're a developer, content editor, or project manager?

00:17:22 - Alex Trost

So just on my end, the reason I know this is just so that we can kind of understand who's signing up. In the near future we're looking to customize your experience off the bat for easier onboarding for certain types of people. Like, if you're coming in as a content editor, that would be easier, but for the most part it helps us understand, oh, there's a lot of demand for Next.js, we want to make sure that we put a bit more emphasis on that in the documentation or something. Right.

00:17:55 - Anthony Campolo

Like just.

00:17:56 - Alex Trost

Just having an understanding of our users. Not so much like trying to be invasive, but it's just because we don't know where the data is going and we kind of don't want to know. We're an API, but when it comes to creating our kits and things like that, we want to make sure that we're not ignoring a group of people. So for instance, Svelte keeps on coming up—hey, and it's Svelte, like, we want to use Prismic. And so we are hearing the community and we're focusing on building out that integration to make it super easy to use Svelte and Prismic. Working on that right now.

00:18:35 - Anthony Campolo

Nice. Yeah, I'm a big fan of Svelte, so I'm all into that.

00:18:38 - Alex Trost

Awesome. It's awesome. Yeah.

00:18:40 - Anthony Campolo

All right, so one thing that is interesting here is that you don't just kind of start by creating content. You first describe the type of content you're actually going to create in the first place. And so—hey, we got some Svelte fans in the chat.

00:18:55 - Alex Trost

Hey, Brent's here, if you wouldn't mind. Good to see you.

00:18:58 - Anthony Campolo

Yeah, thanks for stopping by. And what is—well, it says right here, actually. I really like this. This is a great onboarding experience. It just tells you straight up. But you have the repeatable types, which are things like blog posts, authors, products, and then single type, which would be like a homepage or a privacy policy page. So basically, is it something that's going to be like an array of things or is it going to be like one big thing that's going to be like a page? And so we want to create like a blog post here. So we want one of these.

00:19:26 - Alex Trost

You can't even make a repeatable type page. And we do that with Slice Machine, our new development tool and experience. But yeah, that singleton one is more about, is it just like a menu where you want that everywhere? You're only going to make one of them. Whereas for pages, because of Slices you're able to create endless pages and just give them a UID and run with it from there. Brent says definitely look forward to learning about these two services together. Yeah. Great to have you. I'm so glad you're here.

00:20:03 - Anthony Campolo

Yeah, I've been hyping up StepZen every time I'm hanging out in my Discord. I do actually legitimately really like the product. So it makes me feel less like a shill because I'm like, hey, trust me, this is actually cool.

00:20:18 - Alex Trost

I used Prismic before they reached out about the position. It was kind of my go-to for a headless CMS. I used others. I like others, but it's not like I was like, oh, I never heard of this, but sure, I'll talk about it. I'm like, oh, this is great. I've used this on a bunch of sites already.

00:20:40 - Anthony Campolo

I'm curious, what is the difference between the field name and the API ID?

00:20:46 - Alex Trost

Yeah, so the field name is more just about what is going to be shown to your editors, where the API ID isn't going to be shown when I'm entering content. That's just more for you and I as we're wiring up things in the back end. But yeah. So if you give the field name a capital—if you make that pretty, if you do like "rich text," capitalize it and space it, we're going to add that underscore. You can change that underscore out. But that's just the difference—we're going to automatically change it to more of. I don't think the hyphen is going to work.

00:21:23 - Anthony Campolo

I was just going to say when I was testing this yesterday, I'd had the hyphen here and everything broke. And so I was going to say don't do this.

00:21:32 - Alex Trost

Yeah. The editor is a big spot that we are devoting a whole lot of time. We're fielding a big team for it to just make our editor really.

00:21:46 - Anthony Campolo

And I should specify that Prismic did not break—StepZen broke.

00:21:51 - Alex Trost

Oh, gotcha. Okay, gotcha. Well, that's good. Oh,

00:21:56 - Anthony Campolo

because you tried to feed it in. Because we'll see as we get to the StepZen part. But this is basically where you're going to tell it how the data is coming out and how do you actually match it to your GraphQL schema. So.

00:22:08 - Alex Trost

Got it.

00:22:08 - Anthony Campolo

I'm just going to leave this as,

00:22:10 - Alex Trost

like, I think now that you edited the API ID, we're not going to automatically change it. I hope that's okay.

00:22:16 - Anthony Campolo

Let me just start that over.

00:22:18 - Alex Trost

Yeah, just like we save you the time, but then once you start to change it, it's going to let you.

00:22:25 - Anthony Campolo

It's all lowercase, one word. I think this is going to be the least likely to break anything.

00:22:30 - Alex Trost

So the placeholder is not necessary, but it's a nice way to help your editors just be like, hey, I don't know, whatever people use a placeholder

00:22:43 - Anthony Campolo

for, then we're just going to save that. And then we've got our type. And so now we want to actually create a thing. So this would be in the documents now and we see exactly what we had before. So we have our title, we have our rich text. If you say this is the title and this is the rich text—let's just start with that for now. And so you can save it. But what we really want to do is we want to publish it. So once we publish it, it's actually going to be live and out there on the internet. And what's really cool is you have this pretty sweet API browser thing. So is this something that you use personally when you're kind of messing around with the API?

00:23:36 - Alex Trost

Yeah, occasionally. Especially if I'm trying to debug something, make sure that something is actually in the API. Like, all right, is this my code or is something happening on Prismic? It's usually my code. I mean, I'm not just saying that because it's Prismic, but because with every service that thousands of people use, it's probably my code. It's rare that I find a new bug. But yeah, it's really helpful to see how the content's coming out and you can add some specific queries there, see how they.

00:24:09 - Anthony Campolo

Yeah, what I liked is that you can switch between the HTML and the JSON. That's a really nice touch because you can kind of see what it actually looks like with the markup and everything. But then if you want to see what your data actually looks like—and then the really nice touch, and what makes this clutch for StepZen, is the result itself comes with the endpoint that returns the result, which is not something that a lot of APIs think about, actually.

00:24:35 - Alex Trost

Okay. I never knew why that was important, so I'm excited to learn. It's just a reference to itself.

00:24:43 - Anthony Campolo

It's basically just the raw JSON, because before when we're looking at this, if we just grab this, this wouldn't necessarily work because this is optimized for this whole GUI kind of front-end thing. So.

00:24:57 - Alex Trost

But even in that result you just got in your last tab, even that has the same length. It's just interesting that it links to itself.

00:25:06 - Anthony Campolo

Yeah, it's basically recursive. It's just an ID pointing back to itself.

00:25:10 - Alex Trost

Yeah, got it. I don't know enough about creating APIs and this kind of stuff to understand why that's important. It's just one of those things that I don't honestly pay enough attention to when I'm making a site. Like, that's never a thing I need—I just want my content typically. Right.

00:25:29 - Anthony Campolo

So yeah, this is going to be basically the endpoint we're going to use to get our StepZen thing going. So I'm going to hop over—what I always do for these streams is I basically build the thing out ahead of time just so it actually works and I don't embarrass my guests, and then I kind of just walk through again.

00:25:50 - Alex Trost

I'm here to do that all on my own, Anthony. That's what I'm here for.

00:25:54 - Anthony Campolo

That's your job.

00:25:55 - Alex Trost

Yep.

00:25:57 - Anthony Campolo

Okay, so for every StepZen project, you have an index.graphql, which is what links the rest of your schemas together. As this is just a simple example, we only have the one Prismic file here, not much else going on. And I want to first start us off with just a part of this that we're doing here. So I'm going to put this in and delete a bunch of it. We don't want to do that yet. And we don't want to do either of these yet. So what's happening right now is we are creating a GraphQL type that's going to essentially match up with this response that we're getting up here. So we are able to use what's called our REST connector to feed in a REST endpoint and then specify exactly what we want to get. This is cool. You had asked me about the nested JSON and how exactly that works. Because if we look at this, what we're getting back here, we have a decent amount of info here, but really this results thing is what we actually want. And then within the results itself, the actual data we want is in this data title object and then this data rich text object.

00:27:14 - Anthony Campolo

So that's actually where the important stuff is happening. So with our REST connector, with StepZen, we have this result root that lets us say, okay, we don't want this whole object, we actually just want the results. And that's going to give us access to everything inside the results. So I want to just pull out this type right here and display BlogPost. We're creating a result type that has the type, which is string. If you've ever seen a GraphQL schema before, everything aside from this is a basic GraphQL schema exactly how you see any GraphQL schema written. And then the directive is where it gets a little interesting. Now that we have that set up, let me go back to—where was that? GitHub. Always do this thing where I end up with too many tabs and I start moving windows around.

00:28:12 - Alex Trost

I've never had too many tabs, Anthony. I don't relate to this at all. I didn't even know you could make tabs in Chrome. That's the thing. I always have one tab.

00:28:22 - Anthony Campolo

I just have the single tab all the time.

00:28:24 - Alex Trost

I thought Chrome had a single thread. Isn't that what they mean, single? Single threaded. Learn something.

00:28:31 - Anthony Campolo

Okay. Also, have you upgraded yet to macOS 12?

00:28:37 - Alex Trost

No. Windows is kind of my daily driver. I thought you were going to ask about.

00:28:42 - Anthony Campolo

This is why Windows 11 breaks on your streams.

00:28:47 - Alex Trost

Yeah, Windows 11 I can't get access to because I built my own PC. Eventually I will. But yeah. And I haven't gone to—[unclear]. Yeah, I've.

00:28:59 - Anthony Campolo

I've seen some things.

00:29:01 - Alex Trost

Yeah, it's tough when people build for one platform and don't have access to the second. There's so much stuff that looks funky on Windows because the scroll bars show up when you don't expect it and they don't on Mac, and it's just weird quirks of not just the browser but of the actual platform.

00:29:30 - Anthony Campolo

This is going here. If we check out, we've defined a single query and the query just returns a single thing. Right now we're running a query for the results and then we're asking for the type and then we get back the blog post type. This lets us know a couple things. It lets us know that we've correctly connected to our endpoint. And the way we did that is we have this zenhorse CDN Prismic.io whole API thing and then we got the rest of this here. This is why I like having that ref in there, because I could have figured out how to get this endpoint somehow, I'm sure. But it would have taken a little bit more reading of the docs. Whereas with the visual API thing you just find the thing because the ref thing is where you have to figure this out.

00:30:24 - Alex Trost

The ref thing might bite us. The ref ties in specifically to this release—like a git hash. If we publish something again, that ref is going to change.

00:30:44 - Anthony Campolo

Okay, that is good to know, because right now this is just the bare bones proof of concept of how to link these up. But I imagine there will be some things like that we'll have to think about. So that'll be for the next stream. But right now I just wanted to show the base case of how to do this. Right now we're not getting anything useful because we're actually getting the blog post. So we have to figure out how to do that. This is where we have these setters. When I was messaging with you yesterday, this took me a little while to figure out—this is not something you could have helped me with because this is entirely a StepZen-ism. This is pretty cool, because what this lets us do is reach into this deeply nested object and grab out what we want. Within this object we have the results and then we have the data. And so we want to grab the title and the rich text. So what we do is we specify the path, and the path is going to be data.title.

00:31:49 - Anthony Campolo

And so if we didn't have this results root, it would be results.data.title. So we can nest these at kind of multiple layers. So we're going to be able to run a single query that's going to return the type and also these. But then the object itself we're getting back isn't going to be nested the way this is. So it gives you a lot of flexibility in which parts of the data you want to pull out. And this is stuff that you can do yourself with any GraphQL server—you can write your own resolvers, figure this whole thing out. This isn't magic, but it's just saved you a ton of time and gives you really nice conventions to just say, this is the exact data I want, and then create your own schema and get that all going. Once we've specified the paths, we then specify the fields. The fields are going to be title and text and they're both returning JSON objects. Any questions about what's going on here?

00:32:46 - Alex Trost

No. Are we able to type it more specifically than JSON? Because I'm just curious what we're going to get back from the rich text beyond JSON or.

00:33:00 - Anthony Campolo

Yeah, sure. So this will just give us back the JSON objects as they're currently written. But if we wanted to, we could write more specific setters to say we just want to pull out like the text of the title. So that is something that you can do as well. But right now if we just look

00:33:20 - Alex Trost

at this—I know we're going for simple. I was just interested in StepZen in general because.

00:33:25 - Anthony Campolo

Yeah, no, this is great. These are really fantastic questions. And that is definitely a thing that is possible.

00:33:32 - Alex Trost

And that was going to be another question—do we have the Explorer? Because honestly, just checking boxes in Gatsby is like my favorite way to get my data, not having to go. And yeah, so yeah, the Explorer is great.

00:33:46 - Anthony Campolo

And like you saw, I just wrote this query just by clicking buttons. So you can skip right past even needing to know how to write a GraphQL query. Like I give this to my mom and be like, open the Explorer, click the things on the left, hit the play button. And like my mom would be able to run a GraphQL query. And to me that's like the pinnacle of usability.

00:34:05 - Alex Trost

Yeah, cool.

00:34:07 - Anthony Campolo

And so now we're seeing here that we've got our rich text and we've got our title. So this is your StepZen Prismic 101. This is the most basic way you can just create a thing, go and find that thing through the REST API, look at what your object is going to give you back, and then you can write your schema and create it. So how complicated you want to get with this will just be like, what does your front end really need and what do you want to pull out and how complicated is your own data model? And then you can write your schema here. So this is one of those things where it requires a little bit of knowledge of StepZen and how the REST connector works. But this is GraphQL. Yeah, but this is why, like us as StepZen employees, we're creating these integrations for you. So this will be like the start of what's going to be a whole schema for any kind of stuff you want to create.

00:35:02 - Anthony Campolo

So if you have ideas of what you think would be an interesting thing to build out a GraphQL schema for, then I would be very curious to know that, because this is going to be a sample project that's going to grow as we build it out over the next month or two.

00:35:20 - Alex Trost

That's awesome.

00:35:23 - Anthony Campolo

Awesome. Now that we have that all figured out, I did want to just show the Prismic GraphQL API a little bit because even though you say that it's not exactly kind of what people would expect, I do think it's just a nice thing to play around with. Because the great thing about GraphQL like this is that you have these kind of pre-made endpoints for you. So we'll change that to zenhorse. I think.

00:36:01 - Alex Trost

The Prismic ref is a string representing the required content version. Basically that's the way that we make sure that your data is always up to date and also handle things like previews. The way our previews work is that we give you just a different ref and essentially JavaScript rehydrates the page, pulls in that new data and shows you that new version that doesn't match up with the master ref—that's essentially how that goes. But yeah, this will get you there.

00:36:49 - Anthony Campolo

Yeah, this will get you there for this. I had a query for this also. I think I had it in the bottom of this. Let's see. Actually I remember how I—and then you guys have some nice autocomplete here. So I just hit control space and then I can see all blog posts and then do control space again. And then in edges you have node—and this is a GraphQL-ism—and then you can actually get the title or the rich text. And then this gives us back what we would expect from any other GraphQL interface. But we notice how this is not the same data object that we're getting back from StepZen because we have the edges-and-nodes thing. When we were talking about this, I'm like, this is a ridiculous example because you already have a GraphQL API, but it is a little bit different ergonomically how you end up working with it because with StepZen you define a little more specifically what your query is going to look like. So if you look here, this is a really simple query just to get results and the exact things you want.

00:38:16 - Anthony Campolo

Whereas with the way you have your thing set up right now, it requires a little more knowledge of the graph itself and looking through the docs to figure out what is the actual query you want to write. So yeah, if you ever want to chat about GraphQL stuff, put your people in touch with our people.

00:38:33 - Alex Trost

Yeah, that'd be—yes. Let's make it happen. I'm all for it. Yeah, I think my gut's telling me that if you're just pulling in Prismic data, clearly Prismic has the tools and the capability to get you up and running and you're going to build your website, no problem. It seems that StepZen is really going to come in handy as you start to add more things—and those things you wouldn't think of at first, but they start to multiply pretty quickly. Like, oh, we want to add analytics so that we can see and surface the most popular blog posts, so as blog posts get more views we're going to query Plausible data and pull that analytics in and we're going to merge that in with the actual blog posts as you start to add things in there. We're also going to pull some data from Supabase. It seems like StepZen is going to be a nice way to combine all those things into the content mesh. I'm not sure if you have a better term for it or a different term.

00:39:54 - Anthony Campolo

So we haven't really created a term to describe this. I think most people have decided to use the term mesh, so people compare us heavily to TakeShape. TakeShape calls themselves an API mesh as well. And I think the older, more technically correct term—I think we would call StepZen a gateway—because it's a thing that basically sits in front of all of your other backends and makes the call to the back end and then relays it to the front end. So it's actually a very traditional piece of API technology in that sense. And this comes from StepZen being a company built by old school API developers who used to work at Apigee. Apigee was eventually purchased by Google Cloud and it's like one of their main API hubs. So when I would describe this to people, I say it's a managed GraphQL gateway and.

00:40:51 - Alex Trost

Got it. Yeah.

00:40:52 - Anthony Campolo

An API gateway. Yeah, cool.

00:40:55 - Alex Trost

And GraphQL. I'm not super well versed in this world, so I'm speaking from ignorance completely. But GraphQL sits in front of REST APIs pretty easily, right? It's a very common thing to have GraphQL sit in front of several REST APIs or even another GraphQL API and kind of handle all those requests. Is that kind of right? Is my mental model there correct?

00:41:25 - Anthony Campolo

Yes, it's definitely a thing. It's a thing that's possible. And this is something that people have been doing forever—what StepZen does is let you do it with way less code.

00:41:33 - Alex Trost

Right.

00:41:34 - Anthony Campolo

Because if you see how you do this traditionally, you have to basically write what are called resolvers, which is the resolver saying, when I run this query, this is what's actually going to happen with this specific data source. So that's where you would have to get all the different REST endpoints and then feed that into your graph and then write all this code to make that happen. Where StepZen gives you the @rest directive, which just lets you put the endpoint in and say, I just want this part of the data, and then do the setters, and that'll give you all of that. So that's kind of why this isn't necessarily a new capability that StepZen's giving you so much as it's giving you more velocity and a simpler mental model to work with so that you can hook into REST endpoints really quickly. And then we also have all these pre-built integrations already, so you wouldn't even have to write like a Shopify integration because we already wrote that for you.

00:42:22 - Alex Trost

Yeah, that's great. Yeah, let's definitely chat about how we can make that happen with Prismic a bit further than this.

00:42:30 - Anthony Campolo

Yeah, the Supabase thing you mentioned is spot on. That's what we did last week with Ben. We did a Slinkity project where we hooked up StepZen into the StepZen API and then did a GraphQL request from Slinkity. So we got like a full-stack Slinkity project up in like 30 minutes by doing this. So it's really cool stuff and once you kind of get it and can work with it, the stuff you can build is so cool and you do it so fast. This is why for me being into really full-stack Jamstack stuff, this is just the perfect tool for me because it's that midpoint—it's like right at the back of the front end, front of the back end type thing.

00:43:04 - Alex Trost

Yeah, that's about as far as I go. And that's where I want to kind of stop.

00:43:09 - Anthony Campolo

There be dragons beyond there.

00:43:11 - Alex Trost

Yeah, exactly. And it's just not as fun for me. Like I said, I like puns and horse jokes and creative coding, and that's kind of where it seems like I get diminishing returns once I go too far back there. So yeah, I've been wanting a StepZen thing for a while so that I can use that same model that I like with Gatsby anywhere on any kind of project. So I'm excited to get more into it.

00:43:39 - Anthony Campolo

Awesome. Yeah, that's really cool. Is there anything else you'd like to say to our viewers about Prismic or things they should check out, places they can get some resources, get some help?

00:43:48 - Alex Trost

Yeah, one thing we didn't touch on today—it's not so much like part of the API but it's more of just a way of building websites and making website creation for developers a lot faster. It's Slice Machine. We've been working on that a whole bunch and we've got some fun things in the pipeline in terms of Slice Machine challenges and just a whole lot of fun stuff. So if you want to check out Slice Machine, you can head to Prismic.io, pick up one of the starter kits there. Or slicemachine.dev is also a site that kind of showcases a bit of what Slice Machine is.

00:44:27 - Anthony Campolo

But if you Google Prismic Slice Machine, the first thing it comes up is getting started with Slice Machine Next.js and that goes to a dead link. So you might want to.

00:44:35 - Alex Trost

Thank you so much.

00:44:36 - Anthony Campolo

Someone know about that?

00:44:37 - Alex Trost

Yeah. So slicemachine.dev—let's say that one's good.

00:44:41 - Anthony Campolo

And then I see the announcing Slice Machine blog post. I'll look at that one in there.

00:44:45 - Alex Trost

But today we're actually doing a Gatsby 4 and the new React kit that I was talking about stream today on the Prismic Twitch channel, twitch.tv/prismic.

00:45:05 - Anthony Campolo

I don't think I'm subscribed to that actually.

00:45:07 - Alex Trost

Gotcha. All good. Most people aren't, so it's fine. But I'll be over there with my colleague Angelo. Angelo is the developer of the Gatsby plugin and he rewrote our React plugin. He's phenomenal, a lot of fun. I think you would enjoy him, Anthony, just in terms of like, he's just a pleasant and brilliant guy to be around. So.

00:45:31 - Anthony Campolo

Great. So you said you're going live today in two hours, right?

00:45:35 - Alex Trost

In two hours. Yeah. So if people want to see more of this, I'll be over there.

00:45:39 - Anthony Campolo

So cool. Well, thank you so much, Alex. This was a ton of fun. I just so much appreciate the work you do and the vibe you put out into the dev community. So thank you so much and yeah, excited to keep chatting more about how we can make this a better integration and make this useful for our users.

00:45:58 - Alex Trost

Awesome. Yeah. And I can't wait to have you on the Front End Horse livestream. So good.

00:46:03 - Anthony Campolo

Thanks for having me everyone. Have a good day and we'll catch you next week. See you.

00:46:08 - Alex Trost

[unclear]. Take care.