Building RedwoodJS E-commerce Apps with Shopify and StepZen

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. Says we are live. Thank you for joining us. This is Stepzen, the Stepzen Friday moment of Zen. We had some sort of saying in the Twitter, but I forget what it was. Yeah, this is the stream that Lucia and I are going to do, building out some cool redwood graphql jamstacky kind of stuff. But before we get into what we're going to be building and stuff like that, let's first introduce ourselves, 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 Searchi. 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, and I did a solo stream, but this time Lucia and I are going to do. We're going to do actually a bunch of these where one of us is going to lead the other through a project. If you've ever watched something like a Learn with Jason or those kind of streams where you have one person they. They call like a navigator and then 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. How to build it. Do a little Cody. Little Cody things, as Kim Adeline 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 think. I'm thinking steps ahead here. Cool. The first thing we're going to do is we're just going to generate a very basic redwood application. And the way we do this is with the command yarn, space, create. Yeah, sorry. Oh, you already got. Oh, yeah. Yep. Cool. Yeah. So do you have, like, the snippets saved somewhere? Oh, you're pulling them off screen. Because you have two. You have two 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 just generating a blank redwood application. So why don't I first have explained what redwood is? Because I'm actually on the RedwoodJS Core team and it's 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 that your whole project is contained in one place. That's really the idea of Redwood js. I know, Lucia, you've got poked around a little bit in Redwood, but you haven't dove into 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 boot camp world like me and 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 like mostly just ripping off. Ruby on Rails is usually Ruby on Rails reactions when they see Redwood, they're like JavaScript finally ripped off a bunch of Ruby stuff. So. But I really like it because the way I think about it is it's bringing conventions to, to React because React has always been heavier on the build it yourself, take little pieces, build them up together. They're kind of like small component 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 like 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 like 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 Echo Bind 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. Stepson. 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 Rwdev. Before you run that, what's happening here is we have RW 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 webpack Server along with back end API as well. So right now we're just looking at the front end to see how we're on localhost8910. 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 localhost8910, 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. We show the magic. This is a graphical playground and it's a really nice way to work with a graphical 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 we want to just open up our Redwood project and our VS code and we're going to keep our development server running on our terminal and we're going to open up another terminal in VS code that's just going to keep on doing its thing and then go ahead, then what we want to do is we want to have another terminal because we have a lot of Redwood commands that make it really nice in terms of generating pieces of your, 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 of 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, it can be a little overwhelming like 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 is like a Create React app. It has a public and a source folder. And then we have components, layouts, pages, all that stuff. Then in the API folder, that's where we have a 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 the most word soup you've probably ever heard, but it's essentially your entire backend is one giant function that can be deployed to the cloud. What we're going to do is we're going to use a stepson 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 of that. Makes a ton of sense to just orient people and wrap their minds around what's happening here. Let's just 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 the Yarn Redwood generate page. I'm going slightly out of order here from the. From the script. So this is the. Yeah, so Yarn Redwood generate page and then home and then forward slash and let me kind of explain what's happening here also. So again we have Yarn Redwood, which is just doing like a generate or 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 Redwood app. Then delete everything except an H1 that just says hello World or Redwood plus steps in 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 exact. Get rid of the P tags but leave the fragment and then just go ahead and change the. 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. Just go into the web browser. We have this running. There you go. Go ahead and Change that to 8, 9, 10. Now we're going back to the website and we see that this is the homepage we've created. All our homepages is just a react component displaying in H1. That should be pretty intuitive to anyone who's done any react development before. Now what we're going to do is we're going to actually build out the Stepzen schema. The Stepzen scheme is going to be how we actually connect to Shopify. We're using Shopify as our backend to query products from the Shopify back end. And the idea being that we're doing all the mapping of the config and the API keys and making sure that that's all handled and being done in a secure way.

[00:12:40.11] - Anthony Campolo We'll get more into that once you get more into the data flow. Let's go ahead and just do the create our directory structure for the steps and 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 this, that 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 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 what is happening here. You can do this. What we're doing, this step right now, we're going to build out the steps and 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 friend 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 is that we're merging some Redwood isms with how you can work with Stepson. 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 Steps in is incredible.

[00:14:32.08] - Anthony Campolo Then the next command we're going to do, this is going to create two files. One is going to be our products GraphQL file, which is going to have our product set schema. And then we're going to have an index graphQL which is something that comes with all Redwood, sorry, 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 GraphQL many different backends into a single GraphQL API. The way I always think about these kind of example applications is I'm kind of most concerned about how is this 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 like a production application or anything like that. This is meant to be like a way to think about what is the entire data flow here happening. What is like the minimum viable stack you can Build with these tools and 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 on. 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 order

[00:16:00.22] - Anthony Campolo 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 defining what we're gonna wrap.

[00:16:34.25] - Anthony Campolo It's also worth mentioning that you're not gonna have to use interfaces. And like we had just gotten to the point now where you can just kind of write. 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 supplies.

[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 back end. So if you want to talk about that and the kind of like 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. Great. In a moment. This is the endpoint that you're querying. And this result route. I haven't actually worked with the result route much. Anthony, do you want to say something about that one?

[00:17:29.21] - Anthony Campolo Yeah. So the result route. This is one of those moments where I'm like, oh, let me just go read the steps and 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 just so we're removing a level. But

[00:17:49.07] - Anthony Campolo actually I know exactly what this is. The result root is basically sometimes when you get this data back from this, you're getting 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 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 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 just make a GraphQL request to. That's. You want to make the whole. 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 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 and we also have. Let's just actually hit the send. You 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 is that you can work it up in multiple layers where you start with just. Right now we just have the API. This is just a GraphQL API that we can interface with by making GraphQL queries. We're doing that by just literally just sticking a GraphQL query in the body as a string of text and just throwing it over the wire. We also then have headers which set the authorization. We have an authorization key that comes along with your steps and API that gets deployed. And then we're also going to be able to use those keys then to connect our Redwood API to the Stepson 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 to have a front end query?

[00:20:22.29] - Anthony Campolo That might not make any sense. The thing is that you've 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 that anytime you have something in your JavaScript React front end application that's being deployed on a Netlify or Vercell. That whole thing is a whole 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 you're a big blob of JavaScript involves a bunch of keys that are connected to a bunch of 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 jamstacky 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 went through the process of trying to build out a bunch of different things with Stepzen and going like the Apollo, the GraphQL request next using the French request, all this kind of stuff. And you always ended up back at like, okay, but how do you manage your keys, though? And so at the end of the day, I realized, okay, like, Redwood solved this problem. And as far as I know, the only ones who have solved it in a way that is really a convention that's baked into the framework. You can write these kind 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. Now what we're going to do now is we're going to start there. Let's go to the. 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. Because we're not importing that Prisma client, we're importing a GraphQL request client. But basically this is when I was talking about your whole backend being smushed into one giant lambda handler function kind of thing. This is why it says at the bottom, export const Handler equals create GraphQL handler. 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, create GraphQL handler. And it's like you can have no idea what any of this, 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 going to be pretty similar to the steps in schema that we created, except it's just going to have just the product. And 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 are. They use the Prisma schema to generate the thing. That's going to be one thing. Actually, Christopher Burns has been actually talking to me about this forever. About that's all good. And GraphQL products SDL JS need to grab the code.

[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 you have 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. And then the products query returns an array. That's why you have brackets there, an array of each of those product objects. So we have a Shopify backend that we created and we spun up, which is like two products that literally just have a title. So that's why going back to this is like the most simple basic thing we can possibly build. So it's not about like give me a whole E Commerce shopping cart with like one click. It's about like, how do you actually understand this stuff? So that is. And that's the whole scheme like that. That's it. So. So that should be fairly comprehensible. The next thing we're going to do is we're going to bring in GraphQL request. This is what we are using to actually make the GraphQL request from the Redwood API to the Stepcent API.

[00:26:23.23] - Anthony Campolo Because if you think about you can make GraphQL requests from the Redwood front end to the Redwood back end. But the Redwood API doesn't have Apollo Clockwise client in it. You have to instead either make requests with something like Node Fetch or you can use the GraphQL requests library. Then this is a whole chunk of code that is essentially portable to almost any really GraphQL schema you're going to work with. Take the db JS1, rename that to client. That's what you want to do. This is where we had the Prisma, the Prisma schema or the Prisma client, which we don't need. It's also has the logger which DT just put a ton of work into. We should not just be ripping out, but demos. Let's preclose 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 we were making the GraphQL request and then 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 request like Basic HTTP request, like 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. I'll be the third piece and then that'll be the entire Redwood API. That chunk of code there is literally copy 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 you write your schema and you 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 and then products is products JS then go ahead and close the terminal again. Scroll up. What we're doing here is we're 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 that 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.

[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's 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. I just give you a lot of ways to do it, but because it's just a string that we all agree on, it ends up you can take the query, the queries, portal, 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 environment EMV example. 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, 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 as a node fetch? Do you want to do as a GraphQL request? We're just talking about this. I think in one recent meeting there's going to be a lot of different ways to make the GraphQL requests from your API. I think that 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 the GraphQL requests. 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 requests with your keys. Because you're putting your API key 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 step Key in. That's exactly it. Yeah. That's why right now, Lucia is off screen right now because she is weaving her step key in. This is something that when I streamed, I failed very, very badly at 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 variables replace.

[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 doten 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 Steps in makes this very easy for you also, because they have CLI that can just insert your keys where they need to go. There's a lot 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 localhost8911graphql 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 and.

[00:33:25.28] - Anthony Campolo Yeah, yeah, yeah.

[00:33:26.26] - Lucia Cerchie So quickly and pick it up.

[00:33:29.16] - Anthony Campolo So it's going to be. Hold on, I got. This is exactly why I had it in insomnia over here, because I knew this was going to happen. So. So there's you. Can you create your own endpoint? And so the endpoint is going to be Redwood Shopify forward slash Shopify. That was where I got confused. We got two Shopify's in here, so that's why it's confusing. So it's redwood-shopify forward slash 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 dash Shopify. Forward slash 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, but.

[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 EMV 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. That's pretty nice. It's really. It's about getting all these keys down to a much more manageable amount. Is very nice. 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, so sorry, I meant so 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. So this is what's really, really nice. Like one of many things that is very, 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. Like their schema might not make a lot of sense, but you're going to at least have it. You know, so this is. And then. Yeah, so that's like we could have just written. We could have like, look at this. Okay, we want a prox query. And then what do we want from our products? Queries. 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. Now 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. Now this is all Redwood isms. We're not changing anything or ripping out anything or doing anything crazy. Because Redwood already speaks GraphQL. So 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 product cell, product cell. And then let's take a second, just kind of look at this enclosure 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 is the third time we've seen the query. First we set this query in Postman, then we sent the query through Redwood API Graph Collider. 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 of it's going to handle whether you're getting a failure back or whether you actually got a success and you got the data.

[00:37:55.11] - Anthony Campolo It'll also know whether your data is empty and you need data and also 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 is actually created by CeeLo Fett 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 homepage.

[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 is what almost everyone usually starts with. But I'm running backwards here. We're going to import. I almost said blog post Cell because I've done this so many times in the tutorial. Okay, so we're going to import. So no, no strings or anything like that. It's just going to be. I think it's Product Cell is the name. So import Product Cell from SRC forward slash and then that'll be in strings and then src forward slash. Components products sell. In the return, you're just going to return a single self closing component that is products sell. 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 a B updated. So we go to our home page. We are done for the day.

[00:39:58.15] - Lucia Cerchie 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 steps in in general or GraphQL in general. We're always happy to answer any questions or anything that we've we've got going on. So yeah, and how, so how is that for you, Lucia? Like building this kind of like Redwood application? As someone who's like not super duper Redwood, you know in the, 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 Stepson power

[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 because like 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. With the other. And once it kind of like clicked because as I was saying earlier in the stream, how I went through this process of trying to build all this stuff without Redwood and I kind of did that on purpose is that, you know, I didn't want to just show be like all right on the right. We got me build everything redwood, you know. So I tried to build a bunch of applications that are giving different GraphQL tech and eventually found myself arriving back to 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. A UPS shipping. I believe we have a shipping sample at some point in our repo, don't we Anthony? You can import 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 steps and 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 like 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 Step Sign can help me build a hands off business for the APIs. Do everything man. That's the dream, right guys? 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, that this is like, I'd rather spend more work doing that than doing.

[00:43:17.15] - Anthony Campolo Has. Has talked about. About like the, the velocity you get from these kind of tools. Like Lucia was saying how it's like super cool seeing it like 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 kind 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, 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 Redbud 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 steps and can make building 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 the Twitter as well. Just going to drop a couple links in the chat so you guys can know where you can find us. Here is our Twitter, which is Stepzendev. And then our. The YouTube.

[00:45:14.07] - Lucia Cerchie That's what we should give.

[00:45:15.14] - Anthony Campolo YouTube steps in and then we'll also drop the homepage as well.

[00:45:22.17] - Lucia Cerchie Yeah, and if you're cur. Curious about diving into the steps, then I'm just going to drop the. The docs in there.

[00:45:33.23] - Anthony Campolo Our YouTube channel and then steps in. Yeah, we're just stepsin.com Stephen like the word step and Zen. Like the word Zen. All right. Yeah, I think that 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.