Building RedwoodJS E-commerce Apps with Shopify and StepZen
Anthony Campolo and Lucia Cerchie pair-program a full-stack app using RedwoodJS, StepZen, and Shopify to demonstrate querying products via GraphQL.
Episode Description
Anthony Campolo and Lucia Cerchie pair-program a full-stack app using RedwoodJS, StepZen, and Shopify to demonstrate querying products via GraphQL.
Episode Summary
In this StepZen Friday livestream, Anthony Campolo and Lucia Cerchie walk through building a full-stack application that connects a RedwoodJS front end to a Shopify backend using StepZen as a GraphQL intermediary. Anthony, a RedwoodJS core team member, explains Redwood's role as a meta-framework that brings conventions to React development, including built-in GraphQL support and serverless function deployment. The pair scaffolds a new Redwood app, creates a StepZen schema to connect to Shopify's product data, and then wires up the Redwood API layer to securely query the StepZen endpoint using environment variables and the GraphQL Request library. A key theme throughout is the importance of not exposing API keys on the client side, which Redwood solves through its serverless API layer. They finish by importing a Redwood "cell" component that declaratively handles data fetching, loading, and error states on the front end, ultimately displaying Shopify product data in the browser. The session closes with a discussion of StepZen's ability to combine multiple data sources into a single GraphQL API and a preview of next week's session on MySQL integration.
Chapters
00:00:00 - Introductions and RedwoodJS Overview
Anthony and Lucia introduce themselves and the format of the stream, explaining they'll use a pair-programming approach where Anthony navigates and Lucia drives. They begin generating a new RedwoodJS application using the command line and discuss what RedwoodJS is — an open-source full-stack JavaScript framework for React and GraphQL that brings Ruby on Rails-style conventions to the JavaScript ecosystem.
Anthony explains how Redwood differs from React alone by providing structure for both front-end and back-end development in a single project. He contrasts it with other meta-frameworks like BlitzJS and Bison, noting that Redwood is unique in offering a fully integrated backend. Lucia shares her impression of how quickly a full-stack app can be scaffolded, and Anthony highlights how Redwood brings much-needed conventions to the React world.
00:05:54 - Exploring the Redwood Project Structure
The pair starts the development server and explores the default Redwood splash page on localhost, then examines the GraphQL playground available on port 8911. Anthony walks through the project's folder structure, highlighting the separation between the Web folder (a React front end) and the API folder (which contains the GraphQL handler and database layer). They delete the default Prisma database folder to demonstrate that Redwood isn't tightly coupled to any ORM.
Anthony explains the API's core architecture: a single GraphQL handler that combines schemas and resolvers into one serverless function deployable to AWS Lambda. They generate a basic home page using Redwood's CLI generators and strip it down to a simple H1 element, confirming the hot-reloading development server reflects changes instantly in the browser.
00:12:40 - Building the StepZen Schema for Shopify
Lucia and Anthony create the StepZen directory structure within the Redwood project and build out two GraphQL schema files — an index file that references which schemas to pull in, and a products file that defines the product type and its REST connector to Shopify. They discuss the role of the config file for storing API keys and the result root parameter for unwrapping nested data responses.
Anthony emphasizes that the StepZen API is completely decoupled from Redwood and could be connected to any front end. They test the deployed StepZen API using Postman, sending a GraphQL query and receiving dummy product data back from Shopify. This demonstrates that StepZen provides a standalone GraphQL layer that can be queried independently before being integrated into a larger application stack.
00:19:02 - Connecting the Redwood API to StepZen
The discussion turns to why a server-side API layer is necessary rather than querying StepZen directly from the browser. Anthony explains the principle of "don't trust the client" — any API keys embedded in front-end JavaScript are visible to users, making a serverless backend essential for security. They modify the Redwood GraphQL handler, replace the Prisma client with a GraphQL Request client, and set up the schema definition and services files.
Anthony walks through the client configuration, which sets the StepZen endpoint and authorization headers using environment variables. Lucia creates a sample .env file to demonstrate the required variables without exposing real keys. They discuss how Redwood's built-in serverless architecture elegantly solves the key management problem that developers typically handle with custom Lambda functions.
00:30:13 - Environment Variables and Testing the Connection
The pair works through configuring the environment variables to connect the Redwood API to the StepZen endpoint, troubleshooting the correct endpoint path along the way. Anthony notes that managing just two API keys is far simpler than the dozens that more complex projects often require, and that StepZen's CLI tooling helps streamline key management further.
After setting the correct endpoint and restarting the server, they successfully query the Redwood API's GraphQL playground and see Shopify product data returned. Anthony highlights the built-in documentation explorer in the GraphQL playground, showing how any GraphQL API provides self-documenting schema information that developers can use to build queries without external documentation.
00:36:39 - Building the Front-End Cell and Wrapping Up
They generate a Redwood cell component, which is a declarative data-fetching pattern that handles loading, empty, failure, and success states automatically using Apollo Client under the hood. The cell contains the same products query they've been using throughout, now sent from the front end to the Redwood API. They import the cell into the homepage component and confirm that product data from Shopify renders in the browser.
The stream wraps up with reflections on the developer experience, a viewer question about pulling from multiple data sources, and a preview of next week's session on MySQL with StepZen. Anthony discusses how developer productivity tools like StepZen and Redwood have broader economic implications by enabling faster development cycles, and both hosts share links to the StepZen YouTube channel, Twitter, and documentation.
Transcript
[00:00:02.00] - Anthony Campolo All right. It says we are live. Thank you for joining us. This is StepZen, the StepZen Friday, or Friday Moment of Zen. We had some sort of saying on Twitter, but I forget what it was. This is the stream that Lucia and I are going to do, building out some cool Redwood GraphQL JAMstack-y kind of stuff. But before we get into what we're going to be building and stuff like that, let's first introduce ourselves and say who we are, so if anyone watching out there can get a feel for who we are and how we got involved in StepZen.
[00:00:37.21] - Lucia Cerchie Yeah. So I'm Lucia Cerchie. I'm a software engineer at StepZen, and I've gotten involved very recently, and I'm super excited to be exploring the JAMstack applications of it, especially with live streams like these.
[00:00:52.16] - Anthony Campolo Totally. Yeah. And I am Anthony Campolo. I did one of these a couple weeks ago, and I'm really excited to get back in it. I did a solo stream, but this time Lucia and I are going to do a bunch of these where one of us is going to lead the other through a project. If you've ever watched something like Learn With Jason, or those kinds of streams where you have one person they call the navigator and then the driver, right?
[00:01:21.26] - Lucia Cerchie Yeah. Pair programming definition.
[00:01:26.03] - Anthony Campolo
Yeah. So Lucia will be driving and I'll be navigating for this, because I'll be navigating the app that I built and I'll be walking her through how to build it. So yeah, do a little codey, little codey things, as Kim [unclear] says. Cool. So to get us started, you can go ahead and also minimize your screen that's got StreamYard in the background. You're going to want to grab that Git tab that was in it, though, at some point. Just thinking steps ahead here. Cool. The first thing we're going to do is generate a very basic Redwood application. And the way we do this is with the command yarn create. Yeah, sorry. Oh, you already got it. Oh, yeah. Yep. Cool. Yeah. So do you have, like, the snippets saved somewhere? Oh, you're pulling them off screen because you have another screen, right?
[00:02:24.23] - Lucia Cerchie Yeah. This is just from an old copy paste.
[00:02:29.02] - Anthony Campolo So what's going to happen here is that we're going to be generating a blank Redwood application. So why don't I first explain what Redwood is? Because I'm actually on the RedwoodJS core team, and it's an open source JavaScript framework for React and GraphQL, and it's about building full-stack applications especially. So full stack meaning that you have your front-end view and your database layer and some kind of intermediary that lets the two of them talk to each other, and your whole project is contained in one place. That's really the idea of RedwoodJS. I know, Lucia, you've poked around a little bit in Redwood, but you haven't dove into it a ton. So I'll be curious, what's your current take on Redwood?
[00:03:12.29] - Lucia Cerchie Yeah, it's amazing to me how quickly you can build a full-stack application with it. We are done right now in 30 seconds. It reminds me a bit of other front-end application generators, except that you've got your back end all spun up for you.
[00:03:31.28] - Anthony Campolo Totally. Yeah. And you're someone who came through the kind of bootcamp world like me, so neither of us really got the experience of ever learning Ruby on Rails. But if you learned Ruby on Rails, you look at Redwood and you're like, this is mostly just ripping off Ruby on Rails. Usually Ruby on Rails reactions when they see Redwood are like, JavaScript finally ripped off a bunch of Ruby stuff. But I really like it because the way I think about it is it's bringing conventions to React, because React has always been heavier on the build-it-yourself, take-little-pieces, build-them-up-together approach. They're kind of like small components building up to larger ideas. So it makes sense, and that's great for React, and that's why React has been so successful, because it owned that space by itself. But people try and treat it like it's a whole application-building framework, and it's not. So I think it's natural to see these, what we call meta-frameworks, get built up that are building abstractions on top of React and bringing in other libraries and integrating them for you in a way that's really nice and easy to work with.
[00:04:37.29] - Anthony Campolo So that's kind of like that high level elevator pitch of what RedwoodJS is, right?
[00:04:43.17] - Lucia Cerchie Yeah, there's a total flurry of those meta frameworks, but Redwood's the only one I've seen so far that does backend.
[00:04:50.25] - Anthony Campolo
Yeah, BlitzJS is another big one. They've been around for close to like a year now, along with Redwood. Technically Redwood's been around for two to three years, but didn't really go public till like a year ago. So there's lots of weird, confusing histories of all these things. But yeah, I would say for someone who's looking for a full-stack React framework, you want to look at Redwood and you want to look at Blitz. I'm also a really big fan of this project called Bison, which is a little bit lesser known, but it's done by the Echobind team and it's really cool. I can talk about this all day. Let's get into building this application. What we're going to do now is we're just going to cd into the project that we created. Let's go ahead and bump your font up just one. I think that would be good. Yeah, we won't spend too much time in here anyway. Yeah. So, yeah, go ahead and find what you named your project directory. stepzen-redwood-shopify. Yeah. So we're just going to enter our directory and then, to start our development server, we're going to use Yarn.
[00:05:54.12] - Anthony Campolo
rw dev. Before you run that, what's happening here is we have rw, which is just short for Redwood, and Yarn is kind of like npm, or actually it's kind of more like npx technically, but it's just a tool that lets you work with your project on the command line. And this is kicking off a Webpack server along with a back-end API as well. So right now we're just looking at the front end to see how we're on localhost:8910. You want to make your font way bigger for your browser. Okay. Yeah, I guess we can't make the URL and the stuff up. That's fine. Okay, so yes, there must be a
[00:06:38.13] - Lucia Cerchie trick, but I haven't figured it out yet.
[00:06:40.20] - Anthony Campolo
Yeah, that's good, though. So if we go to localhost:8910, you get this. This is your Hello World Redwood splash page. But if you go to 8911, go ahead and go there. You see here the following serverless functions are available. If you click GraphQL, you see you have this whole playground here, so don't run the query yet. We got to build this first before we show the magic. This is a GraphQL playground, and it's a really nice way to work with a GraphQL API. We'll build up how we actually get to this layer in the Redwood app in a second. Right now what we want to do is just open up our Redwood project in VS Code, and we're going to keep our development server running on our terminal. We're going to open up another terminal in VS Code that's just going to keep on doing its thing. Then what we want to do is have another terminal, because we have a lot of Redwood commands that make it really nice in terms of generating pieces of your application. And that's what you get from that.
[00:07:49.07] - Anthony Campolo
Your terminal is also super duper small there, but go ahead and increase your VS Code font a ton. Yeah, that's pretty good. Cool. And go ahead and just close out some of those extra things and close that welcome screen also. Let's just wrap our minds around what's happening here before we start clicking down these rabbit holes, because the Redwood project can be a little overwhelming the first time you go into it. Really don't worry about any of these things except for web and api. Click Open Web and click Open API. If we just look at this, what is happening is our web side is like a Create React App. It has a public and a src folder. And then we have components, layouts, pages, all that stuff. Then in the API folder, that's where we have db, which if you open that, that's got a schema.prisma, which we're not going to use at all. We're actually just going to go ahead and delete that. Go ahead and delete the db folder. Literally, you can just delete it and the project doesn't care at all. Some people think of frameworks with ORMs as being these tightly coupled monolithic things.
[00:09:05.02] - Anthony Campolo
That's actually not the case. You just delete Prisma by doing that. Then in the src folder, click that open. This is where we're going to have the Redwood API. This is actually the really key piece of all this stuff and how it all fits into StepZen. Why all this stuff is super interesting and super cool is because this is a giant GraphQL handler that smushes together your schema and your resolvers into one single thing that can be deployed to an AWS Lambda. If you don't know anything about AWS Lambda or GraphQL, that was probably the most word soup you've ever heard, but essentially your entire backend is one giant function that can be deployed to the cloud. What we're going to do is use a StepZen GraphQL API to query from the Redwood API and then query from the Redwood front end to the Redwood API. We'll walk through this whole flow. Don't worry too much if none of that makes a ton of sense. Just to orient people and wrap their minds around what's happening here, let's generate our basic home page in our web folder. Click open a terminal, just like in VS Code.
[00:10:18.23] - Lucia Cerchie I always use my terminal outside of it for demos.
[00:10:23.07] - Anthony Campolo
I find this is really the way to go. Yeah, Command J. There we go. Cool. What we're going to do here is yarn redwood generate page. I'm going slightly out of order here from the script. So this is yarn redwood generate page, and then home, and then /, and let me kind of explain what's happening here also. So again we have yarn redwood, which is just doing a CLI command. And that command specifically is generate. And that command is going to generate a page, and that page is going to be called home. Let's go ahead and go to our web folder, pages, and then HomePage. You're already finding your way around the Redwood app. Then delete everything except an h1 that just says Hello World or Redwood plus StepZen or something like that.
[00:11:17.21] - Lucia Cerchie That's leaving in.
[00:11:19.16] - Anthony Campolo
Yeah, just get rid of the p tags, but leave the fragment. Then go ahead and change that. And you can pull out your imports also. We're not going to have any extra pages, so we don't need the router or anything like that. Go ahead and save that, and then just open back up your browser and we'll see that this has automatically updated and replaced it. Just go into the web browser. We have this running. There you go. Go ahead and change that to 8910. Now we're going back to the website and we see that this is the homepage we've created. All our homepage is is just a React component displaying an h1. That should be pretty intuitive to anyone who's done any React development before. Now what we're going to do is actually build out the StepZen schema. The StepZen schema is going to be how we actually connect to Shopify. We're using Shopify as our backend to query products from the Shopify backend. And the idea is that we're doing all the mapping of the config and the API keys and making sure that that's all handled and done in a secure way.
[00:12:40.11] - Anthony Campolo We'll get more into that once we get more into the data flow. Let's go ahead and create our directory structure for the StepZen API over here.
[00:12:52.06] - Lucia Cerchie This is a sample that you can follow along if you want to do what we're doing today. I'm sure one of us can drop the URL in the chat in a minute.
[00:13:01.06] - Anthony Campolo Yeah, I got it. Yeah. I should point out too that the picture you saw at the top, which I felt pretty proud about, is going to be changed very soon because it's off-brand, so this is your only chance to see it.
[00:13:14.01] - Lucia Cerchie Right. So I'm grabbing.
[00:13:16.04] - Anthony Campolo
Yeah. What this is going to do is it's going to create a directory called stepzen and create a directory inside stepzen called schema. This is going to contain our GraphQL schema that's going to be talking to Shopify.
[00:13:31.20] - Lucia Cerchie I'm going to do that in here.
[00:13:40.11] - Anthony Campolo Cool. What I'm doing here, this is worth just pointing out, is what is happening here. You can do this. What we're doing in this step right now is building out the StepZen API. This is all totally decoupled from Redwood, and you can just do this part by itself and have a schema and then connect it to any front end you want. What we're doing here is I'm actually building this into the project structure of a Redwood app, because Redwood has very specific conventions about where something like an API would even go, whereas most frameworks don't. That's what's happening here: we're merging some Redwood-isms with how you can work with StepZen. That's why we're creating these folders here. And there's no Redwood generate command for this.
[00:14:27.05] - Lucia Cerchie The flexibility of StepZen is incredible.
[00:14:32.08] - Anthony Campolo
Then the next command we're going to do is going to create two files. One is going to be our products.graphql file, which is going to have our product schema. And then we're going to have an index.graphql, which is something that comes with all StepZen projects. Because the whole point of StepZen is that not only can you query a backend through GraphQL really easily, you can also combine many different backends into a single GraphQL API. The way I always think about these kinds of example applications is that I'm most concerned about how this is going to make sense to all of you out there watching this. This is going to be really, really simple. The schema we're going to create here is literally the most basic schema I could possibly write, with a single object and a query returning a list of those objects. So this is not meant to be a production application or anything like that. This is meant to be a way to think about what the entire data flow here is and what the minimum viable stack you can build with these tools looks like. Go ahead and grab those code snippets for products.
[00:15:40.10] - Lucia Cerchie
I'm going to start with index, because in this we have a schema that allows us to really - what it does is it tells the query what GraphQL files we're pulling in. If we wanted more than one, for example, we could put a comma and
[00:15:58.23] - Anthony Campolo then add another one.
[00:15:59.24] - Lucia Cerchie But today we're just going to
[00:16:00.22] - Anthony Campolo import it from
[00:16:03.05] - Lucia Cerchie
and products.
[00:16:11.00] - Anthony Campolo Yeah.
[00:16:30.16] - Lucia Cerchie Fields on this interface define what we're gonna wrap.
[00:16:34.25] - Anthony Campolo It's also worth mentioning that you're not going to have to use interfaces. We had just gotten to the point where you can kind of write a basic schema without having to do this interface stuff. But this is a project I built a couple weeks ago and haven't refactored it yet. So that's why we're looking at these
[00:16:49.20] - Lucia Cerchie interfaces here, or even the [unclear].
[00:16:54.06] - Anthony Campolo The general idea, though, is the REST connector. The REST connector is really the important thing, because that's where we're actually going to connect to the Shopify backend. So if you want to talk about that and the config file, that's a really important thing to talk about.
[00:17:09.15] - Lucia Cerchie
Yeah. So our config file allows us to connect to the backend, and that's going to have your keys in it. This references the config file, which we'll create in a moment. This is the endpoint that you're querying. And this resultroot, I haven't actually worked with resultroot much. Anthony, do you want to say something about that one?
[00:17:29.21] - Anthony Campolo
Yeah. So resultroot, this is one of those moments where I'm like, oh, let me just go read the StepZen docs out loud and see what happens.
[00:17:38.15] - Lucia Cerchie The default is just the data part of your JSON, the top level. Here I think we're specifying it just so we're removing a level. But
[00:17:49.07] - Anthony Campolo
Actually, I know exactly what this is. resultroot is basically like, sometimes when you get this data back, it's on a data object, or there's an extra layer of indirection between the data you're getting and the data you actually want to get. I'm pretty sure that's what that's for.
[00:18:05.03] - Lucia Cerchie Yeah. It peels off an extra part of the data.
[00:18:08.18] - Anthony Campolo Cool. That is the products schema. And now we have a way to basically instantly deploy these. We've already deployed the API once we first built this project. We're just going to pull up an API editor or use Postman, so you can bring up whatever it is you want to query it with. What we're doing here is we're going to make a GraphQL request to... You want to make that whole thing bigger, right?
[00:18:42.14] - Lucia Cerchie It's not responding to my usual shortcut.
[00:18:45.22] - Anthony Campolo Yeah,
[00:18:48.26] - Lucia Cerchie let's see if there is Zoom available. Yeah, I don't know how to make this bigger.
[00:18:58.20] - Anthony Campolo I want to put in a plug for Insomnia right here, then.
[00:19:02.26] - Lucia Cerchie Right.
[00:19:07.14] - Anthony Campolo Basically what's happening here is we're just going to send a GraphQL query. Let's just actually hit send so you can see they're actually making the query right now. That is sending a query which is then returning just some dummy data there. This is what's really cool about using something like StepZen: you can kind of work it up in multiple layers where you start with just the API. This is just a GraphQL API that we can interface with by making GraphQL queries, and we're doing that by literally just sticking a GraphQL query in the body as a string of text and throwing it over the wire. We also then have headers which set the authorization. We have an authorization key that comes along with your StepZen API that gets deployed. Then we're also going to be able to use those keys to connect our Redwood API to the StepZen API. Now you may be thinking, why is there an extra layer of indirection here? Why don't we just query directly from our front end? Why do we need the Redwood API to query another GraphQL API and have a front end query that?
[00:20:22.29] - Anthony Campolo That might not make any sense. The thing is, have you ever heard the expression, "Don't trust the client?"
[00:20:33.09] - Lucia Cerchie I thought you were asking that rhetorically.
[00:20:35.18] - Anthony Campolo This is important. Don't trust the client. This is a very important thing. "Don't trust the client" means don't ever have anything in code that is being shipped to a browser that you don't want someone to be able to see. Basically, anytime you have something in your JavaScript React front-end application that's being deployed on Netlify or Vercel, that whole thing is a bunch of code that is sent to your device when you go to that website. So your device takes a big blob of JavaScript. That's the website. If your big blob of JavaScript involves a bunch of keys that are connected to accounts that you don't want to be public, then that's really bad, because you're exposing a bunch of keys. That's why having the Redwood API set up for serverless function deployment is so nice, because it literally already has you set up out of the box to do what most people are doing by themselves, where they're writing their own bespoke Lambda functions to manage their keys. This is a really common thing that a lot of people are doing. It's one of the main things you do with these Lambda functions in a JAMstack kind of way.
[00:21:39.25] - Anthony Campolo
Carlos wrote a great blog post about this that I reference right here. It's really cool that this is one of those things where I kind of went through the process of trying to build out a bunch of different things with StepZen, using Apollo, graphql-request, Next, using fetch, all this kind of stuff. And you always end up back at, okay, but how do you manage your keys, though? At the end of the day I realized, okay, Redwood solved this problem. And as far as I know, they're the only ones who have solved it in a way that is really a convention baked into the framework. You can write these kinds of functions pretty dang easily with Next and Vercel, but not as easily as this, I don't think. Now that we've got this set up, let's start actually building out our Redwood backend. What we're going to do now is start there. Let's go to our API folder and src/functions/graphql.js. Yeah, yeah, cool. So at first copy the new line of code, and let me explain that before this is going to change.
[00:22:58.09] - Anthony Campolo
So we're just going to slightly modify this so the Redwood API knows what we're doing here. Because we're changing a couple things in terms of how it works, because we're not importing that Prisma client, we're importing a graphql-request client. Basically this is what I was talking about when I said your whole backend is smushed into one giant Lambda handler function kind of thing. This is why it says at the bottom, export const handler = createGraphQLHandler. This is one of the things I really like about how the Redwood people think about writing code. This is code that has been very, very opaque to me for as long as I've been doing Redwood, but at the same time I've always known that this creates a GraphQL handler because it says right there, createGraphQLHandler. You can have no idea what any of this code is doing here, but knowing that is really, really important. That just means that there is no server. There is no always-on running server. That is your application. Your whole backend is literally just a function that can be called and invoked automatically. That is how that all works.
[00:24:04.03] - Anthony Campolo
I'm actually working on making this portable and getting this deployed to Azure Functions, which is super, super interesting stuff. But now we can create our Redwood schema. We're going to create a schema that's pretty similar to the StepZen schema that we created, except it's just going to have the product. So go down a little bit. Products.sdl.js. First do the command to generate it. This is one of the things: we have generators for SDLs and for services, but the generators use the Prisma schema to generate the thing. Christopher Burns has been talking to me about that forever. Okay. Yep. Yep. So that's all good. Products.sdl.js.
[00:25:03.16] - Lucia Cerchie GraphQL. Cool. Just make sure everybody can see that that actually happened.
[00:25:13.26] - Anthony Campolo
What we got here is a product. That product has an id and it has a title, and then it has a handle, which is just a way to refer to it, I think. Then you have your query, which is products. products is the query. So you're defining a query, and that query is products. Then the products query returns an array. That's why you have brackets there: an array of each of those product objects. We have a Shopify backend that we created and spun up with two products that literally just have a title. So this is the most simple basic thing we can possibly build. It's not about, like, give me a whole e-commerce shopping cart with one click. It's about how you actually understand this stuff. That's the whole schema. That's it. So that should be fairly comprehensible. The next thing we're going to do is bring in graphql-request. This is what we are using to actually make the GraphQL request from the Redwood API to the StepZen API.
[00:26:23.23] - Anthony Campolo
Because if you think about it, you can make GraphQL requests from the Redwood front end to the Redwood back end. But the Redwood API doesn't have Apollo Client in it. You have to either make requests with something like node-fetch or you can use the graphql-request library. Then this is a whole chunk of code that is essentially portable to almost any GraphQL schema you're going to work with. Take the db.js one and rename that to client. That's what you want to do. This is where we had the Prisma client, which we don't need. It also has the logger, which DT just put a ton of work into. We should not just be ripping that out, but demos. Let's close your terminal so you can see this whole thing. This is a decent amount of code going on right here. But the high-level explanation of it, and really all you need to know, is that it's how you set the endpoint and the authorization header for when you're actually making your GraphQL request. Before, we showed how we can do that in Postman, and Postman handles how you set your headers because that's a nice graphical user interface.
[00:27:39.27] - Anthony Campolo
Let's just set the headers. This is actually, if you're just making a basic HTTP request, what's going to be the endpoint and what's going to be the headers? Then once you have that, we're going to actually put our query in our services. That'll be the third piece, and then that'll be the entire Redwood API. That chunk of code there is literally copied and pasted from my Fauna project, and it also can be copied and pasted with AppSync. You don't really write the client. We just don't have a generator command for it yet. But really, all you do is write your schema and write your services. That's it. That's the entire deal. This is going to be a GraphQL request that's going to be src/services/products/products.js. Then go ahead and close the terminal again. Scroll up. What we're doing here is bringing in the request from that client that we just created. That's what's wrapping all of our queries, so it knows what our headers are. Then we're also bringing in gql, and that's how I said you're just throwing a bunch of string over the wire.
[00:28:51.06] - Anthony Campolo That's a nice little helper thing within the GraphQL request library to help do that translation.
[00:28:57.16] - Lucia Cerchie This is what you saw in Postman?
[00:29:01.09] - Anthony Campolo
It's one of those things where you can make GraphQL requests in so many ways. You can do it just with curl, you can do it with Insomnia, you can do it with Postman, you can do it with front-end frameworks, you can do it with just regular JavaScript. There are so many different ways to do it. How you're going to turn the query into something that's going to make sense along that path gives you a lot of options, but because it's just a string that we all agree on, the query is portable. Everything around the query is what's really complicated.
[00:29:36.11] - Lucia Cerchie So much depends on a string that we all agree on.
[00:29:39.07] - Anthony Campolo
I know, right? Sweet. We can query that bad boy. Oh wait, no we can't. Environment variable. Yes. We need to take the .env.example, and we'll change that to .env. This is where you want to go off screen for a quick second. How are you doing, chat? Anyone got questions? Is anything we're saying making sense at all? Thank you all for coming out, by the way.
[00:30:13.01] - Lucia Cerchie Let's see.
[00:30:26.14] - Anthony Campolo
Yep. Yeah, so the client.js is - I mean, I wrote it, so you could say it was provided by Redwood in that sense, but we could write a command that can handle that pretty simply because all it is is just giving you a client on the back end, and it's going to be the same thing. It's like, okay, well, do you want to do node-fetch? Do you want to do graphql-request? We were just talking about this, I think, in one recent meetup meeting. There's going to be a lot of different ways to make the GraphQL requests from your API. I think this is the cleanest, simplest, most understandable way to most people. In the Redwood example repo, I actually talk a little bit about the differences between using node-fetch and using just graphql-request. Yeah, I wouldn't really say it's a custom wrapper so much as it's just using the conventions you get from using graphql-request with your keys. Because you're putting your API key in and you're setting your headers however you want to do it, but that is abstracted out because it's just environment variables.
[00:31:34.26] - Anthony Campolo You have the environment variables that are really where all the magic is happening. Then the query itself is using just whatever environment variables you insert into it. But the query itself and the client, you don't really have to do anything special with it. You could do this with Apollo Client if you wanted to. Weaving your StepZen key in, that's exactly it. Yeah. That's why right now Lucia is off screen, because she is weaving her StepZen key in. This is something that when I streamed, I failed very, very badly at, and the whole world of 10 people or however many were watching got to see all my keys.
[00:32:08.28] - Lucia Cerchie
I just made a little fake .env file that we can pull up if you want to, just with the variable values replaced.
[00:32:18.07] - Anthony Campolo Let's do that.
[00:32:22.02] - Lucia Cerchie
Figure out how to share from here one more time. There we go. There we are. This is a .env file, and in mine I've replaced these with the values that are secret, but this is how you set up your file.
[00:32:45.07] - Anthony Campolo
StepZen makes this very easy for you also, because they have a CLI that can just insert your keys where they need to go. There's a lot of really great tooling being built up around this stuff right now. If that is all good to go, let's see what happens when we run that query. We're going to go back now to localhost:8911/graphql, and that is going to let us hopefully query our backend.
[00:33:13.22] - Lucia Cerchie Let's see. Oh, I think, you know, I'll use
[00:33:18.25] - Anthony Campolo the old endpoint a bit.
[00:33:20.15] - Lucia Cerchie Yeah, I don't think I remembered the endpoint correctly. If you want to just explain that to me
[00:33:25.28] - Anthony Campolo Yeah, yeah, yeah.
[00:33:26.26] - Lucia Cerchie so quickly and I'll pick it up.
[00:33:29.16] - Anthony Campolo
So it's going to be - hold on. This is exactly why I had it in Insomnia over here, because I knew this was going to happen. So you create your own endpoint. And the endpoint is going to be redwood-shopify/shopify. That was where I got confused. We got two Shopifys in here, so that's why it's confusing. So it's redwood-shopify/shopify.
[00:33:52.19] - Lucia Cerchie Let me just replace that. I am off screen, right?
[00:33:57.13] - Anthony Campolo Yeah, very good.
[00:33:58.19] - Lucia Cerchie
redwood-shopify/shopify. Interesting. Let me copy-paste and show you the whole endpoint because I think that's what I have here.
[00:34:08.18] - Anthony Campolo So
[00:34:12.20] - Lucia Cerchie behind the scenes, Anthony and I have Slack.
[00:34:18.13] - Anthony Campolo I'd have to open Slack first.
[00:34:21.26] - Lucia Cerchie I turned off the sound, though.
[00:34:24.10] - Anthony Campolo Cool. That looks like it is all good. Okay, that should be good.
[00:34:31.28] - Lucia Cerchie All right, so what do we just
[00:34:34.18] - Anthony Campolo
go change that in your .env file, restart the server, and we should be good to go. What's happening right now is we're making sure that the Redwood API and the StepZen API are understanding each other. The way you do that is with the keys that you get from StepZen. And what's cool, though, is that what we're doing here may seem a little complicated, but if you've ever worked in this workflow with API keys and managing multiple services with different keys, you can get to dozens of keys. Right now we're managing two, and that's pretty nice. It's really about getting all these keys down to a much more manageable amount. All right, so why don't you go ahead. You're on it.
[00:35:26.25] - Lucia Cerchie Then we'll go to 11. Yay, it's there. That's our data coming back from Shopify.
[00:35:43.02] - Anthony Campolo Awesome. And actually, why don't you open up Docs on the right where you are. No, sorry, I mean, you have Docs in your graphical editor. I don't know if you know this. So over on the right where it says Docs, go to Products. So there's your product and there's your products query. This is what's really, really nice. One of many things that's very nice about GraphQL is that this is all here for you. For every GraphQL API you will ever hit, you ever have or ever will, you're going to get this info. Their schema might not make a lot of sense, but you're at least going to have it. So we could have just written, okay, we want a products query, and then what do we want from our products query? We can build up our queries just by looking at these docs. And now that we got all this going, we just have to get our Redwood cell to query the Redwood API.
[00:36:39.27] - Lucia Cerchie Close that, scroll down to that, and I'm going to run that in my VS Code.
[00:36:46.15] - Anthony Campolo
So now we are thoroughly in Redwood world. This is all Redwood-isms. We're not changing anything or ripping out anything or doing anything crazy, because Redwood already speaks GraphQL. Redwood's front end already has everything you could ever want to make GraphQL queries. And this is going to include something called a cell, which is a very specific convention that Redwood has created that makes your data fetching declarative. That's going to go into components, and then ProductsCell, ProductsCell. Then let's take a second to just kind of look at this. Go ahead and close your terminal also, because this is a bit much to parse here. So back to that query being a string we're just throwing around: you now see this query for the third time. First we set this query in Postman, then we sent the query through the Redwood API GraphQL handler, and now we're sending the query from our front end to our Redwood API. Now what's really cool, though, is that Redwood is handling the response in the sense that it's going to handle whether you're getting a failure back or whether you actually got a success and got the data.
[00:37:55.11] - Anthony Campolo It'll also know whether your data is empty and you need data, and it'll know if you are still loading data. A lot of this is because they're using Apollo Client under the hood, but we actually have a React Query provider that you can use as well, which was created by Celo [unclear], who's in the chat. That's good to go. And then once you have that, all you have to do is import that component into your home page.
[00:38:24.06] - Lucia Cerchie Make sure this is all saved.
[00:38:29.19] - Anthony Campolo
Still in web, web/src. Close up that API one. Still web, and then src, and then pages, and then HomePage. Yeah, that's why usually the pages are what almost everyone usually starts with, but I'm running backwards here. We're going to import - I almost said BlogPostCell because I've done this so many times in the tutorial. Okay, so we're going to import. No strings or anything like that. It's just going to be, I think, ProductsCell is the name. So import ProductsCell from src/components/ProductsCell. In the return, you're just going to render a single self-closing component that is ProductsCell. Leave the h1 there, actually, then just under it. You got it.
[00:39:47.11] - Lucia Cerchie Do we redeploy from here or is this picking it up?
[00:39:50.17] - Anthony Campolo Your web server is watching all the changes. This is automatically going to be updated. So we go to our home page. We are done for the day.
[00:39:58.15] - Lucia Cerchie All righty. Go into this and switch to nighttime.
[00:40:03.09] - Anthony Campolo Nailed it.
[00:40:04.08] - Lucia Cerchie There it is.
[00:40:06.29] - Anthony Campolo So there's your whole full-stack Redwood StepZen Shopify app for you. Any other questions? We can hang on for a little bit more if anyone wants to know about what we just built or they want to know about StepZen in general or GraphQL in general. We're always happy to answer any questions or anything that we've got going on. So yeah, how was that for you, Lucia, building this kind of Redwood application as someone who's not super duper Redwood in the whole zone there? So how was that?
[00:40:43.19] - Lucia Cerchie It's a rush to see everything go up so quickly. Also really cool to see StepZen's power and flexibility.
[00:40:52.28] - Anthony Campolo And how it fits in so well too is what's awesome, is that it very much can almost become part of your Redwood project in a really cool way. Because I was kind of like, I think I was brought on partly because of my connection to Redwood and this whole world. And it took me a couple of months to even figure out how you would even get them to work together. Not because it was complicated to get them to work together, but because it was complicated to even wrap my mind around the two of them and how they would relate to each other and how you could use one with the other. Once it kind of clicked, because as I was saying earlier in the stream, I went through this process of trying to build all this stuff without Redwood, and I kind of did that on purpose. I didn't want to just show up and be like, all right, I'm the Redwood guy, I'm going to build everything in Redwood. So I tried to build a bunch of applications that use different GraphQL tech, and eventually found myself arriving back at the answer of Redwood in the end.
[00:41:46.10] - Lucia Cerchie Claire's question is great. Yeah, we can definitely pull in from multiple data sources. You can pull in from any kind of API, REST API, or your own database, UPS shipping. I believe we have a shipping sample at some point in our repo, don't we, Anthony? You can import it, which makes that super fast.
[00:42:09.04] - Anthony Campolo Yeah, we actually integrated that with one of our Next.js front-end apps as well, which is also in the StepZen samples repo that we're linking to here. That's the whole idea, is that once you have this really cool - for this project at least - once you have this really cool full-stack app set up, then you can bring in any other kind of backends you want very, very easily, because all the conventions are already there for you. But if you're not in a full-stack app, you can still just be a front end that wants to do this kind of content mesh thing like Gatsby would do. It's really powerful for doing that as well.
[00:42:39.10] - Lucia Cerchie Yeah, but you're not restricted by the plugins.
[00:42:44.04] - Anthony Campolo Exactly. Yeah.
[00:42:49.20] - Lucia Cerchie Any other questions today?
[00:42:52.26] - Anthony Campolo Very interested in how StepZen can help me build a hands-off business where the APIs do everything. Man, that's the dream, right? Just build a thing that does all my things for me so I can stop doing things. That would be great.
[00:43:05.20] - Lucia Cerchie That is why there are software developers. Yeah, no, this is like - I'd rather spend more work doing that than doing the thing.
[00:43:17.15] - Anthony Campolo This is something that David has talked about, about the velocity you get from these kinds of tools. Like Lucia was saying, it's super cool seeing it get spun up super fast. And I agree, as a developer you do get a rush from it, but when you start thinking outside of your own experience as a developer, developers being able to build faster is a massive economic impactor when so much of the economy is run by tech stuff and tech businesses and that kind of thing. So if you can build better tools that make these kinds of integrations and can leverage developer hours - developer hours are very scarce - that's why we're doing our best to train as many developers as we can and get as many developers into the industry as well. But you have to meet it in the middle. You have to bring on more developers. You also have to simplify the tools for all the developers coming in as well. Super passionate about all that.
[00:44:12.13] - Lucia Cerchie Well, thanks for showing me around Redwood today, Anthony.
[00:44:15.22] - Anthony Campolo Yeah, yeah, super fun. And then do you have an idea of what you're going to teach me next week?
[00:44:19.22] - Lucia Cerchie Yeah, I was thinking I was going to show you around your own MySQL database and how StepZen can make building a GraphQL API on that super easy.
[00:44:30.16] - Anthony Campolo Yeah. As someone who has worked a lot with Postgres and a GraphQL API through Redwood, I definitely am very interested to dive into that a little more and start to figure out how we can leverage that for all the cool full-stack different projects we can be building.
[00:44:47.10] - Lucia Cerchie Right.
[00:44:48.25] - Anthony Campolo
And just let everyone know, this is going to be posted online within the next day or two on our YouTube channel. We'll be sharing it through Twitter as well. Just going to drop a couple links in the chat so you guys know where you can find us. Here is our Twitter, which is @stepzen_dev. And then our - just one sec - YouTube.
[00:45:14.07] - Lucia Cerchie That's what we should give.
[00:45:15.14] - Anthony Campolo YouTube, StepZen, and then we'll also drop the homepage as well.
[00:45:22.17] - Lucia Cerchie Yeah, and if you're curious about diving into StepZen, I'm just going to drop the docs in there.
[00:45:33.23] - Anthony Campolo
Our YouTube channel, and then StepZen. Yeah, we're just stepzen.com, step like the word step and zen like the word zen. All right. Yeah, I think that about ends it for us.
[00:45:49.25] - Lucia Cerchie All right, happy Friday, everybody.
[00:45:52.07] - Anthony Campolo Yeah, thanks for watching everyone. Have a good one.