Managing Multiple Data Sources in GraphQL

Episode Description

Anthony Campolo demos StepZen, a tool that unifies multiple REST and GraphQL APIs into a single GraphQL endpoint without writing custom resolvers.

Episode Summary

In this episode of perfect.dev, hosts Alex Patterson and Brittany Postma welcome Anthony Campolo, developer advocate at StepZen, to discuss managing multiple data sources with GraphQL. Anthony shares his unconventional path from music teacher to tech, passing through self-taught Python, a coding bootcamp, and deep involvement with the Redwood JS open source community before landing his first tech role. The conversation establishes a GraphQL primer, explaining how it differs from REST by offering a standardized query language that simplifies front-end data fetching while shifting complexity to the backend. Anthony then demonstrates StepZen's core value proposition: using custom directives like @graphql and @rest to declaratively connect multiple APIs—such as the Rick and Morty GraphQL API and the JSON Placeholder REST API—into a single deployed endpoint, eliminating the need to write resolvers manually. He walks through the CLI workflow, the config YAML for secrets management, and the newer GraphQL Studio UI that lets developers instantly scaffold and deploy schemas. The episode wraps with a look at connecting StepZen to a SvelteKit front end and a discussion of pricing, subscriptions support, and comparisons to AWS AppSync, giving listeners a practical picture of where the tool fits in a modern full-stack workflow.

Chapters

00:00:00 - Introduction and Anthony's Journey into Tech

Alex and Brittany welcome Anthony Campolo, developer advocate at StepZen and host of the FSJam podcast. Anthony describes his winding career path, starting as a music teacher who became interested in machine learning around 2016 before pivoting to web development and attending Lambda School's bootcamp. He eventually found his niche contributing to Redwood JS as a community member and content creator, which led to an invitation onto the core team.

That open source involvement caught the attention of StepZen's CEO, resulting in Anthony's first professional tech role. The hosts and Anthony bond over the common musician-to-programmer pipeline, and Anthony jokes that financial hardship is the real driver behind the career switch. The segment sets the stage for the technical discussion by establishing Anthony's deep roots in the GraphQL and full-stack JavaScript ecosystems.

00:06:32 - GraphQL 101 and How StepZen Works

Anthony gauges the hosts' GraphQL familiarity—both learned through Gatsby—and delivers a concise primer. He explains GraphQL as a query language for APIs analogous to SQL for databases, highlighting how queries and mutations standardize CRUD operations across any data source. He contrasts this with REST, where every API invents its own conventions, and explains that GraphQL shifts complexity to the backend through resolvers.

StepZen's role is then introduced: it replaces hand-written resolvers with declarative directives, acting as an API gateway that sits at the "front of the backend." Anthony compares it to AWS AppSync and clarifies that while StepZen is a backend technology deploying real endpoints, its goal is to empower front-end developers who don't want to manage server infrastructure. Brittany asks about the target audience, prompting a useful breakdown of the front-end/back-end spectrum.

00:16:19 - Live Demo: Building a StepZen API from Scratch

Anthony begins a live demo by scaffolding a new StepZen project with the CLI. He starts with the simplest case—a mock GraphQL type returning hardcoded JSON—to show the basic file structure, the index.graphql entry point, and the deploy command. He clarifies a common point of confusion: the localhost GraphiQL interface is just a query explorer, while the actual API lives at the deployed StepZen endpoint.

He then layers in a real data source by connecting to the Rick and Morty GraphQL API using the @graphql directive, showing how the schema definition mirrors the upstream API's types. Brittany highlights one of GraphQL's key advantages: requesting only the specific fields you need rather than receiving an entire REST payload. The demo illustrates how a single StepZen endpoint begins aggregating external APIs.

00:23:46 - Combining Multiple APIs and the REST Directive

Anthony demonstrates adding a REST data source—JSON Placeholder's users endpoint—alongside the existing Rick and Morty connection. He introduces the @rest directive, the config YAML for managing API keys, and StepZen's JSON-to-SDL conversion tool that automatically generates GraphQL type definitions from a REST response. Once the new file is registered in the index graph, a single query can pull data from both APIs simultaneously.

The hosts discuss how StepZen eliminates the resolver layer entirely, handling the translation from GraphQL queries to backend calls under the hood. Alex draws comparisons to AWS AppSync, and Anthony notes the differences in supported data sources—AppSync leans on DynamoDB while StepZen focuses on Postgres, MySQL, and general REST endpoints. They briefly touch on subscriptions, which StepZen does not yet support, and real-time polling alternatives.

00:32:39 - GraphQL Studio and Front-End Integration

Anthony shifts to the StepZen GraphQL Studio, a browser-based UI at graphql.stepzen.com that offers pre-built API schemas users can deploy with a single click, no CLI or account required. He walks through querying the DEV.to API from the studio, showing how Alex can pull his own articles and profile data by simply changing a username parameter.

The demo then moves to a SvelteKit example app that connects to a StepZen endpoint using a plain fetch request with an API key header. Anthony emphasizes that no special GraphQL client library is needed—just fetch, a JSON-stringified query body, and the endpoint URL. Brittany appreciates the simplicity of piping data into Svelte components, and the segment reinforces StepZen's pitch: a unified backend that any front-end framework can consume with minimal boilerplate.

00:40:30 - Pricing, Ecosystem Comparisons, and Perfect Picks

The conversation turns to StepZen's pricing—entirely free at the time of recording, with an enterprise tier for high-traffic needs and dedicated support. Anthony mentions the founding team's background at Apogee, later acquired by Google Cloud, hinting at a long-term enterprise strategy. Alex praises the product for simplifying API composition, and Brittany asks about the developer experience.

The episode closes with each participant sharing personal picks: Brittany recommends a Netlify blog post on building a database-driven Jamstack site with StepZen and the Apple TV series The Morning Show; Alex highlights Prisma as a complementary ORM tool and a rechargeable battery setup for Xbox controllers; Anthony shouts out developer Discord communities—Jamstack, Lunch Dev, and Front End Horse—and recommends rewatching Arrested Development. Anthony wraps up by inviting listeners to explore StepZen and connect with him online.

Transcript

00:00:00 - Alex Patterson

Welcome back peeps to perfect.dev, where we give you cats the freshest dose of dev snacks, now with your amazing hosts Alex Patterson and Brittany Postma. This episode is sponsored by Builder.io—visually build on your tech stack. Welcome back, Perfect Peeps, to perfect.dev. Today we're talking about managing multiple data sources in GraphQL. And as our special guest, we have Anthony Campolo. What's up, Anthony?

00:00:29 - Anthony Campolo

Thank you so much for having me. I'm actually a fan of the show, so I was very excited that you had reached out to StepZen, saying, hey, we want to talk about StepZen. I was like, oh great, I would love to talk about StepZen with y'all.

00:00:40 - Alex Patterson

That's amazing. Yeah, you're probably the first person that said, "I'm a fan of this show," so that's really exciting for us.

00:00:47 - Anthony Campolo

Yeah. For me, software podcasts are like Pokémon—I gotta catch them all. I listen to almost every single tech podcast that I think exists.

00:00:56 - Brittany Postma

I try to soak a lot of them in too.

00:00:59 - Alex Patterson

Anthony, you are a developer advocate with StepZen. Do you want to talk a little bit about your background and how you got associated with StepZen and all about StepZen itself?

00:01:10 - Anthony Campolo

Yeah, sure. My journey is multi-step, and the fairly condensed version would be: I was a music teacher that ended up getting into tech as a career-switcher, bootcamp kind of person, and got very into open source—specifically Redwood JS, which is a full-stack JavaScript framework that uses GraphQL as an integral part of it.

00:01:37 - Alex Patterson

Great community over there.

00:01:39 - Anthony Campolo

Oh, thank you. That's awesome to hear. Yeah, I totally agree, because it's really what helped me launch my career in a lot of ways. I was essentially acting as a de facto developer advocate for Redwood as they were coming up and building, and I was writing blog posts and doing podcasts and live streams and meetup talks and all that kind of stuff. They eventually invited me onto the core team, and then that's what got me noticed by Anant, who is the CEO at StepZen—he's building a GraphQL API company. He messaged me and was like, "Hey, are you interested?" And I was like, "Yeah, I am interested in a job that will pay me money. That sounds like a good thing to do." So this is actually my first tech job. Having gone through both an education background and an arts and content-creation background—doing music and also podcasts about music back in the day—I was able to leverage a lot of those skills to get into the tech education and tech communication angle, which I really enjoy. And I also host my own podcast called FSJam.

00:02:46 - Anthony Campolo

There's quite a lot of overlap between guests that have been on FSJam and on this show. That's kind of where I'm at right now. The TLDR is that StepZen is a way to work with lots of APIs all at once in a unified way.

00:03:05 - Brittany Postma

With GraphQL—that's an amazing journey though. So you started as a music teacher and didn't have any... Was tech just a fun hobby? Did you do the Redwood JS alongside teaching?

00:03:16 - Anthony Campolo

So I also did a bootcamp. As I say, this is a multi-step process. I started self-teaching myself machine learning and Python—that's what I wanted to learn originally, because this is in like 2016 when deep learning and AlphaGo and all this stuff was blowing up, which is kind of downstream from what Copilot actually is. Funny side tangent. I was very interested in that stuff—I thought it was so fascinating—so I was trying to learn it, but I was also trying to learn to code. Learning a coding language and then learning how to actually apply a programming language to a high-level scientific problem like machine learning: it's two separate things you have to learn and both are incredibly hard to learn separately. So I did that for like a year or two and just didn't really get much traction and didn't feel like I was even close to getting a job. I eventually pivoted to web development because there are a lot of virtues to just being able to throw up an HTML page, write stuff, see the changes, layer on CSS, and then start getting into JavaScript and code and all that.

00:04:18 - Anthony Campolo

So I started learning web development and React and was making a little bit more progress at that, but decided I really should just do a bootcamp—that would probably be the thing to do. So I did Lambda School, which changed its name—I think to Bloom Tech now—which has a kind of controversial income share agreement. My experience was mostly positive, but I ended up dropping out about two-thirds of the way through to do Redwood instead, because I was in a unique position to work on this open source project that had a need for my skill set. So I ended up doing the bootcamp for probably like six months after having already self-taught myself JavaScript for like six months, after already trying to learn Python for a year or two. So that was like a three-year journey by the time I started getting involved in Redwood and all that. That was great because I already knew how to use git and I at least knew the baseline of what it took to even contribute to a project.

00:05:17 - Anthony Campolo

But then getting to work with Tom Preston-Werner and Peter Pistorius—these really, really incredible, legendary devs—and just getting to listen to the conversations they were having, it was really awesome. I ended up forming a podcast around that time to bring on all these people I was meeting. Tom is like the fourth guest we had on FSJam. So that was just really cool to start to get involved in the community. And then by the time I actually got the job, it had been going on like three or four years of this long, weird, meandering path to get where I got.

00:05:51 - Brittany Postma

That makes sense.

00:05:52 - Alex Patterson

Yeah, that's really cool. It kind of makes me laugh a little bit because I feel like every aptitude test when I was younger was like, "Are you good at music? Then you can be an engineer, you can be a programmer." So your flow from music into it is like the perfect model, I think.

00:06:08 - Anthony Campolo

I actually have a blog post about this, and it's a fairly cynical take. The title is literally, "Why do so many musicians become programmers?" And my takeaway is that you become so broke that it traumatizes you and your only choice is to find the most high-paying job possible.

00:06:28 - Alex Patterson

That's hilarious.

00:06:29 - Brittany Postma

Oh, that is awesome.

00:06:32 - Alex Patterson

That's cool. So yeah, let's dive in a little bit to what you're doing at StepZen now. I'm curious how it works and what it's all about.

00:06:43 - Anthony Campolo

Sure. First question would be: what's your experience and comfort level with GraphQL as a thing?

00:06:51 - Alex Patterson

Yeah. So I would say my first experience with GraphQL was learning it when picking up Gatsby. That's probably my—I've used REST APIs for years and SOAP prior to that for years, which is awful. I just got chills thinking about SOAP. And then yeah, it was pretty much getting Gatsby data passed through. So combining a couple data sources. I know we're talking about multiple at this point, so kind of funny.

00:07:21 - Brittany Postma

For me, I started learning GraphQL with Gatsby too, but it made way more sense to me after I took Gatsby out of it. So I did an Eve Porcello workshop from Jamstack Conf last year and that got me a lot more into it. I don't know, Gatsby's GraphQL just didn't make sense to me.

00:07:42 - Anthony Campolo

It's great that people got into GraphQL through Gatsby and that Gatsby exposed people to it, but the way Gatsby uses GraphQL is kind of weird and it's baked into all the conventions of the framework. So separating what is the Gatsby stuff and what is the GraphQL stuff is very hard to do if you don't know ahead of time.

00:08:01 - Alex Patterson

That's what totally confused me, because I was learning both at the same time. I don't understand what the difference is here, with this whole data engine piece that sits on the side. So it's cool to bounce out of that. Now that I'm at Builder.io, we have a GraphQL endpoint as well, so I'm doing a little bit more, which is intriguing. I would say on a scale of 1 to 5, 5 being the most knowledgeable, I'm like a one or two.

00:08:29 - Brittany Postma

I'm like a two, two to three maybe.

00:08:34 - Anthony Campolo

Yeah, it sounds like you're both in a 2 to 3 range. I would give yourself a little more credit—that's great. I'll give a simple 101 for any listeners who don't know anything about it. GraphQL is a query language for APIs. Most people know SQL as a query language for databases—it's its own specific kind of programming language you use to query something like a Postgres database or a MySQL database. Whereas GraphQL is a more general-purpose query language in that it could be for a database, it could be for a REST API, and it could be for other GraphQL APIs. What's nice about it is that it standardizes the language such that the create, read, update, and delete methods are baked into it—you write queries and you write mutations. Queries are getting and reading data, and mutations are writing, updating, or deleting data. Once you learn GraphQL, it's something you can use in almost any situation where a GraphQL API is available to you. It's not like REST, where every REST API has its own conventions and its own way of doing pagination and linking between different objects.

00:09:50 - Anthony Campolo

There's just lots of stuff that goes into making a REST API—decisions that need to be made by the backend developers. Whereas with GraphQL, the language itself is making the decisions on how you interact with it, and then the backend people have to figure out how to map those queries to the actual backend data source. It's simpler for front-end developers and more complicated for back-end developers. And that's where StepZen comes in—it simplifies the backend translation of how you take a database or REST API or whatever and transform that into something your front-end people can query with just a simple GraphQL query.

00:10:31 - Alex Patterson

Good description. So when we start to talk about that GraphQL language piece and multiple providers, can you talk a little bit about how that works under the hood—maybe draw a picture for people?

00:10:44 - Anthony Campolo

Yeah, and this will depend on what tool you're using. A typical setup would be Apollo Server—you'd use Apollo Server and write what are called resolvers. What a resolver is, basically, is a bunch of JavaScript code you write to turn a GraphQL query into functions that run against your backend. To take a step back: a GraphQL query itself is like a JSON object with just the keys and no values. If you imagine an object with keys on one end and values on the other, take the values away and you just have the keys—you send that, that's a GraphQL query, and then you get essentially a JSON object back. So the query itself is very simple and easy, but having that be transformed into something that makes sense in the backend requires writing custom code. You can do this in JavaScript, Go, or any programming language you want. That's typically how this has been done throughout the many years that GraphQL has been around. This is the problem that StepZen is trying to solve—they're creating a declarative way to connect to your backend, so you can just give it a REST endpoint, write your types, and that's it.

00:11:58 - Anthony Campolo

You just send the queries and it works. There's a GraphQL schema definition language, and all these terms we'll get into in the demo, but you have queries and you have the schema, and normally you'd need resolvers to make it all work—but with StepZen you don't need the resolvers.

00:12:14 - Alex Patterson

Interesting. That's the big piece I was going to ask you about.

00:12:16 - Brittany Postma

Would you say it's more for front-end developers or back-end developers? Who is the target audience or customer for StepZen?

00:12:23 - Anthony Campolo

Yeah, this is actually a really interesting question because we've been rethinking this to a certain extent. We've been thinking that it's for front-end developers in the sense that it lets you not have to fuss around with a lot of backend stuff. But it is literally a backend technology—it is deploying an API for you. So people talk about the front of the front end and the back of the front end. The front of the front end is HTML and CSS, and the back of the front end is JavaScript, React, Redux, all the data-fetching stuff.

00:12:54 - Brittany Postma

Middle end.

00:12:55 - Anthony Campolo

Yeah. So I think there's also a front of the backend and a back of the backend. The back of the backend is the actual database, the actual data source, wherever that is. And then the front of the backend is what StepZen is aiming at, which is an API gateway. If you know AWS, they literally have a service called API Gateway, and that's what lets you connect your Lambda functions to your database and actually have an endpoint that someone can query and use. So StepZen is literally a backend technology that is deploying a backend API for you, but it's a backend technology that's meant to enable front-end developers.

00:13:33 - Brittany Postma

Makes sense.

00:13:34 - Alex Patterson

Today's podcast is brought to you by Builder.io—visually building the web. Builder.io has one of the most powerful visual editors in the industry. Unlike other tools, Builder actually produces the code for you. You don't have to completely switch out your framework either—just use one of the handy SDKs that are available. There's no limit to what you can build. Instead of limiting your marketing team, start to optimize and let them do the work. This will allow your web developers to get back to the hard work that it takes for other components, allowing your team to do A/B testing and personalization. Stop worrying about bugs in production—just use the site as it is. Then you can analyze and start creating, converting all of your customers with Builder's built-in heat maps. Stop limiting your growth with developers' long lead times. Start building, optimizing, analyzing, and start growing faster. Don't take my word for it—you can sign up for free today and start building the web visually with Builder.io. I might be hearing something off here, but as far as that connection piece, is there a server you're spinning up to make those connections in the backend?

00:14:50 - Anthony Campolo

Yeah. So when you use StepZen, you're able to run a single command that deploys an entire GraphQL API for you with an endpoint that you can query and with API keys you can use to authenticate against that backend. It's like an awesome data-meshing kind of thing, but there's also a whole deployment tool for you. It deploys an entire API with a single command, and that is really incredible. It provides access control and all that stuff—you end up with an actual deployed API endpoint.

00:15:21 - Alex Patterson

Okay, is that running on software as a service for StepZen, or is that something you're spinning up to Google Cloud or AWS?

00:15:29 - Anthony Campolo

It's totally managed. You create a StepZen account, download the StepZen CLI, log in through the CLI, and run commands that will deploy it. When you create your account, you'll get an account name, and that'll be your endpoint. Mine is like pleasanton.stepzen.net and then forward slash, whatever my API is. So when you create the account, you have your own namespace where these APIs are deployed for you.

00:15:56 - Alex Patterson

When I signed up, I was like, "Where do I put it in? I want to put Coding Cat in." And it's like, no, you're "winooski." I'm like, what is Winooski?

00:16:06 - Anthony Campolo

Yeah, you can't pick a name yet. That will likely be a feature somewhere down the road.

00:16:10 - Alex Patterson

No, that's cool. All right. Brittany, any other high-level questions you might have?

00:16:17 - Brittany Postma

Not before we see it, maybe more after.

00:16:19 - Alex Patterson

Yeah, I think it's demo time. Are you prepared, Anthony?

00:16:23 - Anthony Campolo

Oh, I'm always prepared for demos. This is my whole job.

00:16:28 - Brittany Postma

I love that attitude.

00:16:30 - Anthony Campolo

First thing I'm going to do is run a couple of commands, scaffold out a project, and then we can talk about what the project actually is. There are a couple of pieces of boilerplate you need just to get going, but it's not a whole bunch. The first thing you're going to have is an index.graphql file that is going to be the entry point into your graph. When we talk about how you can take a bunch of different data sources and smush them all together, that is what we're doing here. We're going to have different files that each have GraphQL schemas in them, and those schemas get combined together into this one endpoint. This is also where something like Apollo Federation or OneGraph comes into play, because having different graphs put together is something you wouldn't necessarily get out of the box just writing Apollo Server. But the first thing you can do to show how this works, as a very simple base case, is we're not going to connect to any backend at all.

00:17:44 - Anthony Campolo

We're just going to write a GraphQL type and a GraphQL query. This is essentially the simplest GraphQL query you can write. We have an interface that is going to be returned by the get-test query. This is not connected to any backend right now—it's just going to return some mock JSON data for us. Then we're going to have an endpoint that is going to be deployed. You can give it a name here. So let's do two hours.

00:18:23 - Alex Patterson

Two hours is good.

00:18:24 - Anthony Campolo

Two hours, yeah.

00:18:29 - Alex Patterson

On the two-user two-hours.

00:18:34 - Anthony Campolo

This is going to be the command to actually deploy our endpoint: stepzen start. Once it deploys, it tells you the actual endpoint it'll be running on, which is pleasanton.stepzen.net/api/perfectdev now.

00:18:52 - Alex Patterson

So you're testing locally but still deploying something here.

00:19:00 - Anthony Campolo

This confused me for like the first two months I was working here, and this is one of the things I always make sure to explain. Good question. We have an actual endpoint here and we have a localhost that is just the GraphiQL interface querying that endpoint. Localhost is not the StepZen endpoint—this is actually the StepZen endpoint. This is just a nice way to write queries really, really quickly.

00:19:28 - Brittany Postma

This is like the GraphiQL explorer.

00:19:31 - Anthony Campolo

Yeah. If you use Gatsby, this is pretty much—this is an open-source tool that companies just take, extend, and slap their logo on top of. Pretty much everyone uses the same kind of thing. So this is just a bunch of mock JSON data we're getting back right now. But this is a GraphQL query. For anyone who hasn't seen a GraphQL query before: we have a query name—I usually like to name it with all caps, I follow Redwood naming conventions—and then this is the actual query that we defined over here. You say the specific fields you want to get from that query. We can get back this type, but we don't need to get everything—we can just get the date if we want, or we can get everything. This is the GraphQL query and this is the GraphQL response.

00:20:25 - Alex Patterson

Cool.

00:20:27 - Anthony Campolo

That should be fairly intuitive to anyone who's used GraphQL before. This is actually one of the things I really like about StepZen—it is a very good onboarding experience for people who already know GraphQL, and there are only a few small StepZen-specific things you need to understand to actually connect to the backends. Now let's connect to the Rick and Morty API. We're going to have a characters type that's going to return an array of character objects, and then this query type here. This is where the actual StepZen stuff comes into play. So far we've just been writing GraphQL schemas and GraphQL queries and there's nothing StepZen-specific about it. But what is different here is this directive. In GraphQL, you have directives that allow you to expand the capabilities of what you can do with your server. All of the @whatever things you're going to see in StepZen projects are custom StepZen directives that are different ways to connect to different backend data sources. Here I'm using @graphql. We can also do a REST API with @rest.

00:21:44 - Anthony Campolo

And you can also do a DB query to connect to a database. I like starting with just a GraphQL one, because then you're basically just defining the GraphQL schema that they're already giving you at the Rick and Morty API. So if we look at that API, we can see the docs and figure out what our schema is, and we just grab that. Then we can write queries. Once we plug that into our StepZen project, we can write those same queries. If we want to get that information here—now we're querying the StepZen endpoint, and the StepZen endpoint is then talking to the Rick and Morty GraphQL API and funneling that data in.

00:22:36 - Brittany Postma

That's one of my favorite things about GraphQL—you only have to get the data that you want. If you hit a REST endpoint, you just get everything and then have to find the specific thing you want within that. GraphQL lays it out very nicely.

00:22:53 - Anthony Campolo

Yeah, it's also really nice if you have a front end that needs to connect to it. Since we only have this one endpoint, you have these different frameworks like Next or SvelteKit or something like that, and they'll have conventions for doing API routes and serverless functions to do authenticated requests. But you just have to hit that one endpoint and authenticate to it, then send your GraphQL queries to that same thing. You have a really nice workflow where you're able to write all your queries to get the data you want, then just hook whatever framework you choose up to this one endpoint, get the queries working, and any query you write will send back the data you want, which you can display through your components. It's all unified in a really, really nice way.

00:23:46 - Brittany Postma

So this connects multiple things together.

00:23:51 - Anthony Campolo

Right now it's only hitting the Rick and Morty API. So if we want to do another one, let's do the Cat API. So you can see a REST example—you have a REST endpoint and it also has configuration. This is where you can also authenticate to your API through your StepZen graph. We have this config YAML file which will hold our keys, and I'll have to hop off for just a second to actually put this key in.

00:24:36 - Alex Patterson

So let me pause you for a minute. That'll work too.

00:24:42 - Anthony Campolo

Yeah. With this, all of your secret keys end up living in just one area and are self-contained. So you don't have to worry about all the different places you're going to have keys. Just make sure you don't commit that config YAML, and all of your secrets are contained.

00:25:03 - Brittany Postma

So StepZen handles them through the config YAML file, and you don't do it through a traditional .env file or something like that?

00:25:13 - Anthony Campolo

Exactly. So if you were hooking up a front-end framework, that's when you would use a .env file, and you would use your StepZen keys in there—that's how you would connect that way.

00:25:25 - Brittany Postma

That makes sense.

00:25:26 - Anthony Campolo

We can use the @graphql directive for the Rick and Morty one, but if you want to do a REST API, then we can do JSON Placeholder—create a file called users.graphql, and we'll have a user type and a get-users query that returns an array of users. Then all we have to do is specify the endpoint, much like we did with the GraphQL endpoint. If we open this up, we can see the data we're going to get back here. And then one other thing I should show.

00:26:02 - Alex Patterson

Is there any possible—well, I think you're about to do it. Never mind.

00:26:06 - Anthony Campolo

This is a tool I actually just wrote a blog post about. We have a way to convert this JSON response right into your SDL like that. So you don't need to just stare at this—before we had this, you'd just stare at it and be like, okay, ID is an integer, name...

00:26:23 - Brittany Postma

What does SDL stand for? I don't know that one.

00:26:26 - Anthony Campolo

Oh sure, yeah. SDL is schema definition language. This is how you define your GraphQL schema—exactly what we were looking at before, you have types and you have queries. It's the language you write GraphQL schemas in.

00:26:51 - Brittany Postma

Yeah, that's just one of those things—acronyms in tech, there's always another one you don't know. That was one I didn't know yet.

00:26:59 - Anthony Campolo

Totally. Once you create a new file, you need to make sure to add it into your graph here. What's really cool is that we have two separate APIs but they're unified together into our whole thing. So if we want to get the users, we can get them like so. If we want to also get the Rick and Morty characters, then we can do that too. We just write this one query and it sends back all the data you want. Once you add something to your StepZen graph, you have it all there available to you and can write any sort of arbitrary query that's going to pull any piece of data from any of those backends.

00:27:52 - Brittany Postma

That seems really powerful.

00:27:54 - Alex Patterson

Yeah, that's interesting. I like that. That's really cool. That's the kind of premise we were shooting for on this episode—to show how we could pull different data sources in pretty easily. This is probably a fairly easy example just because you're hitting a couple APIs. Is there any sense in talking about the resolver side at this point, or anything around that?

00:28:24 - Anthony Campolo

Well, the great thing about the way this is set up is that all of what would be resolvers is happening under the hood of StepZen. It's like a huge transpilation kind of thing—basically, how do you actually turn this query into something that makes sense against the API endpoint itself? That happens in the secret sauce of StepZen, and honestly I don't even understand it that well, but the point is that the tool exists so you don't need to figure that out. They give you conventions, and if you check out the docs, they'll say: this is how you connect to your endpoint, this is how you configure your keys. There's also other higher-level things you can do where you can modify the types themselves to write even simpler queries than what you'd have if you just mapped the REST schema to the GraphQL schema. There's higher-level stuff you can do to deal with your endpoints however you want, but the point is you use the StepZen conventions to get the data that you want.

00:29:40 - Anthony Campolo

And you don't ever think about how that query actually gets mapped to the endpoint. It's being declaratively specified through these directives.

00:29:51 - Alex Patterson

Cool. Until it makes sense.

00:29:54 - Anthony Campolo

Great, good. Didn't make sense to me for a long time.

00:29:57 - Alex Patterson

I think I've messed around enough with AWS Amplify—there's so many things you can do. What's their GraphQL service called?

00:30:06 - Anthony Campolo

AppSync. Yeah. AppSync is one of the closest analogs to what StepZen is doing for you. They have a lot of connections already built out for DynamoDB, whereas we have a lot of stuff like Postgres and MySQL, so the data sources they're building around are slightly different because they're AWS-specific, whereas with StepZen it's more general. But in terms of conceptually what they do, they're very, very similar tools.

00:30:36 - Alex Patterson

Gotcha.

00:30:37 - Anthony Campolo

Yeah.

00:30:37 - Alex Patterson

Yeah. I always really enjoyed working between Dynamo and having all the capabilities of GraphQL and everything else. Comparing it to AppSync—I always get confused on what part this is in—but is there a comparison on the real-time side? Like Firebase and syncing, I guess. Real-time data. Is there a comparison there? Like could you keep polling when something updates and update the graph?

00:31:17 - Anthony Campolo

That's a good question. The way it's set up is your API can be auto-deployed anytime you make a change, and it doesn't support subscriptions right now. I think that's probably what you'd be looking for to achieve that—you'd need subscriptions. And for some reason, subscriptions are this thing in GraphQL that gets talked about a lot, but I don't know anyone who ever does it. It's always like, oh, we don't do subscriptions yet. Redwood doesn't do subscriptions. No one does subscriptions. It's a thing that exists in the GraphQL spec but very few people actually implement. So it's set up more for just straight queries and getting data back. If you wanted to connect it to some kind of polling system, I imagine there'd be lots of ways to do that.

00:32:09 - Alex Patterson

On the front end too, if you wanted to.

00:32:11 - Anthony Campolo

You can poll from the front end also, yes. There's just never quite enough people asking for subscriptions to actually implement it.

00:32:21 - Alex Patterson

Totally, totally makes sense. It's always in the back of my mind because of dealing with Firebase so much—like, is that a thing out there still or not? So cool. That's great. Did you want to show off the studio?

00:32:39 - Anthony Campolo

Yeah, definitely. So now that you've seen how you would build up a StepZen API from scratch, there's now a further level: imagine you didn't have to create that schema at all, didn't have to write the config YAML at all. Imagine you just input your key into a nice UI, get a schema, and immediately start writing queries. That'd be really nice, right? So that is the StepZen GraphQL Studio. If you just go to graphql.stepzen.com, you can get to this. They have already created pre-built API schemas for you. So if we look at JSON Placeholder—the one we just did—you click it, it adds it, and then it gives you a query you can just immediately hit and get some data back. Then you can look at the schema. And even one step further—this is the thing I think was confusing you: you don't need a StepZen account at all. You're actually able to just immediately deploy the endpoint by clicking this link and then write queries against that endpoint.

00:33:53 - Anthony Campolo

So this is already a live endpoint anyone could hit right now. And the great thing about—yeah, go ahead.

00:34:00 - Alex Patterson

I think the biggest confusion on my part was when I went to dev.to at the top of it, and when you run that one—if you want to drop it in there, we can take a look at it.

00:34:10 - Anthony Campolo

That was actually exactly the one I was going to show. So that's good.

00:34:14 - Alex Patterson

When you run this, it was coming back with StepZen type stuff, and I'm like, okay, I need my API key. So I dropped my API key in and I was expecting it to pick up me, but then I realized the actual query has a person in there—like get user, right?

00:34:33 - Anthony Campolo

Yeah, exactly. Right now it's giving you Lucia's—or it was giving Lucia's information. So I just changed it to my username there. Now we're getting back... What's your dev.to account?

00:34:47 - Alex Patterson

I think it's CodingCatDev.

00:34:53 - Anthony Campolo

There's your Supabase open-source alternative. You can get podcasts through the dev.to API as well. Actually they have a way to configure your dev.to API keys, but you don't need that for every query. Some queries you'll need your keys for. For this one you just need the username and it'll give you back the articles or the user information or anything like that.

00:35:16 - Alex Patterson

That's really cool. This is very intriguing to me. The only piece we'd have to solve at Coding Cat is probably the Firebase side of things—that might be a little more difficult. You'd have to use an admin API or admin SDK under the hood somehow to pull out.

00:35:35 - Anthony Campolo

Well, does your Firebase database expose an endpoint?

00:35:39 - Alex Patterson

Not a true endpoint. You have to use one of their SDKs to get to it, and so it would have to be on a secure server somewhere.

00:35:51 - Anthony Campolo

Yeah. We have Firebase Dynamic Links—I don't really know what that is—but I would imagine there's definitely a way to do that. It might just require a little finagling with the team. Happy to chat about any sort of cool use cases.

00:36:12 - Alex Patterson

So I'm curious at this point—you model out what you need essentially, and then you just tuck that into any sort of app, like a Next.js app or Angular app, and you use Apollo Client or something else to make the calls.

00:36:29 - Anthony Campolo

Yeah, let me show—we have example apps that can make this a little more clear. I know we've got a big Svelte fan on the show, so let's take a look at this. If we want to just connect a front end, the way you do that is by writing a GraphQL query. This is for SvelteKit specifically, but it's going to be fairly similar for anything you want to do. If you're able to do a fetch request, you do a fetch to your StepZen endpoint, set the header with your StepZen API key, JSON stringify the body, and send the query through the body. This is what I was talking about: once you figure out how to write your queries and connect your endpoint, all of that stays the same, and you just copy-paste queries in and then you have all the data immediately exposed on your front end.

00:37:31 - Alex Patterson

I can see Brittany's face—she's getting excited right now.

00:37:35 - Anthony Campolo

This is that query we were just looking at. We're querying for the user and their name, summary, location, all that—that's coming in right here. And we're also getting the last five articles, specifying about five articles from me: we want the title, description, and all that. Then we're getting that.

00:37:57 - Brittany Postma

I was suggesting that we drop that repo link in the show notes.

00:38:01 - Anthony Campolo

Yeah, sure, definitely. Let me make sure I send you the right link first.

00:38:10 - Brittany Postma

Okay, perfect.

00:38:11 - Anthony Campolo

And then the last thing: this is kind of the SvelteKit-ism. You connect to this route that you spun up and then you write your components here. This is the HTML that's actually mapping to what we're seeing over here.

00:38:28 - Brittany Postma

Yeah, SvelteKit routing allows you to make endpoints in your routes. So that's the SvelteKit endpoint that you created there, right?

00:38:39 - Anthony Campolo

Yeah, exactly. So I've got a couple of these. If we go to articles, I've got all my articles coming in here, and that's being componentized like so. And I've got my podcasts also. Yeah, so that's the whole front-to-back. This is something my podcast, FSJam—for Full Stack Jamstack—is all about. This is essentially what I mean when I talk about Full Stack Jamstack: you can have your whole front end, back end, all in this really nice DX workflow where you never once touched a server, never once had to worry about versioning Linux or any of that stuff. And you may not even have to worry too much about spinning up a database—if you use something like Supabase you get a database pretty much for free. The question then is how do you actually connect the backend to the front end, and that's where the really hard part comes in. StepZen comes in to be that mediator and says: we're going to figure out how to connect them, and we're going to do it in a GraphQL way.

00:39:52 - Anthony Campolo

So if you know GraphQL, you're going to know how to connect to your backend. And the great thing about just writing GraphQL queries is that you don't need Apollo or a GraphQL request library at all—you can just do a fetch request. You really don't have to use all this crazy GraphQL-specific tech to achieve a project like this. There's going to be a wide array of different tools that allow you to do it with different levels of simplicity and different levels of buy-in. To me, StepZen sits in a really nice middle ground where it gives you a ton of power with a very small amount of conventions to learn.

00:40:30 - Brittany Postma

Yeah, it seems really powerful and it could really help integrate those pieces. Is there a free tier? What is the pricing for StepZen?

00:40:41 - Anthony Campolo

Yeah, it's all free right now—everything is 100% free. You can create an account for free, you can use the GraphQL Studio for free, and then at some point we'll start building out more enterprise...

00:40:53 - Brittany Postma

How are you going to make money?

00:40:54 - Anthony Campolo

Big money for it. Yeah. We have a good team of very experienced API devs who originally worked at a company called Apigee, which ended up being purchased by Google Cloud. So there's a longer-term enterprise vision here, but for a dev who just wants to build a hobby project, or maybe create a startup and bootstrap, you have this really powerful tool and you don't have to pay anything for it.

00:41:24 - Brittany Postma

Awesome.

00:41:27 - Anthony Campolo

Oh, we already got an enterprise plan—look at that. Yeah, so if you know you're going to have a ton of traffic and you want support responses in like five, ten minutes, then you can pay a little bit. But we're all on Discord—we'll help you out with your problems even if you're on the free tier. Don't worry about that.

00:41:47 - Alex Patterson

Awesome. That's really cool. It's a neat product to be able to glue everything together. Anything that makes building APIs or GraphQL endpoints easier, I'm all over. I love it.

00:42:01 - Anthony Campolo

Yeah, that's really what got me into Redwood in the very first place. With Redwood, you scaffold out an entire full-stack application and it works. If you don't know how the tech works, you don't know why it works, but it does. Once you dig into it, it's because they figured out how to get Apollo Server—now Helix—but a GraphQL server connected to a GraphQL client, and then they generate GraphQL queries for you and figure out how to map those to the React components. When you use something like Redwood, it gives you this really nice DX for something that would have been extremely complicated to build from scratch. And that's kind of the idea behind StepZen too—they give you the power to build something really complicated without having to build all the plumbing to make it work, if you just buy into the conventions of the tool.

00:42:45 - Brittany Postma

Giving you a good developer experience, which is the best. Yeah.

00:42:50 - Anthony Campolo

Yeah, that's cool.

00:42:52 - Alex Patterson

All right, well, thanks for showing it all to us. I think now we're going to jump into our perfect picks. Brittany, I'm going to let you go first because I've lost Anthony's.

00:43:06 - Brittany Postma

Okay, no worries.

00:43:12 - Alex Patterson

There we go. There's the right one.

00:43:17 - Brittany Postma

So my first pick is off the Netlify blog—if you listen to the show, everyone knows I love Netlify, I host all of my personal projects on Netlify. I went digging for something on StepZen, and this walks you through how to build a database-driven Jamstack site and then host it on Netlify. If you want to know how to do it step by step, follow this blog post and it will get you there.

00:43:41 - Alex Patterson

Nice.

00:43:43 - Brittany Postma

It's by... Brian Rinaldi wrote it. I just thought—why did I just...

00:43:51 - Alex Patterson

Yeah, that was my bad.

00:43:55 - Brittany Postma

Cut that out, please.

00:43:57 - Anthony Campolo

You're thinking ahead to my pick.

00:43:59 - Brittany Postma

Oh, okay. I see.

00:44:04 - Alex Patterson

Cool. Your second one.

00:44:07 - Brittany Postma

My second pick is The Morning Show. We thoroughly enjoyed this show—we watched both seasons in a matter of two weeks. If you listen to the show, you know I binge-watch shows every once in a while and we go through them very quickly. But this was an interesting look back at the last three or four years of recent history, going back to the MeToo movement and going through all that, and then seeing the very beginning of the pandemic and what it was like for everyone. It was just crazy to relive, even through a fictional show. But it was really good.

00:44:47 - Alex Patterson

Yeah, I agree. It was kind of wild walking back through that whole pandemic timeline and the feelings that people had. It's a great show. I really enjoy it.

00:44:57 - Brittany Postma

Yes.

00:44:58 - Alex Patterson

Cool. So I'm going to bring up Prisma. It's kind of interesting—it's somewhat in a similar vein with...

00:45:07 - Anthony Campolo

...what we're talking about. Redwood.

00:45:09 - Alex Patterson

So what's that?

00:45:10 - Anthony Campolo

It's the ORM for Redwood.

00:45:12 - Alex Patterson

Yeah, exactly. It's very popular in the community, and it's amazing how quickly you can tap into a database and get all of your type-safe calls back. So check it out. Anthony probably knows more about it than I do, since you're such a big Redwood fan. Any other tips or suggestions on it?

00:45:36 - Anthony Campolo

Well, with Prisma it's awesome because it connects you to different types of databases. If you have MySQL or Postgres, it doesn't matter because you write a Prisma model and it does the mapping. It also now does MongoDB, which is kind of a crazy thing—going between a SQL database and a non-SQL database took them almost two years to get to that point. It's a really sweet tool and it's really becoming a key piece of almost any developer's full-stack setup. If you use a framework like Next, you're probably going to want to bring in some kind of ORM, which usually means Prisma. Having seen it get integrated through Redwood and seeing the benefits it brings—over the last year I've seen all these people just pick it up for their own front-end projects and go, "Prisma, this thing's awesome." Yeah, I know, right?

00:46:32 - Alex Patterson

The whole MongoDB thing blows my mind. They must somehow query the actual definitions of the documents and then pull it through—I don't know, taking a guess there, but it's pretty good. Cool. My second pick: burning through batteries playing Xbox. I finally broke down and got a charger that I think is pretty decent—it's for rechargeable batteries and it'll do double-A and triple-A.

00:47:00 - Brittany Postma

Are you telling me Xbox controllers use batteries? They don't have a charging stand?

00:47:10 - Alex Patterson

They can have one. They don't come out of the box with a full battery pack. You can buy the packs and then charge them with a stand, or I think you can charge them via USB-C too.

00:47:23 - Brittany Postma

Okay, interesting.

00:47:24 - Alex Patterson

But I thought, everything else we have has batteries too, so why not get the AA charger? I also broke down and got the larger 2800 mAh double-As, so hopefully they last a lot longer. Kind of two parts to that puzzle. But I've been enjoying them—it's amazing. I feel like I'm not killing our precious earth with all the batteries. They all end up in a bag at my house and have to get shipped off to recycling. And the last straw was I was sitting here coding and I heard a pop and I thought my monitor busted. There was a remote nearby and a battery had exploded inside it just sitting there. I was not happy—that was just a traditional nickel-cadmium battery. So wow, I was like, it's time to figure this out.

00:48:33 - Anthony Campolo

Yeah, totally. I'm a big fan of developer Discords and want to shout out a couple of those. There's a new one that just came out for Jamstack and I'm so happy, because I actually opened up a discussion on the jamstack.org repo back in August saying, hey, why do we have a Slack and not a Discord? We should have a Discord. And then Demetrius ended up getting hired to do community management more generally, and a big part of that has been him creating this Discord and managing it essentially single-handedly. It's awesome. I know Brittany, you're in there—I see you talking about Svelte and all sorts of stuff all the time. Very cool community. I'm also a big fan of Lunch Dev and the Front End Horse Discord. Those are both really fun. And if you are in some of these Discords, you'll start to see it's actually the same people hanging out in all of them.

00:49:27 - Brittany Postma

It's like these amazing people that you just—Discord, I love Discord since I started learning technology, because you get to talk to these people that you would probably never interact with otherwise. We're all human and we all need those interactions. It's just so cool to see all the open-source information and help and feedback and friends—there are just so many good things in there.

00:49:51 - Anthony Campolo

Yeah, you gotta get that Discord app, because then when you click a browser link, it'll kick into your Discord app and authenticate you there. You have to authenticate through the browser auth.

00:50:02 - Brittany Postma

The QR code scan is the best.

00:50:05 - Alex Patterson

I agree. Unfortunately, Discord's been having a lot of issues lately.

00:50:09 - Brittany Postma

They have the last couple of days, but they'll get it back on track.

00:50:14 - Anthony Campolo

And then I also had a funny pick. I've been rewatching Arrested Development with my girlfriend recently. If you're into mid-2000s humor in television shows, Arrested Development is just one of the all-time classics. It's about a very dysfunctional family—a business-empire type family. It's a really great satire with funny characters and bits that build on bits on bits. Yeah, I love it.

00:50:43 - Alex Patterson

That's awesome. Yeah, we just started watching Ozark, which I'll probably have to pick soon.

00:50:51 - Brittany Postma

We just started watching it again last night too.

00:50:53 - Alex Patterson

It's funny to see Bateman in those different roles.

00:50:58 - Anthony Campolo

Yeah.

00:50:58 - Alex Patterson

Such a good actor. It's a good time.

00:51:03 - Anthony Campolo

Cool.

00:51:04 - Alex Patterson

Well, Anthony, thanks so much for giving us a full tour and talking about how to pull together multiple sources for GraphQL. Anything else you want to pitch or talk about with StepZen?

00:51:16 - Anthony Campolo

Just check us out at stepzen.com or graphql.stepzen.com. We also have a Discord, so you can find all that on our homepage. We'd love to find out what you're curious about building, whether it has anything to do with StepZen or GraphQL or not. If you do something with an API, we can probably figure out a way to make it work. I am AJCwebdev on the internet—Twitter, GitHub, everywhere—that's my general handle. Always happy to chat with anyone about StepZen, front-end stuff, open source, career-changing stuff. I've been on this long, weird, meandering journey that I talked about, and I'm always very open to sharing how I got to where I am and how to help out other people looking to do a similar thing.

00:52:05 - Brittany Postma

It was so nice to meet you, and thank you for coming on and explaining StepZen to us.

00:52:10 - Anthony Campolo

Yeah, thanks so much for having me.

00:52:12 - Alex Patterson

Have a good one.

00:52:13 - Brittany Postma

Later.