Creating a Monolithic Mesh of GraphQL APIs

Episode Description

Anthony Campolo demonstrates stitching multiple RedwoodJS GraphQL APIs together into a unified endpoint using StepZen's GraphQL directive.

Episode Summary

Anthony Campolo walks through a live coding session where he builds two separate RedwoodJS applications — one managing blog posts and another managing users — each backed by its own PostgreSQL database provisioned through Railway and deployed as Netlify serverless functions. He starts by setting up the Prisma schema for posts, running migrations, scaffolding CRUD operations, and deploying the API. He then repeats the process for a users app, highlighting how quickly these tools let you go from zero to a working cloud endpoint on free tiers. The core of the demonstration comes when he introduces StepZen's @graphql directive, which points at each deployed Redwood API endpoint and merges them into a single federated GraphQL schema. By the end, he issues a single query that returns both posts and users from their separate backends through one StepZen endpoint. The entire process takes roughly twenty minutes, underscoring how modern tooling — Redwood's generators, Railway's instant Postgres, Netlify's serverless deploys, and StepZen's schema stitching — can dramatically compress the time from idea to working API mesh.

Chapters

00:00:00 - Introduction and Project Overview

Anthony Campolo introduces himself and sets up the goal of the stream: taking multiple independent GraphQL APIs built with RedwoodJS and stitching them into a single unified GraphQL endpoint using StepZen. He describes the architecture at a high level — two Redwood apps, each connected to its own PostgreSQL database and deployed as a Netlify function (AWS Lambda under the hood), which will then be merged through StepZen's schema stitching.

He frames this as a "mad scientist experiment" that demonstrates a generalizable pattern for combining GraphQL services. The approach inverts his earlier StepZen work, where a Redwood API consumed a StepZen endpoint; now the Redwood APIs are fed into StepZen as data sources. He also previews the two example repositories — Redwood Mesh Posts and Redwood Mesh Users — and their simple Prisma schemas.

00:02:30 - Setting Up the Posts App with Railway and Prisma

Anthony begins building the first Redwood app by defining a simple Post model in the Prisma schema with fields for ID, title, body, and creation timestamp. He provisions a PostgreSQL database through Railway, calling it one of the fastest ways to spin up Postgres, and injects the database URL into the project's environment file using a Railway CLI command.

After running Prisma migrate to create the posts table, he uses Redwood's scaffold generator to produce the full CRUD interface. He creates two sample blog posts through the scaffolded UI, then verifies the GraphQL API is responding by querying the serverless handler directly. The section highlights how Redwood's generators and Railway's instant provisioning dramatically reduce boilerplate setup time.

00:05:38 - Deploying Posts to Netlify and Starting the Users App

With the posts API working locally, Anthony runs the Redwood Netlify setup command, which generates a netlify.toml configuration file with the necessary build commands and functions directory. He creates a GitHub repository, pushes the code, and links it to Netlify, emphasizing that everything he's demonstrating runs entirely on free tiers — Railway, Netlify, and StepZen — making it accessible to anyone who wants to follow along.

While the posts app builds on Netlify, he begins setting up the second Redwood project for users. The users schema mirrors the posts schema but swaps the Post model for a User model with ID and name fields. He repeats the same workflow — Railway database provisioning, Prisma migration, scaffolding, creating sample users (Bob and Alice), and verifying the API responds correctly.

00:10:02 - Deploying Users and Verifying Both Endpoints

Anthony deploys the users app to Netlify following the same process, noting that Vercel and Render are also supported as first-class Redwood deploy targets. He navigates between multiple browser tabs and terminal windows to monitor both deployments, acknowledging the inevitable juggling act of managing several services simultaneously during a live demo.

Once both Netlify sites finish building, he assigns custom domain names — Redwood Mesh Posts and Redwood Mesh Users — and tests each endpoint independently using Insomnia. The posts endpoint returns the two blog posts and the users endpoint returns Bob and Alice. He also shows how the Netlify Functions tab provides visibility into the deployed GraphQL handler, confirming that each app exposes a single "lambdalith" endpoint ready to be consumed by StepZen.

00:15:36 - Stitching Everything Together with StepZen

With both APIs live, Anthony turns to the StepZen configuration. He creates an index.graphql file that imports two sub-schemas — one for posts and one for users — each defined in its own file within a schema directory. These files declare GraphQL types and use StepZen's @graphql directive to point at the corresponding Netlify function endpoints, effectively telling StepZen where to fetch the data for each type.

He runs stepzen start, which deploys the merged schema and opens a local explorer on port 5000. He then executes a single query that returns both users and posts from both separate backends simultaneously, demonstrating the full power of the schema stitching approach. The entire build took about twenty minutes including minor hiccups, and he closes by encouraging viewers to explore StepZen's GraphQL directive and join the community on Discord, Twitch, and YouTube.

Transcript

00:00:03 - Anthony Campolo

All right.

00:00:04 - Anthony Campolo

Hello, I am Anthony Campolo. I am a Developer Advocate at StepZen, and I am here to do a stream for you all. It has been a while since I have done one of these. I have been deep in a lot of different projects, and this is the culmination of a lot of that work in terms of features that were built along the way. So it is going to be great to show off where we are now and what we can really do. I am excited because this is a weird mad scientist experiment, in some sense, where this is a theoretical way you can stitch these things together that helps you generalize how it works. But we will get to that as we go. What we are going to do is basically take a bunch of GraphQL APIs and stitch them all together into one GraphQL API. We are doing that with a Redwood API attached to a Postgres database deployed on a Netlify function, which is basically an AWS Lambda. That is going to be two separate Redwood apps that will then be connected together and queried with a single query.

00:01:12 - Anthony Campolo

So this will make a lot more sense when we actually see the code and all that. But that is the high-level explanation.

00:01:18 - Anthony Campolo

That is what is going on here. I will go ahead and share my screen. Cool.

00:01:33 - Anthony Campolo

These are the two examples that we have now: Redwood Mesh Posts and Redwood Mesh Users. We are going to start with posts, and this is going to be our schema. It is very simple. It is what you would get from the Redwood blog tutorial: just a post model with an ID, title, body, and createdAt. Then we are connecting it to a Postgres database specifically. This could also say SQLite or MySQL.

00:02:03 - Anthony Campolo

But this is what we are going to be doing here, so let us open up our code editor.

00:02:09 - Anthony Campolo

This is a fairly unique project that we are doing because normally we do not use the Redwood front end much at all. It is mostly going to be a lot of stuff in the APIs.

00:02:20 - Anthony Campolo

So, close all these out. Great. Screen real estate to do this.

00:02:30 - Anthony Campolo

All right, so here is our Prisma schema, and that is all we have to do to set up. Now, I have made certain opinionated choices here in terms of how we are doing this, but there are many ways you could do it in terms of what database you want to use, how you want to spin it up, and all that stuff. I am going to be using Railway, which is a really fast way of getting

00:02:53 - Anthony Campolo

a Postgres database spun up. We will do that.

00:02:59 - Anthony Campolo

Then we are going to initialize the project. You do add, and then you can do these add-ons. So we are going to do Postgres, and this is a simple little command that is going to take the database URL. railway variables get grabs that and injects it into our env file.

00:03:24 - Anthony Campolo

This is then injected through the Prisma schema.

00:03:33 - Anthony Campolo

Once you have that going, this is going to be Prisma migrate, and it is going to create a posts table for us. That gives us our whole database setup so that we can scaffold posts. This is where we get a lot of the power of Redwood in terms of the generators and whatnot. It is going to have inputs for creating blog posts. So this is a very simple example, but it is really good because it is fairly canonical.

00:04:08 - Anthony Campolo

All right, so that should be everything.

00:04:10 - Anthony Campolo

So now we're going to get our dev server going here and we'll test the API. Actually, let's do this first. So here we're going to create a post.

00:04:23 - Anthony Campolo

This is a blog post. There is our first blog post, and then another blog post.

00:04:39 - Anthony Campolo

Now that we have that, we can query it from our GraphQL serverless handler. This is where we are going to end up with two of these things that are each going to be their own endpoint. You can do a query to check the version of Redwood to make sure the API is up and giving responses back. Then you can do a posts query, which returns the two blog posts we just created. Once you have that all going, you can deploy it very simply with setup netlify deploy. Mostly what this does is create a netlify.toml for you right over here. This gives it the build commands and all that, and gives

00:05:38 - Anthony Campolo

you a functions folder.

00:05:42 - Anthony Campolo

Now we are going to create a git repo, and this is going to be

00:05:46 - Anthony Campolo

Redwood Mesh Posts, and we create that repository. Now we are going to initialize, stage, commit, add remote, and push main.

00:06:14 - Anthony Campolo

Now we can get this deployed on Netlify. What is really cool about all the stuff I am showing you right now, Railway and Netlify and all this stuff, is that everything I am showing is on the free tier. Some people are uncomfortable building on these Silicon Valley, super highly funded startup kinds of things, and that is reasonable, but there is no downside if you are doing it for free to prototype. That is what I really enjoy. Anyone who can watch this can build

00:06:45 - Anthony Campolo

this exact same thing, which is pretty cool. We are going to do Redwood Mesh Posts,

00:06:53 - Anthony Campolo

and then the only tricky part is you have to inject that database environment variable here.

00:07:02 - Anthony Campolo

There is a way you can do this where it does not really show exactly what you are doing with that database URL. Then you want to stick connection_limit=1 at the end.

00:07:22 - Anthony Campolo

That is going to be going for a while. While that is doing its thing, we are going to get this other project going. Now we are going to have an almost identical schema, except it is going to have

00:07:33 - Anthony Campolo

a user instead of post.

00:07:40 - Anthony Campolo

Open

00:07:41 - Anthony Campolo

this up over here.

00:07:45 - Anthony Campolo

Now we are going to do the exact

00:07:49 - Anthony Campolo

same thing we just did, except a little bit differently.

00:07:54 - Anthony Campolo

Again, we are going to initialize the Railway project

00:07:58 - Anthony Campolo

and then we are going to give it

00:08:01 - Anthony Campolo

an add-on with postgres.

00:08:09 - Anthony Campolo

And then get that environment variable set.

00:08:19 - Anthony Campolo

I think this is probably the fastest

00:08:21 - Anthony Campolo

way I know to spin up a Postgres

00:08:24 - Anthony Campolo

database, but there's a lot that are basically just as fast. It is a good time to be

00:08:33 - Anthony Campolo

doing postgres, let me tell you.

00:08:36 - Anthony Campolo

Now that is going to be our

00:08:38 - Anthony Campolo

users table instead of posts table, and

00:08:43 - Anthony Campolo

we are going to scaffold again, same scaffold except now it is going to be user

00:08:49 - Anthony Campolo

instead of posts, and then as you

00:08:51 - Anthony Campolo

can see it's going to be the same deployment as well.

00:08:57 - Anthony Campolo

Now we're going to check that out over here.

00:09:06 - Anthony Campolo

Last thing, dev server on. We are going

00:09:11 - Anthony Campolo

to go to posts, now users. And now we're going to create a user.

00:09:32 - Anthony Campolo

Now we got our users in there and let's check our API.

00:09:44 - Anthony Campolo

Query for this one as well.

00:09:48 - Anthony Campolo

Now we are asking for users and the ID and name back. So very similar thing. And we are also going to get it

00:09:56 - Anthony Campolo

set up for Netlify deploy like so.

00:10:02 - Anthony Campolo

If you wanted to do this with Vercel, you would replace Netlify with Vercel, and Render is the other main deploy target that has this really nice first-class integration. But there is a lot you can hack to get working as well, if you are determined enough and find that interesting. If you want

00:10:21 - Anthony Campolo

to kind of stick with what's just

00:10:22 - Anthony Campolo

going to work out of the box, those three are the ones to go with.

00:10:34 - Anthony Campolo

And push main.

00:10:38 - Anthony Campolo

Okay, so that should be that.

00:10:40 - Anthony Campolo

That was posts and then users. I did not create the repo first. That is right. Okay, try that again. Cool. Now I am going to get Netlify back up again. This is the point of the stream where I have entirely too many windows open. Okay, excellent.

00:11:29 - Anthony Campolo

Redwood Mesh.

00:11:31 - Anthony Campolo

And this will be users.

00:11:34 - Anthony Campolo

And we are going to do the same

00:11:35 - Anthony Campolo

dance again here with the database URL.

00:11:56 - Anthony Campolo

Cool.

00:11:57 - Anthony Campolo

Now that we have spent a lot of time doing that, we should have another one going somewhere around here.

00:12:13 - Anthony Campolo

So let's go back to that first site we deployed.

00:12:34 - Anthony Campolo

I am going to do that and close some of these things out real quick. Okay, let us see if these are going yet. All right, cool. So not yet. Let us see what is going on. It may have still been going before. This is the users one. Where is the other one? Okay, let us see what happens. Also, a nice thing about these Railway projects you spin up is you can tear them down very easily, and these keys are basically disposable. Okay, now we are going to get this open. I am not going to lose it this time. Over here, this was the users app, which is still building. Then the same thing over there. You get a lot of logs from doing this, let me tell you.

00:14:37 - Anthony Campolo

What we are going

00:14:37 - Anthony Campolo

to see, actually, is this right here:

00:14:44 - Anthony Campolo

We have a Netlify function set up for our GraphQL endpoint, Redwood Mesh Posts.

00:14:52 - Anthony Campolo

This is the test one spun up before. And then over here, users. Yep, there's that one. Because I have to rename the domains first. Cool.

00:15:21 - Anthony Campolo

Okay.

00:15:25 - Anthony Campolo

Yeah.

00:15:26 - Anthony Campolo

This is always the part where it is

00:15:27 - Anthony Campolo

like, all right, time to wait for your thing to build. So while that is going, and both those things are going, let us build out the StepZen part.

00:15:36 - Anthony Campolo

Okay, so now what we are going to do is create a single schema that is going to merge all

00:15:44 - Anthony Campolo

of this stuff together.

00:15:47 - Anthony Campolo

It starts off with this index.graphql file, and it is just going to bring in two schemas, one for posts and one for users.

00:16:01 - Anthony Campolo

So that's going to go right there.

00:16:06 - Anthony Campolo

We then have a schema directory that holds however many schemas you want. Now this is the actual GraphQL

00:16:16 - Anthony Campolo

directive part that you supposedly came here for.

00:16:19 - Anthony Campolo

Okay, now what is happening here is we are declaring a post type, much like we have been dealing with all along, with ID, title, body, and createdAt. Then we have a type query that has a posts query, and @graphql is the GraphQL directive taking in the endpoint. That endpoint is this big Netlify function URL that we are deploying. Once you deploy the root API, because it is a single lambdalith, it is only one endpoint you have to put into StepZen. When I did my first Redwood StepZen integrations, it was reversed: the Redwood API was doing a GraphQL query to a StepZen API. Now this is inverted, where the Redwood APIs are fed into a larger StepZen API mesh, which I think is pretty cool. Now that we have that, let us get the users one created. This is going to be exactly the same deal with the function, except it is users.

00:17:31 - Anthony Campolo

And then let us first see where these are at. Cool. Okay, so over here, let us give ourselves

00:17:45 - Anthony Campolo

a nice domain name.

00:17:48 - Anthony Campolo

And let me make sure I know which one this is. This is users. So it's going to be called Redwood Mesh Users. Yep. Okay, sweet, sweet. All right, that should — we'll check another one over here. This is posts, still going. Okay, I think this will hopefully work. Awesome.

00:18:22 - Anthony Campolo

So now we are getting the users API that we just deployed, and that is our Redwood version.

00:18:28 - Anthony Campolo

And then here we can get the users, Bob and Alice, that we just created over there. And now this, taking its sweet time,

00:18:40 - Anthony Campolo

I am going to go ahead and name this

00:18:43 - Anthony Campolo

one Redwood Mesh Posts. All right, cool, cool.

00:18:56 - Anthony Campolo

One way to see what your functions are and how they work is to go to your functions tab here. You can see this is that one GraphQL function we deployed, and you can get some information about it. It will not open the graphical editor once you deploy, so that is why I am using Insomnia to send a query instead of opening up the Redwood backend graphical tool you have in development.

00:19:28 - Anthony Campolo

And let's see, that looks like that one's going. So let's test it over here. All right, and then this will be posts right there.

00:19:44 - Anthony Campolo

All right, now we got both of those. We can also check. All right, so now we have

00:19:53 - Anthony Campolo

those going, let's get the StepZen going.

00:19:58 - Anthony Campolo

We already have our schemas created and everything. All we have to do is run handy-dandy stepzen start, and it will

00:20:04 - Anthony Campolo

ask us to name our endpoint, and we will name it StepZen GraphQL Mesh.

00:20:12 - Anthony Campolo

This is going to both deploy it and open it

00:20:17 - Anthony Campolo

on localhost:5000 here. This is going to be my

00:20:23 - Anthony Campolo

awesome query that will give us both the users

00:20:27 - Anthony Campolo

and the posts from both of them together, like so.

00:20:33 - Anthony Campolo

And we can also see that here in Insomnia. We are doing this now with our API key in the headers, so you have to use that to

00:20:45 - Anthony Campolo

access the StepZen mesh.

00:20:47 - Anthony Campolo

That is the whole thing in terms of how it works end to end, from generating everything from scratch, spinning it up, getting it in the cloud, and getting it through the pipeline.

00:20:58 - Anthony Campolo

It took about 20 minutes, which was

00:21:01 - Anthony Campolo

also with a little bit of user error. It could have been done probably in 15. But yeah, that is a lot of the value of this stuff. Once you get the workflow going, it is so fast to get these things out, test them, and give other people endpoints they can test. Really cool. I am a big fan.

00:21:18 - Anthony Campolo

Let us see where my StreamYard ended up over here. Cool. And stop screen sharing.

00:21:29 - Anthony Campolo

And awesome. So check us out on stepzen.com and we'll have more content coming out around the GraphQL directive and other stuff that we're working on. There's a lot of things in the pipeline right now that are really exciting. Check us out at stepzen.com and we have the Twitch as well as the YouTube and we have a Discord as well. So we'd love to see you there and help you with whatever you're building. All right, thanks a lot, everyone.