Building Apps with Pokemon, SpaceX, and GraphQL Studio

Episode Description

The StepZen team demos their new GraphQL Studio, showing how to combine APIs like Pokemon, SpaceX, Google Maps, and Yelp into unified endpoints.

Episode Summary

In this live stream, Anthony Campolo, Lucia Cerchie, and Sam Hill walk through the newly launched StepZen GraphQL Studio, a browser-based tool that lets developers explore, combine, and query dozens of pre-built GraphQL schemas without signing up for StepZen itself. The conversation begins with the team reflecting on the engineering effort behind curating each schema, from auto-generating types off REST APIs to writing sample queries that work without user-specific data. Anthony then demonstrates combining the Pokemon and SpaceX APIs into a single unified query, showing how the studio provides autocomplete, documentation, a live endpoint, and a downloadable project scaffold. Lucia follows with the Unsplash API, illustrating how API keys are handled securely in local storage and how image search results can be pulled directly into a front-end workflow. Sam closes with the headline demo: a Google Maps and Yelp combination that searches for restaurants by location, returns ratings from both platforms side by side, and surfaces Yelp reviews — all through one GraphQL query powered by StepZen's directive system. Along the way the team discusses caching, rate limiting, and real-world use cases like sentiment analysis and portfolio site generators, emphasizing how little code is needed once schemas are stitched together.

Chapters

00:00:00 - Introductions and the Story Behind the Studio

Anthony welcomes viewers to the first stream featuring all three hosts and introduces the StepZen GraphQL Studio as a major product launch. He asks Lucia and Sam to share what it was like building the studio from the inside, setting the stage for the demos to come.

Lucia explains that the core of the product is the carefully curated schemas behind each query, noting how the team iterated to ensure good documentation and usable mock data. Sam adds that the studio is designed to let developers quickly sample a wide range of APIs and understand what GraphQL can offer before committing to a full StepZen account, highlighting the ability to plug in your own API keys and run queries immediately.

00:04:12 - Favorite Schemas and Engineering Challenges

The hosts discuss specific integrations they built and what made each one interesting. Lucia highlights the Spotify schema, where auto-generating types from the REST API produced many duplicates that needed consolidation, and mentions the Studio Ghibli API as a simple, fun example of the studio's capabilities.

Sam talks about building the HubSpot schema, motivated by the growing importance of CRMs and the value of seeing your own CRM data flow through a GraphQL interface. He also previews the combination demos, like Google Maps paired with Yelp, that show how linking APIs together can surface practical, real-world insights. Anthony reflects on the range from playful APIs to high-value business tools and how the studio saves developers significant time navigating bespoke API documentation.

00:07:31 - Live Demo: Pokemon and SpaceX in the Studio

Anthony shares his screen and walks through the studio interface, starting with the Pokemon API. He demonstrates running a sample query, trimming fields, adjusting pagination, and using autocomplete. He then pulls in the SpaceX API and combines both into a single query, showing how StepZen stitches multiple schemas into one unified endpoint.

The demo continues with Anthony showing the live deployed endpoint that can be curled or used in tools like Insomnia, and the publish feature that generates a downloadable project zip with all the schema files and configuration. Sam and Lucia add context about the schema tab, documentation explorer, and StepZen-specific directives like @graphql that make consuming external GraphQL APIs straightforward.

00:15:44 - Unsplash API and Working with Keys

Lucia takes over to demonstrate the Unsplash API, explaining how API keys are entered through the studio's configure panel and stored securely in local storage rather than on StepZen's servers. She runs search queries for "red" and "snowflake," retrieving image URLs that could be dropped directly into a front-end project.

She highlights how the studio levels the playing field across different REST APIs by abstracting away authorization header differences — whether an API expects "Bearer," "API key," or "Client ID" prefixes. Lucia also teases an upcoming Advent of GraphQL challenge series that will use the studio and the Unsplash API to build a snowflake image project, and the team briefly discusses creative use cases like combining Unsplash with the Pokemon API using StepZen's @sequence directive.

00:22:33 - Combining Google Maps and Yelp Reviews

Sam demonstrates the combination feature by loading the Google Maps and Yelp reviews combo, which merges two schemas into one large unified schema. He explains the three query types — StepZen query, Google Maps query, and Yelp query — and how the @materializer directive feeds latitude and longitude from a Google Maps text search into a Yelp business lookup.

After first running the query with mock data to show the expected response shape, Sam configures both API keys and searches for sushi in Coconut Grove, Miami. The results show Sushi Maki with a 4.3 Google rating versus a 3.5 Yelp rating along with full reviews, illustrating how developers could build a front-end comparison tool. He also shows the same query running in Postman, noting the need to pass API keys manually outside the studio and discussing rate limiting and caching options available through StepZen's directives.

00:34:21 - Blog Posts, Use Cases, and Wrap-Up

Anthony shares links to blog posts that extend the studio's capabilities, including his own sentiment analysis project combining the Dev.to API with Google's Natural Language Processing API using the @sequence directive, and Lucia's portfolio site generator that pulls data from Dev.to, Twitter, and GitHub and deploys via Netlify.

Sam squeezes in one more demo searching for tacos in Coconut Grove, surfacing a "hole in the wall" joint from Yelp that charms the team. The hosts wrap up by encouraging viewers to join the StepZen Discord, suggest APIs they'd like to see integrated, and watch for Lucia's upcoming Advent of GraphQL challenge series. Anthony confirms the stream runs weekly on Fridays at noon Pacific time, closing out at 00:39:03.

Transcript

[00:00:24.07] - Anthony Campolo Hello, everyone. Welcome to another episode of the StepZen stream. You laughing at my head bob, Lucia?

[00:00:30.24] - Lucia Cerchie Yeah, well, it's a nice intro addition to the stream there.

[00:00:36.20] - Anthony Campolo Yeah, I'm very excited for this episode. This is the very first time we've gotten all three of us together on a stream. If you've been watching the StepZen streams previously, you probably know all of us. I am Anthony Campolo, and we have Lucia and Sam here with us. Today we're going to be showing off the StepZen GraphQL Studio. This is really, really exciting for us. This is a huge product launch. We had a Product Hunt go live not too long ago for it, and we've been really doing a big push to get this out into the world to show people the power of GraphQL and the power of StepZen and how easy it can be to get spun up with lots of APIs and start working with them. Before we get into showing some code and all that, I'd be really curious to hear a little bit about the process that went into building this. I've been helping out with creating content around it and was doing a little bit of QA as it was going, but Lucia and Sam were a lot deeper into actually building this.

[00:01:32.15] - Anthony Campolo So I'd be curious to hear a little bit about what exactly went into building this. What were your own roles in doing this, and what kind of things do you feel you've learned through this process of building this huge, intense product?

[00:01:47.09] - Lucia Cerchie Right, well, the meat of the product is the schemas behind the queries that you can make in the studio. You can see those surfaced immediately in a little tab that we'll show you in a moment. It was just really interesting for me to see our team iterate over and over again on each schema and curate it to make sure that they were easily usable, well documented, and that mock data was available on each one. Just the way that each schema was carefully curated to make sure that it would be easy for the developer to use was super interesting.

[00:02:31.15] - Sam Hill Yeah, I totally agree. The meat of the project is definitely these schemas, and that's a big reason why we wanted to be able to give this what I like to think is a big-time way of sampling all these different APIs at a very, very quick pace for people that otherwise may not know how APIs can influence a project and be a factor in their development process. Maybe they consider, okay, maybe I want to do a CMS like Contentful or Airtable or something like that that may hold my data and source it, but what will I actually be doing and what does GraphQL provide? That's where you can see these things in action. And the power of being able to actually add your configurations and see your own keys and take that schema and just run it right away, it's pretty powerful even before having to actually sign up for StepZen, which then enables you to do more with it and actually tie data together, which we also sample there and we'll show in the combination section. So it's really cool.

[00:03:27.11] - Lucia Cerchie And the schemas that you mentioned, the ones that were more content-focused, those presented a very interesting engineering problem in terms of selecting sample queries, because you couldn't write the sample queries and request them by any parameter that would be specific to the dataset, if that makes sense. Like if you had a table and it had a, you name it, like Lucia's table inside your Airtable CMS or something, you can't fetch by the table name. You have to figure out ways to make sample queries work that return models or schemas that we know will be in every CMS. So that was one really interesting part of the project to me.

[00:04:12.05] - Anthony Campolo Yeah. What are some of the schemas you both built out in terms of what were the integrations? Which endpoints were you building out?

[00:04:23.11] - Lucia Cerchie Like which one specifically?

[00:04:25.13] - Anthony Campolo Just some of the ones that maybe are some of your favorites. I'm sure you both did quite a few.

[00:04:31.17] - Lucia Cerchie I don't know if I remember which ones exactly. Spotify was a big one that I did. I learned a lot about kind of consolidating a schema because we auto-generated the schema from the REST API and then we ended up with a lot of repeated types. So I got some help from other members of the team just removing some of the fluff there. That was a good lesson that I learned doing that one. Some of the ones that I enjoyed doing were the Studio Ghibli one, where it's just like, oh, the content of this is so fun, and it's such a good simple example of what this studio can do that it was just fun to make.

[00:05:16.29] - Sam Hill Yeah, I built out one that I thought was pretty valuable and pretty big too: the HubSpot one. I spent some time on that one because I think CRMs are something that everyone is really grabbing attention toward, especially web-based ones. We didn't do Salesforce because the Salesforce API is something of its own, but we did HubSpot because we had familiarity with it. I built that out, and I thought it would be really resourceful to see all the different ways that you can tie your CRM into things. A lot of times what CRMs are doing today is talking about all the different ways you can integrate it with other tools and processes on other platforms and other third parties. Being able to bring that in and see your own data coming into that from a GraphQL source, and then seeing all the potential capabilities and integrations you could do yourself just by linking directly through a GraphQL schema, was something that I thought would be pretty cool and powerful. Other than that, building out fun ones is what we wanted to do for combos on here to show sampling of that.

[00:06:17.12] - Sam Hill And you'll find ones on there that are good to do, like what we'll be showing today: Google Maps and Yelp, which allows you to see different ratings from different sites and ask, okay, what restaurant do I want to go to?

[00:06:30.21] - Anthony Campolo Yeah, I think that's cool because we have a huge range of different APIs, from the kind of fun and hooky ones to the actually real, very useful, high-value ones for businesses. You've been doing HubSpot work just for StepZen itself, so I know you've gotten very deep into their API and already see the value that a company can get from it. It makes a lot of sense that you can look at the tools we are using ourselves as developers and then think, how do we actually make this simpler for other developers who also need to use these tools? The process of even figuring out one single API is just so much work, digging through the docs and figuring out how each bespoke API works. All of us have gotten a lot of experience with that working at an API company. So it's really great to have built something that I think is really very useful and can save people a lot of time. We're very excited to share this with you.

[00:07:31.09] - Anthony Campolo I'm going to go ahead and screen share here, and I already dropped a link in the chat for this. This is @graphql.stepzen.com, and this is our GraphQL Studio. If we see here on the left, we have a list of all of our schemas. Both of you feel free to hop in with any comments or clarification as I'm going. We have a wide range of schemas, some of which you're almost certainly familiar with and some of which you may not be. Then we also have these combinations over here, and the combinations involve lots of different ones that are already provided in the schemas but are connected together. To start, I'm going to pull a couple schemas together, and then we're going to get more into the combinations as we go on. There's different levels of how much authentication goes into some of these APIs. To start off, we're going to use one that doesn't really require any API keys at all. We just have the Pokemon API. Most people are familiar with some Pokemon.

[00:08:41.05] - Lucia Cerchie If you've ever done an API tutorial, probably, yeah.

[00:08:44.17] - Anthony Campolo Everyone loves their Pokemon. You have two things here: we have our queries and we have our schema. This is one of the things I really like, that you can just go see the schema. Even if you weren't going to use the studio at all, you can copy-paste these schemas and get all these GraphQL schemas already created for you. It's amazing how much work the team has done for you by creating these schemas. If we look here at the actual query type, we can see these are some of the StepZen-isms that we use to make this work. This one specifically, we're not using the Pokemon REST API. If you have done this before, you likely have used that. But this is actually a GraphQL Pokemon API that is on GraphCDN, and we can feed it into our @graphql directive. Then we're able to prefix it so it doesn't get confused if we have another Pokemon endpoint for some reason that we're also bringing in. If we look at our query now, we start off by giving you a nice sample query here that you can run, and you can get results back.

[00:09:46.26] - Anthony Campolo This is a pretty big result object here, so I'm going to pare this down a little bit. Instead of getting the Pokemon's abilities, let's just get a list of the Pokemon, get their names, and only pull in five of them. Now we're only getting a small list of just a handful of Pokemon. So you already see we have conventions here for how much of the data you want to bring in in terms of pagination and things like that, so you can limit it. You don't want to get every single Pokemon all at the same time. We just want to get five. Then we can also check out some autocomplete as well. You hold Ctrl+Space and then you get all sorts of information in terms of what you can actually do with this. So that's all really, really sweet.

[00:10:33.29] - Sam Hill Yeah. And another place where if you ever want to see all the fields you can return, you can check in that schema as well, or you can head over to that documentation. That'll jump to a preview there, but you're able to go through there and it will provide all the fields as well so you can check it out and see what else you want to pull in in case previews sometimes don't pull in all the fields. Got to make sure. Yeah, exactly.

[00:10:57.10] - Anthony Campolo Yeah. This is a common thing if you're someone who's worked with other GraphQL explorers or GraphQL playgrounds. There are a lot of different terms for it, but a lot of this should be fairly intuitive. We've really built it out to be a whole suite of tools, but in terms of just giving you the docs and giving you autocomplete and things like that, this is all fairly standard stuff. We see here we're looking at the Pokemon, the results object, and then the Pokemon item. There we can grab things like the name and the image and the ID and things like that. So now that we've got that, the really great thing about StepZen and what makes StepZen such a unique platform is that it allows you to take multiple different endpoints and combine them all into one unified graph. If we want to bring in, say, the SpaceX API, this is another common API as well. What I'm going to do is pull that out and grab this for a second.

[00:12:10.25] - Sam Hill You're moving quick right there, but really this is just any standard GraphiQL where you can make whatever modifications you want. You can move things around and inject Pokemon into a SpaceX query right here and just run it exactly as that. It's entirely customizable to be able to do this stuff.

[00:12:29.02] - Anthony Campolo Exactly. Now we're seeing here we've got the SpaceX coming in, but I also want to be able to query both of them at the same time. If we take this one big query and insert our Pokemon query and our SpaceX query, we can run this and get everything back together. Now we can see that all of the work of combining these schemas, stitching them together, and allowing you to have a unified interface, it's all taken care of for you. This is especially nice if you're a front-end developer because if we just take this query and throw it into a fetch call and a useEffect in a React app, all of a sudden we have instantly the data we need for our front end. We didn't have to create the schema, and we didn't even have to create the query types. We have everything we need to start writing the queries and getting the data back. Beyond this, what's really cool is we also have a whole endpoint that's already deployed for you. If you grab this here and then pop it open in a new tab...

[00:13:32.15] - Anthony Campolo Now we're looking at our specific endpoint that has been created for us. If we want to curl this endpoint or hit it within Insomnia or anything like that, we could do that as well. It even filled in our query for us. Now we're seeing that we can get this back over here. Then the last thing that I want to show before I hand it off to Lucia is this: if you've ever worked with StepZen before, you have probably created some sort of project that has an index.graphql and some schema types and all of that. If you wanted to auto-generate that from this endpoint you create, you can click publish and then download it, and it zips it up for you. You can open up this zip in your favorite code editor and then actually see all of the code that goes into creating this. My computer decided to poop itself for a second. Now we can see our actual project and everything that goes into it. Sorry about that construction noise also, by the way. I'm in the very noisy city of Oakland right now, but about to pass it off.

[00:14:46.28] - Anthony Campolo So we see here we have...

[00:14:48.12] - Lucia Cerchie sound effects because you're building something.

[00:14:50.28] - Sam Hill There you go. That's a good way to put it.

[00:14:53.17] - Anthony Campolo That's hilarious. If we look here in our index.graphql, you can kind of see how the StepZen-isms work. It already took these different files and basically combined them all together into this one endpoint for us. Then we have these configs to connect. If we are actually importing keys, then that's where our keys would be as well. Then we can see the schemas, which we were looking at before, with our endpoints from the SpaceX endpoint and from the Pokemon endpoint. So that is kind of the first step that we wanted to show you. We also want to show you how to do some more complex things with keys and things like that. I'm going to stop sharing and go ahead and take it away from here, Lucia.

[00:15:44.05] - Lucia Cerchie Yeah, yeah. I also wanted to add, if you're not familiar with that @graphql syntax, that's because that's a StepZen-specific capability. It's a directive that you get to use when you use the StepZen service that makes it very easy to consume other GraphQL APIs.

[00:16:07.27] - Anthony Campolo Also, hey to all the friends in the chat, thanks for hanging out, everybody.

[00:16:12.09] - Sam Hill I replied to some, but I accidentally replied on YouTube and Twitch for some of them. So now everybody knows what we're talking about.

[00:16:18.29] - Anthony Campolo People on YouTube are like, what?

[00:16:20.17] - Sam Hill Yeah, Isaac's like, I'm not talking about Pokemon.

[00:16:24.20] - Lucia Cerchie Yeah. So here we've got the Unsplash API selected. I'll just go to unsplash.com real quick to show you what it is in case you're not familiar. It's a free image resource, and there are a lot of very beautiful images available. I use this in my own demo projects all the time as placeholder images. The API itself is very useful, except I realized I was only sharing that tab. Maybe Anthony can drop the website in the chat so you guys can check it out. You can see here we're running a bunch of queries on the Unsplash API. We're looking at the stats for a specific client and seeing how many new developers and new requests are there. We're looking at collections and getting a bunch of fields back there, stats, and then search, which we'll look at in a second. But first I just wanted to show you how to use an API that requires keys inside the StepZen Studio. This is a good example of that. So you would hit configure, and here you enter your Unsplash client ID. The nice thing about using the StepZen Studio is the GraphQL implementations here specifically kind of leveled the playing field on the different APIs that we use, especially the REST ones.

[00:17:46.16] - Lucia Cerchie Because sometimes in your authorization header you have to double-check and make sure that you're sending the right prefix, right? Sometimes you need Bearer, other times it's API key. With Unsplash, it's client ID. But anytime you use one of these StepZen endpoints inside the GraphQL Studio, all you have to do is put in the secret.

[00:18:08.19] - Anthony Campolo And there's a question: is this something that you're getting from the Unsplash API specifically?

[00:18:14.14] - Lucia Cerchie Yes, it is. Yeah, yeah, yeah. This is not the StepZen key here. In order to get a StepZen key, you'd have to sign up, but you do not need to sign up for StepZen in order to use the studio. Your keys are definitely secure. They're never stored on StepZen. They're in local storage on your machine, so you don't have to worry about that. Let's take a look at Unsplash search here. Oh, I must be missing a bracket somewhere. Gonna do this kind of ploddingly, one at a time. Okay, so we see that we get back all this data on all of the pictures that correspond to the query red. This is like going to the Unsplash home page and searching red. Then you can see here there are links that you can use. You can immediately think, oh yeah, if I were building a user interface, I'd probably go in and grab, say, the HTML URL here or this URL here, and then I could surface this. Let's try another query and see the response. Cool. Let's see if I can find... let's try that one. I queried for snowflake, so if I enter this into the browser, we should get a picture of a snowflake.

[00:19:58.06] - Lucia Cerchie There we go. In fact, next month I'll be releasing Advent of GraphQL challenges once a day, and we'll be building a project that uses the StepZen GraphQL Studio to surface a random snowflake with the Unsplash API to a user interface. Keep your eye out on social for that. That's all I've got for this API. I'm going to catch up on questions here.

[00:20:25.05] - Anthony Campolo Yeah, no question. It's just Travis acting a fool like usual. He wanted to see your keys. That was great. What do you think would be a good use case for this in terms of actually bringing this into a real application?

[00:20:43.02] - Lucia Cerchie You could combine it with the results of another application. Say if you got a query string, I don't know, from the Pokemon API and the name of a Pokemon. You could feed that in with a StepZen directive. The first one that comes to mind is @sequence for that one, which Sam can also tell us about, and return a photo that corresponded to that search, say, for your Pokemon, for your web page. You could also probably use that for, like, a Twitter tweet, see what images come up for the text of your tweet.

[00:21:23.18] - Sam Hill Yeah.

[00:21:23.28] - Anthony Campolo There's a new Twitter API, I hear. It's all the buzz.

[00:21:26.11] - Sam Hill Yeah, I was about to mention that.

[00:21:28.01] - Lucia Cerchie Yeah, it's exciting. I think you can tweet from it, which I don't think you could have done before.

[00:21:32.12] - Sam Hill Yeah. And it has a lot of capabilities with threads where you can now, I think, look at threads and then possibly even tweet threads, which you couldn't do previously. So essentially commenting on your own tweets. TBD, that's the saying. But I saw that Travis wants to do an Instagram and Twitter one, so now the capabilities are limitless. Maybe we'll have to bring Instagram in.

[00:21:52.24] - Lucia Cerchie Yeah, we should see if we can build the recursive tweet with StepZen. That would be fun.

[00:22:00.17] - Anthony Campolo What's the recursive tweet?

[00:22:03.04] - Lucia Cerchie You can retweet your own tweet with a single post to the API. I've only seen, like, two different ways of doing it.

[00:22:12.23] - Anthony Campolo I've seen where he retweets his own tweets. I'm like, you can do that? You're allowed to do that? Just retweet your own tweet? Really?

[00:22:20.12] - Lucia Cerchie Yeah. But the thing with the recursive tweet is that it's one tweet that's both a retweet and the original one. It's like the Ouroboros of tweets. It's a pretty fun developer problem.

[00:22:33.13] - Sam Hill All right, my turn?

[00:22:35.06] - Anthony Campolo Yeah, let's do it.

[00:22:35.28] - Sam Hill Let's do it. Cool. Moving you guys over here so I can see my screen. I'm pulling up the same exact thing. What we got here is the GraphQL Studio. Then all I'm going to be doing is going to the combo section. We have a lot of different combinations that you can go in and do here that were built by individuals all throughout our team. That is supposed to be fun, a little more on the idea of fun and seeing how you can bring together really popular APIs that we have in here. But some of them can be really useful. Social media sentiment analysis, if you wanted to get into something like that. I didn't build that one out, but I think it analyzes tweets and maybe also lets you do the Dev.to... I think it maybe analyzes the Dev.to articles as well, if I'm not mistaken. So you can do a lot of different things in here. I think the local currency by IP is actually the example one that we allow to pop up here.

[00:23:32.15] - Sam Hill So you can see currencies by IP address as you would bring that in. But the one I'll be showing today is Google Maps and Yelp reviews. If you pop that in right away, you're going to see that it brings in two rather than just, if you were to go all schemas, bringing in one. The difference there is that we're bringing together two individual schemas that are now going to be in one large schema. So Google Maps and Yelp are all going to come together into a pretty large schema. If you go back into the query, you can see that we have three individual queries in here: StepZen query, Google Maps query, and Yelp query. The difference here and why we have three is because Google Maps is its own individual Google Maps, right? It brings in all the Google Maps APIs, which in this case was REST, and we're bringing in the Google Maps ones like finding a certain destination, finding a geocode, and then finding places, yada yada yada. A lot of different types of queries that you can run and execute and get different results.

[00:24:28.21] - Sam Hill Yelp is the same way, where we have different examples in here that we did, but we have Yelp business that's coming in. If you were to run this one, you'd entirely be able to get it all based on your Yelp API. So we just have one key for each of these. The big thing about a combo, and what we want to be able to provide for individuals that want to see data come together using some of the cool functionality with StepZen directives, is the StepZen queries. What this does is allow us to bring together both of these schemas, the Google Maps schema and the Yelp schema, combine them into one, and then use the @materializer in this case, which is the StepZen directive that puts Yelp businesses directly underneath the Google Maps text search. In this case, we'll be able to see a text search similar to how Lucia was showing with Unsplash, where if you were to do a search for London, UK, you would get types that would come back in response and then name, and you'd be able to get a list of different names that are based in London, UK.

[00:25:27.05] - Sam Hill Right. We're going to be doing mock on this one, so we're not going to be seeing data that's entirely relevant to London when we get it in response, but it will allow us to see what the response would look like. Then over here we'll pop in our little configure keys, and we'll be able to see some data tied together. That's pretty cool. If I were to do it right now and run it, we wouldn't get anything because we don't have mock and we don't have configurations. As expected, we get no data in response. Let's do mock. Then you can see that the configurations go away. It doesn't expect them anymore because we're just going to get mock data in response. Pop in awesome tacos, obviously mock, cool. But it still shows, okay, formatted address, we're still going to expect an address. Ratings. This is what we're going to be able to see side by side: Google is going to be able to provide us a rating as well as Yelp is going to be able to provide us ratings and let us see those in comparison.

[00:26:20.28] - Sam Hill And then we have reviews, yada yada yada, mock stuff. But we know that it's coming in, and we're like, okay, this is a similar response that we would get if we wanted to actually use this data on our front end to compare Google businesses with Yelp businesses and see the reviews coming in associated with a Google business that we're looking up. So let's say we now remove the mock, right, and we add the configuration. Travis isn't going to get it. Nice try. Pop that in there, save. It'll always say try to save it there. No. So if we were to run this right now, we'd be able to get Google Maps query that comes in. That's awesome. I won't go through each individual field here. Lucia and Anthony, if you guys want to ask about anything specific here. But really what we're going to notice is that with this we're going to be getting latitude and longitude, which is going to be an argument that we're going to be able to pass into our business to identify businesses in the same region of Google Maps when we want to associate them.

[00:27:26.19] - Sam Hill We'll be doing it by the latitude and longitude that we pass in. That's all going on with the directive that you can take a peek at. Lucia or Anthony, if you want to share that in the chat, how you can actually tie those two together by the fields that we get from the top that go down into the bottom. But as you can see, we probably won't be getting anything if we were to run StepZen queries here in Yelp Businesses, and that makes sense. We get connector HTTP unauthorized. Why do we get that? Because we don't have Yelp configured. Let's configure it and let's see what we get in response. You guys have any questions or anything at this point? I got you over here, so I'm looking at that.

[00:28:08.19] - Anthony Campolo How would you use this to find good taco places?

[00:28:11.14] - Sam Hill Yeah, well, I'm not going to do tacos in this one. I'm going to do sushi in Coconut Grove, Miami. That's what I'm going to do.

[00:28:18.03] - Anthony Campolo Okay. All right.

[00:28:19.02] - Sam Hill But we'll be able to see it. So let's go. Obviously the mock's not added, so we have both configurations in. I want to change it to do sushi in Coconut Grove, Miami, right? This is just a little neighborhood just south of me. Let's say we want to also be able to include ratings on our Google Maps text search. Let's go into here and take a quick peek. I think it's somewhere in here, text search, right? We go into here, and we want to see if ratings is available. Awesome, ratings is available. It's a float. We'll do that. Then we can also do price, which I think was level. There we go.

[00:29:14.11] - Lucia Cerchie Cool.

[00:29:21.07] - Sam Hill Booyah. Sushi Maki. So we get type in response from Google Maps text search. It's a restaurant, it's food, and it's a point of interest and establishment, which Google is like, this is important to you. To me, I just want to know that it's food and restaurant.

[00:29:34.17] - Lucia Cerchie Right.

[00:29:35.07] - Sam Hill So cool. Name: Sushi Maki. Rating: 4.3. Price level: 2. That's like the little dollar signs that you normally see. Then Yelp businesses, and we have each individual business that comes in associated with that longitude and latitude area, right? We're going to come under the assumption that this is probably the same one, Sushi Maki right here. That's the address that it is, and we can see that it's in Miami, Bayshore Drive, which I know is in Coconut Grove. They get 3.5 as the rating. So now you can see it's a little more critical on Yelp. But then you're able to see the reviews in here. They have a really good wonton, and with really heavy heart, some people are some serious Yelp critics. If you know some Yelp critics out there, everyone's a Yelp critic. But it can be really helpful, and you find out more things as you keep going. It's an array that comes in just in case you want to see if anything may be similar to other destinations and things like that.

[00:30:34.12] - Sam Hill But you probably just need to source the first one and understand that this is going to be the same restaurant of the businesses that you're querying in based on that location that you give it. Yelp is probably giving us other ones in the area that are very similar. Maybe you just want to source the first one. You can do that by going in and downloading this, then spinning up an account and turning that array into a single response and only asking for the individual first one of that array, and you're probably going to get the same result. Then if we were to take this and want to run something very similar just like this over in Postman, we can come over here and punch that in. I already sampled it right here. We can just drop all the other queries, make sure we get rid of everything that we don't want here, because we just want the integration query right here. As Anthony was saying, you could just put this directly in as a fetch call on your front end and use it to provide users on your site the opportunity to compare this business on multiple different APIs like Yelp and Google.

[00:31:50.02] - Sam Hill And then you run it and it's open and accessible because it's a unique endpoint and you get the same exact... oh, I didn't change this from London, UK. Let's go. Oh, did it refresh when I came back? Yeah, it did. So we can just change it here, right? Hopefully I won't hit a rate limit. Let's go sushi in Coconut Grove, Miami. There we go, Sushi Maki. You keep coming down, and it looks like we did get a null on that one. So it's just a matter of sometimes the rate limit came in. But you're able to have Asian Thai Kitchen. So rate limit on this one, but in the previous one we saw where we didn't get the rate limit, and it kind of comes back and forth. But that's really the idea, right? So there we go, Sushi Maki coming in. That's just Yelp saying, hey, you're pinging us too many times, which can happen. Let's find a way of throttling that, which, like I said, you can come in and hit a single one and be able to pull in the individual first one.

[00:32:54.11] - Sam Hill Sushi Maki. Same exact results you expect here.

[00:32:57.27] - Anthony Campolo And do you know if, if we were to do this within the studio interface itself, would those results be cached to save you from these kinds of rate limiting issues?

[00:33:08.08] - Sam Hill So we have cache policy in the @rest and for @graphql. I'd have to see if we have the same kind of cache for it, but I know we have a cache policy and you can make it... I know it's like you have settings that can be on, off, default, or strict or something like that that enables you to be like, yes, I just want this to stay and be cached for the next response to come in unless something you think has been identified or changed. Yeah, you can.

[00:33:38.18] - Anthony Campolo Cool. Yeah, because that's definitely one thing that is nice to get a little bit of help with because as someone who plays with a lot of APIs, you end up hitting these kinds of issues, especially with free APIs. If it's a paid API, they'll let you hit as much as you want because you're paying for it.

[00:33:51.16] - Sam Hill But I definitely don't have a paid Yelp API, so yeah, that'll definitely happen. But you can add those with StepZen. I know you can do it with @rest. It's just a matter of whether you can do it with @graphql, which is the cool part about this: it's bringing together the @rest directive and the @graphql directive, with Google Maps being the @rest and Yelp businesses being handled with @graphql. So to be determined on that one. But yeah, awesome capabilities. Sweet.

[00:34:21.26] - Anthony Campolo And then I'm going to drop a couple links in the chat for some blog posts that we have recently written that show off some of these capabilities. I did one that I'll be going through in an upcoming workshop in a couple of weeks or maybe a month or so, where what I did was I took the Dev.to API and the Google Natural Language Processing API to do what's called sentiment analysis. Sentiment analysis is when you feed in a piece of text and they tell you the quote-unquote polarity of it, basically how positive or negative it is. Then we used StepZen's @sequence directive to query for the comments of a Dev.to blog post. You could take those comments and feed them into the sentiment analysis and find out how positive or negative your blog comments were. So what I said is, find out, like, was your hot take too spicy or not? That's the kind of stuff that once you start thinking about how to chain these APIs together and what you can do with it, you can get really creative and start to do some really cool stuff with very, very little work and little code.

[00:35:30.19] - Anthony Campolo And then I dropped Lucia's in there as well. Do you want to talk just briefly about what your example was?

[00:35:36.09] - Lucia Cerchie Yeah, it integrated Dev.to, Twitter, and GitHub. The template that you make with it is kind of like a custom portfolio site generator with information from your profile on all of those platforms. But the fun thing about it is that it works with Netlify's deploy-to-Netlify button in order to make it so that you can also make a generator for other people to generate their own custom portfolio websites. So it's working with that static platform to kind of insert a little dynamic fun.

[00:36:17.04] - Anthony Campolo Awesome.

[00:36:17.21] - Sam Hill Yeah.

[00:36:18.02] - Anthony Campolo And then as we're closing it out here, is there anything else you two want to talk about or anything you're kind of excited about as we continue to build out the studio and new things that may be in the pipeline?

[00:36:27.23] - Sam Hill Anthony, I'm very excited. I did tacos in Coconut Grove, Miami, and I'll share it with you guys so you can see it. I know, I saw the comments and I was like, ooh, I have some hate in this comment section over here.

[00:36:39.19] - Lucia Cerchie Sushi is the best, but we can accommodate tacos as well.

[00:36:43.13] - Sam Hill Yeah, right, here we go.

[00:36:44.15] - Lucia Cerchie Ooh, El Taquito.

[00:36:45.29] - Sam Hill Yeah, so El Taquito came in, and that's just the first one that came up on this location here for El Taquito. So you get the address there and then, you know, hole in the wall. There you go, your taco joint hole in the wall, as everyone loves to be able to find in all their local areas.

[00:37:03.11] - Lucia Cerchie So I like that there was a little typo there because that represents holes in the walls in my heart. It's like, just the best food comes out of those, like a hole in the wall.

[00:37:16.02] - Sam Hill Yeah, and it shows that the data is real because we wouldn't fake that.

[00:37:20.04] - Lucia Cerchie Yeah, that would be a lot of work too.

[00:37:23.29] - Sam Hill Yeah.

[00:37:25.20] - Lucia Cerchie Yeah.

[00:37:26.11] - Sam Hill Also, I wanted to just say for this one, so people kind of know what's going on, this is a POST, right? You're sending a POST here. So for Postman, just to give a quick rundown there, in here I did a bunch of enters because I didn't know how to drop this down low enough, but I have my variables in here. Just know, if you ever come in here, you have to add these variables. You have to actually pass in your keys if you take this to an outside source outside of just the studio, because the studio handled that for us in there. But in here you'd have to actually pass those keys in there again if you take it to something like Postman. That's all I wanted to say, if anyone else has anything else.

[00:38:03.20] - Anthony Campolo Yeah, just going to drop a couple of links in the chat for stepzen.com if you want to learn more about us. Then we also have a Discord. We'd love to see you there and hang out with us. If you're building anything, we'd love to see that. You can keep up with us as we're doing these live streams and putting out other content about this. This is really just the beginning. This was just last week when we put this out, so we're all very, very excited here on the team about this. We're going to be continuing to do more workshops and live streams and blogs about what you can do with it. If there's anything you'd be interested in learning about, or APIs you think would be cool to integrate, we would love to hear from you and know what you're interested in building. Also keep tuned for Lucia's Advent of Code, which will be running soon.

[00:38:52.03] - Lucia Cerchie Very excited. Advent of Code, that's a separate thing. But Advent of GraphQL.

[00:38:57.02] - Anthony Campolo Advent of GraphQL.

[00:38:58.03] - Sam Hill Correct.

[00:38:58.11] - Anthony Campolo Yes, there we go. It's a play on Advent of Code.

[00:39:01.23] - Sam Hill It all comes together.

[00:39:03.21] - Anthony Campolo Well, thank you so much for hanging out with us. Thank you, Travis and Isaac and Ben for being here. And we will be doing this next week, same time, every Friday at noon Pacific time. And, yeah, that's all for now. Bye, everyone.

Discover Related Content

• Connecting Public and Private GraphQL APIs with StepZen - Deep dive into the @graphql directive used extensively in the studio, stitching Rick and Morty, Storyblok, FaunaDB, and a custom RedwoodJS endpoint into one unified query
• Integrating APIs with StepZen GraphQL Studio - Extended walkthrough with Alex Trost building a multi-source project in the studio combining JSON Placeholder, Rick and Morty, Supabase, and Redwood, with live demos of @materializer and @sequence
• What is StepZen and How Does it Work - Foundational overview of StepZen's @rest, @graphql, and @dbquery directives that underpin every pre-built schema in the studio
• Connecting to Prismic's REST API with StepZen - Alex Trost (who appears in this stream's chat) demos connecting Prismic's headless CMS to StepZen using the same REST connector approach shown in the studio's schemas
• Prismic with Alex Trost - Podcast conversation covering Prismic's slice-based architecture and developer workflow, providing background on the headless CMS category of APIs featured in the studio