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 Steps End stream. You laughing at my head Bob and Lucia?

[00:00:30.24] - Lucia Cerchie Yeah, well, it's a nice, 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 Steps in Streams previously, you probably know all of us. I am Anthony Campolo and we have Lucia and Sam here with us. And today we're going to be showing off the stepson 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 Steps and, and how easy it can be to get spun up with lots of APIs and start working with them. And before we kind of get into showing some code and all that, I'd be really curious to just 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 really Lucy and Sam were a lot deeper into actually building.

[00:01:32.15] - Anthony Campolo So I'd be curious just to hear a little bit about what exactly went into building this. What were your own roles in doing this and what kind of you felt 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. And you can see those surfaced immediately in a little tab that we'll show you in a moment. And 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. Like well documented. There were mock data was available on each one and just the way that each scheme 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 Meter project is definitely the 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. And maybe consider, okay, maybe I want to do a CMS 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 you being able to actually add your configurations and being able to see your own keys and being able to take that schema and just run it right away, it's pretty powerful even before having to actually sign up for stepson, 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 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 data set, if that makes sense. Like if you had a table and it had an 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 the endpoints were you building out?

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

[00:04:25.13] - Anthony Campolo Just like some, I'd say some of the ones that maybe are like some of your favorites. I'm sure you both, I think you both did quite a. Quite a few. So, like where I was gonna say,

[00:04:31.17] - Lucia Cerchie I don't, I don't know if I remember which ones exactly. I really liked 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 kind of removing some of the fluff there. And that was, that was a good lesson that I learned doing that one. Some of the ones that I enjoyed doing were like 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, just fun to make.

[00:05:16.29] - Sam Hill Yeah, I built out specifically like one that I thought was pretty valuable that I wanted to be able to bring forward and was pretty big too, was the HubSpot one. And I spent some time on that one. Because I just think CRMs are something that everyone is really grabbing attention towards. Especially like web based. Like we didn't do Salesforce because Salesforce API is something of its own, but we did HubSpot because we had familiarity with it. And specifically I did. So I built that out and I just thought it would be really resourceful to be able to see like all the different ways that you can tie your CRM. Because a lot of times what CRMs are doing today is talking about all the different ways you can integrate it with all these 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. But then other than that, building out just 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 know, you'll find ones on there that was good to do. Like we'll be showing today like Google Maps and Yelp, which just allows you to be able to see different ratings from different sites and see, okay, what restaurant do I want to go to? Right?

[00:06:30.21] - Anthony Campolo Yeah, I think that's cool because we have a huge range of different APIs, from like the kind of like fun and like hooky and to the like actually real, very useful, like high value for businesses because you've been doing HubSpot work just for Step sign itself. And so I know you've gotten very deep into their API and so you already see the value that a company can get from it. So it makes a lot of sense that you can look at like the tools that we are using ourselves as developers and then think like, how do we actually make this simpler for other developers who also need to use these tools? And the process of like going through just figuring out like even one single API, like it is just so much work, like digging through the docs and figuring out how each bespoke API works. And like all of us have gotten like a lot of experience with that working out, you know, and API company. And so it's really great to have built something that is something I think is really very useful and can save people a lot of time. So 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. So if we see here on the left, we have a list of all of our schemas and both 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, some of which you may not be. And then we also have these combinations over here. And the combinations involve lots of different ones that are already provided in the schemas, but then are kind of connected together. And to just start, I'm going to just 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 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 is that you can just go see the schema. Even if you weren't to use the studio at all, you just 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 just creating these schemas. If we look here at the actual query type, we can see these are some of the steps and isms that we use to make this work. This one specifically, we're not using the Pokemon REST API API. If you have done this before, you likely have used that. But this is actually. There's a GraphQL Pokemon API that is on GraphCDN, and we can feed it into our GraphQL directive and 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. But if we look at our query now, we start off by giving you just 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 Pokemons, let's just get their name and then let's only pull in five of them. Now we're going to see that 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 the 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. And then we can also just check out some autocomplete as well. You hold control space and then you get all sorts of information in terms of what can you 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 be able 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 kind of a little jump to a preview there. But you're able to kind of go through there and it would be able to provide all the fields as well to where you can check it out and see what else you want to pull in in case if, you know, previews sometimes don't pull in all the fields. So 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 like these kind of graphical. Graphical explorer, graphical playground. There's a lot of different terms for 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 Pokemons and then we have this results object which returns the Pokemon item and then 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 Stepson and what makes Stepson such a unique platform is that it allows you to take multiple different endpoints and combine them all into one unified graph. And so if we want to then bring in say the SpaceX API. So this is another common API as well. And we only. Let's do is I'm going to pull that out and I'm just going to grab this for a second.

[00:12:10.25] - Sam Hill You're moving quick right there. But really it's just like this is just any standard graphical where you can make any modifications on it that you want and you can move things around and inject Pokemon into SpaceX query for say right here and be able to 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 got the SpaceX coming in, but I also want to be able to say query both of them at the same time. If we just take this, this one big query and we insert our Pokemon's query and our SpaceX query, we can then run this and then we get everything back together. Right now we can see that all of the work of combining these schemas, stitching them together, 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 then if we wanted to say, 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, we didn't have to even create the query types. We have everything we need to just start writing the queries and getting the data back. And then 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, this is our specific endpoint that has been created for us. So if we want to curl this endpoint or if we want to hit it within insomnia or anything like that, we could do that as well. And it even filled in our query for us. So now we're seeing that we can get this back over here. And then the last thing that I want to show before I hand it off to Lucia is if you've ever worked with Stepzen before, you have probably created some sort of projects that has like an index graphql and some schema types and all of that. And if you wanted to auto generate that from this endpoint you create, you can just click publish and then you can download this and it zips it up for you. You can open up this zip and your favorite code editor and then we can actually see all of the code that goes into creating this. And my computer decided to poop itself for a second. Now we can see our actual project of 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 We see here we have it's sound

[00:14:48.12] - Lucia Cerchie 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 you look here in our index GraphQL, you can see how the steps in ISMS work. It already took these different files and basically combine 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. And then we can see the schemas which we were looking at before with our endpoints, from the SpaceX endpoints and from the Pokemon endpoints. So that is the first, first step that we wanted to show you and then want to also show you how to do some more complex things with keys and things like that. I'm going to stop sharing and then go ahead and take it away from here.

[00:15:44.05] - Lucia Cerchie Lucia. Yeah, yeah. I also wanted to add, if you're not familiar with that at GraphQL syntax, that's because that's a steps in specific capability. It's a directive that you get to use when you use the steps in 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 free image kind of resource and there are a lot of very beautiful images available. I use this in my own demo projects all the time just to use placeholder images. The API itself is. Is very useful, except I realized I wasn't sure I was only sharing that tab. Maybe Anthony can drop the website in the chat so you can. 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 requests are there working 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 Step Sense Studio. This is a good example of that. You would hit configure and here you enter your Unsplash client id. The nice thing about using the Step Sense studio is the GraphQL implementations here specifically leveled the playing fields 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? Like sometimes you need bearer, other times it's API key with unsplash, it's client id. But anytime you use one of these steps and 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, like from the. From the unsplash API?

[00:18:14.14] - Lucia Cerchie Yes, it is. Yeah, yeah, yeah. This is not the step send key here. So that's because in order to get a steps in key, you'd have to sign up, but you do not need to sign up for steps in order to use the studio. Your keys are definitely secure. They're never stored on steps and 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. Must be missing a bracket somewhere. Do this kind of plottingly one at a time. Okay, so we see that we get back all this data on all of the the pictures that correspond to the query red. So this is like going to the unsplash homepage and searching red. Then you can see here there's 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 surfaces. Let's try another query and see the response. Cool. Let's see. I can find. Let's try that one. So this 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 steps in GraphQL Studio to serve as 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. 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 had the name of Pokemon you could feed that in with steps and directive. The first one that comes to mind is at 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 webpage. You could also probably use that for, like, a Twitter tweet. See what random images come up for the text of your. 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 ask you 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 the threads to where you can now, I think look at threads and then possibly even tweet threads, which you couldn't do previous. 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. So 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 Stepson. That would be fun.

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

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

[00:22:12.23] - Anthony Campolo different ways 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. So it's like the Ouroboros of tweets. It's pretty fun. Like, 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. So we all know. And 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 was built by individuals all throughout our team. That is just supposed to be fun. A little bit more on the idea of fun and seeing how you can bring together really popular APIs that we have in here to be able to bring together. 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 allows you to also maybe do the dev2 where you would bring it in and maybe be able to do. I think it maybe analyzes the dev2 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 us to be able 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. So 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. And the difference is there is that we're bringing in 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. And then if you go back into the query, you can see that we have three individual queries in here of steps in query, Google Maps query, and Yelp query. Now, the difference here and why we have three is because the Google Maps is let alone individual Google Maps, right? So 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 be able to get different results.

[00:24:28.21] - Sam Hill Yelp same way where we have different examples in here that we did. But we have Yelp business that's coming in, and 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. Well, 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 steps and directives, is the steps and queries. And what this does is allows us to be able to bring together both of these, I would say, schemas, the Google Maps schema and the Yelp schema, combine them into one and then use the app materializer in this case, which is the steps and directive that puts Yelp businesses directly underneath the Google Maps text search. And so in this case, you know, we'll be able to see a text search as if you were to similar 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 in response, but it's kind of will allow us to see what the response would look like. And 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. So if I were to do it right now and run it right, we won't get anything because we don't have mock and we don't have configurations. So as expected, we get no data in response. Let's do mock and then you can see that the configurations go away. It doesn't expect it anymore because we're just going to get mock data in response. Pop in awesome tacos, obviously mock cool. But it's, you know, it still shows. Okay. Formatted address we're still going to expect an address ratings. So this is what we're going to kind of be able to see side by side is 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 be able to see those in comparison with another one, another.

[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 a front end to be able to compare Google businesses with Yelp businesses. Right. And be able to 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 and come in. Pop that in there. Save. It'll always say try to save it there. No. So if we were to run this 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. Lucy and Anthony, if you guys want to ask about anything specific here. But really what we're going to be able 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 be able to identify businesses in the same region of Google Maps for when we want to be able 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. And if Lucy or Anthony, you want to share that in the chat on 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 steps and queries here in Yelp businesses. And that makes sense. And we get connector HTTP unauthorized. Why do we get that? Well, because we don't have Yelp configured. Let's configure it and let's see what we get in response. Guys, any questions or anything at this point? I got you over here. So I'm looking at that. Yeah.

[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. 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.

[00:28:19.02] - Sam Hill But. But we'll be able to see it. So. So let's go. And then obviously the mock's not added, so we have both configurations in. So I want to change it to do sushi in Coconut Grove, Miami. Right. So this is just a little neighborhood just south of me. And let's say we want to also be able to include Ratings right. On our Google Maps text search. So let's go into here and let's take a quick peek. I think it's somewhere in here. Text search. Right. So we go into here, and we want to be able to see if ratings is available. Right. So we're like, awesome. Ratings is available to float. So 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 and response from Google Maps. Text search. It's a restaurant. It's food. 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 a 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. So that's like the little dollar signs that you normally see. And then Yelp businesses, and then we have each individual business that comes in associated with that longitude and latitude. The area. Right. So 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 that that is in Coconut Grove, won't say the neighborhood, but they get 3.5 is the rating. So now you can see it's a little bit more critical on Yelp, but then you're able to see the reviews in here. You know, they have a really good wants on 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, so. But it can be really helpful and you find out more things as you keep going. And it's an array that comes in just in case if, you know, 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 be able to source the first one and understand that this is going to be the same restaurant of the businesses that you're growing in based on that location that you give it. Yelp is probably giving us other ones in the area that's very similar. Maybe you just want to source the first one. You can do that by going in and downloading this and being able to take that down and then spin up an account and turn that array into a single response and only ask 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 we want to run something very similar just like this over in Postman, we can come over here and we can punch that in and I already sampled it right here, and 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 be able to see this on your front end and be able to use it to, you know, 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. So let's go. Oh, did it refresh when I came back? Yeah, I did. So we can just change it here, right? And we can go. Hopefully I won't hit a rate limit. And let's go Sushi in Coconut Grove. There we go, Sushi Maki. And 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 one previous we saw whether 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. And that's just, you know, Yelp saying, hey, you're pinging us too many times, which can happen. So 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, the like the Studio interface itself, would those results be cached to save you from these kind of like rate limiting issues?

[00:33:08.08] - Sam Hill So we have cache policy in the at rest and for at 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 like on, off default or like strict or something like that that enables you to be able to be like, yes, I just want this to stay and be cached for the next response to come in. Unless if something you think has identified or been 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 a lot of APIs, you know, you end up hitting these kind of issues, especially wearing like free APIs. You know, if you're it's 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, I definitely don't have a paid Yelp API. So yeah, that'll definitely happen. So yeah, but you can add those with Stepson. I know you can do with that rest. It's just a matter of if you can do it with @GraphQL, which is the cool part about this is it's bringing together at rest directive and the GraphQL directive with Google Maps being the at rest and then being able to handle the app GraphQL with Yelp businesses. 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 on an upcoming workshop in a couple of weeks or maybe a month or so, where what I did was I took the Dev2 API and the Google Natural Language Processing API to do what's called sentiment analysis. And sentiment analysis is when you feed in a piece of text and they tell you the quote unquote polarity of it, basically like how positive or negative it is. And then we use stepson's at sequence directive to query for the comments of a dev to blog post. And you could take those comments and then feed them into the sentiment analysis and then find out, like, how positive or negative your blog comments were. So what I said is find out, like, how was your hot take too spicy or not is what I was saying. So that's the kind of stuff that once you start thinking about, like, how to chain these APIs together and what you can do with it, like, you can get really creative and start to do some really cool stuff, like 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. And 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. From all those platforms. Right. But the fun thing about it is that it kind of. 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 function.

[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 for, like, as we continue to, like, build out the studio and like, new things that may be in the pipeline?

[00:36:27.23] - Sam Hill Anthony, I'm very excited. I did a 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. In this comment section over here.

[00:36:39.19] - Lucia Cerchie Soup 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 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 know, you get the address there and then, you know, hole in the wall. So there you go, you get 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. That like, represents holes in the walls. In my heart, it's like very. Just the best food comes out of those, like a whole.

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

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

[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. You know, there's a. There's a post, right. You're sending a post here. So for Postman, just give it a quick, quick rundown there. And then in here I did a bunch of enters because they 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 be able 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 a third, like 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 our stepzen.com if you want to learn more about us. And then we also have a discord. We love to see you there and hang out with us if you're building anything. We love to see that you can keep up with. As we're doing these live streams and putting out other content about this. This is really like just the beginning. This was just last week is when we put this out. So we're all very, very excited here on the team about this and we're going to be continuing to do more workshops and live streams and blogs about what you can do with it and 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 to know what you're interested in building. Then also keeps tuned from Lucia's advent of code that will be running soon.

[00:38:52.03] - Lucia Cerchie Very excited. Advent of code. That's a separate thing, But Advent and 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 plan. 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.