Intro to GraphQL - Mintbean

Episode Description

A beginner-friendly GraphQL workshop covers core concepts, live demos with the Rick and Morty API, fetch requests, and Q&A for hackathon participants.

Episode Summary

This workshop, hosted by Lucia and Anthony Campolo for a Mint Bean hackathon sponsored by StepZen, introduces GraphQL from the ground up for developers of varying experience levels. The session begins with a restaurant analogy to explain how GraphQL differs from REST APIs — instead of receiving excess data and filtering it, you request exactly what you need. Anthony then demonstrates live queries using the Rick and Morty GraphQL API playground, showing how schemas, types, and queries work together, before replicating the same request in Insomnia to illustrate that GraphQL operates through a single POST endpoint rather than multiple HTTP verbs. The workshop progresses from these visual tools to writing a vanilla JavaScript fetch request, then to using the GraphQL Request library within a basic React setup, tracing the path from zero dependencies to a minimal client integration. Throughout, the presenters field audience questions on topics like Apollo's role in the ecosystem, how GraphQL fits with MVC and the MERN stack, API key management, and the distinction between GraphQL and SQL. The session closes with encouragement for beginners feeling overwhelmed, emphasizing that grasping even a fraction of the material is a productive starting point, and directing participants to blog tutorials and upcoming mentorship hours.

Chapters

00:00:00 - Introductions and Background

Lucia and Anthony introduce themselves, both highlighting their backgrounds as former teachers who transitioned into tech careers. Lucia shares her path from teaching to digital marketing to software development at StepZen, encouraging other career changers to value their prior experience. Anthony mentions his history as a music teacher and late career changer.

The introductions set a welcoming tone for the workshop, emphasizing that participants from all backgrounds are valid in the tech space. Lucia offers to discuss how non-traditional experience can inform the job search process, and both presenters establish themselves as approachable mentors for the hackathon ahead.

00:01:31 - What Is GraphQL and the Restaurant Analogy

Anthony frames the session as a ground-zero introduction to GraphQL, contrasting it with REST APIs and the typical CRUD operations most bootcamp graduates learn. Lucia introduces the popular restaurant analogy: the client is the customer, the server is the kitchen, and the API is the waiter running between them, explaining how REST often returns unwanted data alongside what you actually requested.

Lucia then highlights GraphQL's key advantage — you request only the data you need and receive exactly that, eliminating the need for extensive filtering logic. This foundational concept sets up the rest of the workshop and connects back to a prior session by Brian that combined StepZen with GraphQL, noting that this talk isolates GraphQL itself for clarity.

00:03:52 - Live Demo with the Rick and Morty GraphQL Playground

Anthony shares his screen and navigates to the Rick and Morty GraphQL API endpoint, demonstrating the graphical playground interface. He walks through the schema and documentation panels, showing how character types have fields like name, status, and species, and how you construct a query to request only the specific fields you want from the results.

The live demo reinforces the core GraphQL concept of selective data retrieval. Anthony builds a query step by step, adding fields like name, status, and species to show how the response mirrors exactly what was requested. He also emphasizes that GraphQL is decoupled from any specific front-end framework, countering the common misconception that it's tightly tied to React.

00:09:13 - Insomnia Demo and HTTP Verbs in GraphQL

Anthony transitions from the graphical playground to Insomnia, a tool similar to Postman, to demonstrate making raw API requests to the same GraphQL endpoint. He shows how sending a POST request without a query body produces helpful error messages, progressively building up to a working query to illustrate how GraphQL communicates over HTTP.

This segment addresses a key audience question about where the POST method is specified and how GraphQL handles HTTP verbs differently from REST. Anthony explains that GraphQL uses a single endpoint for all operations, replacing the get/post/put/patch pattern with queries and mutations, simplifying the mental model for developers transitioning from RESTful architectures.

00:13:38 - Q&A on GraphQL Ecosystem and Architecture

The presenters field a series of audience questions covering how GraphQL integrates with the MERN stack, whether it works with MVC architecture, its relationship to SQL, and what tools like Altair compare to Insomnia. Anthony explains that GraphQL serves as a middle layer connecting front ends to back ends and fits naturally into existing architectural patterns.

Additional questions touch on FaunaDB's GraphQL endpoint, how StepZen lets developers build custom GraphQL APIs over various backends, and the distinction between GraphQL as an API query language versus SQL as a database query language. The discussion helps participants understand where GraphQL fits in the broader development landscape and how different tools and services relate to one another.

00:18:23 - GraphQL.org, Terminology, and Apollo's History

Anthony walks through the official GraphQL homepage, highlighting it as the best starting resource for understanding terminology and core concepts. He demonstrates the site's hello world example, showing how types are defined in the schema definition language and how queries can accept arguments to request specific data, reinforcing patterns from the earlier live demo.

A question about Apollo leads Anthony into a brief history of the Meteor project and how its team pivoted to become Apollo, building prominent open-source tools like Apollo Server and Apollo Client. He clarifies that while Apollo is a major part of the GraphQL ecosystem, it is not required — developers can use alternative libraries or build clients from scratch, which is why the workshop focuses on fundamentals rather than any specific tooling.

00:29:12 - Fetching GraphQL Data with Vanilla JavaScript

Anthony introduces a GitHub repository he prepared for the workshop, then demonstrates making a GraphQL request using the browser's native Fetch API with no dependencies. He walks through setting up the POST method, headers, and JSON-stringified query body, then shows how to drill down through the returned data object to access the array of character results.

The demo uses a minimal HTML and JavaScript setup with Live Server, emphasizing that GraphQL requests can be made without any frameworks or libraries. Anthony explains promise resolution with .then chains and how to navigate the nested data structure, giving participants a clear picture of what happens under the hood before any abstraction layers are introduced.

00:37:40 - GraphQL Request Library and React Integration

Anthony moves to a branch of the repo that uses the GraphQL Request library within a basic React setup, showing how it simplifies the fetch process by handling query string formatting through the gql template tag. He walks through installing the necessary dependencies and configuring the GraphQL client with the endpoint, demonstrating the same query now running inside a React application.

The segment addresses audience questions about connecting GraphQL data to React state, with Anthony explaining how useState could be used to store and display the fetched results. He frames GraphQL Request as a middle ground between raw fetch calls and more complex clients like Apollo, giving participants a practical stepping stone for building real applications during the hackathon.

00:45:59 - Encouragement for Beginners and Learning Advice

An audience member privately shares feeling overwhelmed as a recent bootcamp graduate, prompting a reassuring discussion from the moderator, Lucia, and Anthony. The moderator shares that even senior developers typically grasp only a portion of new material on first exposure, and Lucia emphasizes that no question is too simple to ask, recalling her own early struggles with basic HTML.

Anthony reinforces that confusion is expected and even healthy, explaining that the workshop intentionally addressed multiple skill levels. The presenters encourage participants to focus on understanding endpoints and queries as a starting point, then build outward through hands-on experimentation and mentorship during the hackathon's coffee and code hours.

00:51:57 - API Keys, Final Questions, and Resources

Anthony addresses remaining questions about API key management, pointing to a blog article by a colleague and emphasizing that keys should never be exposed in client-side code. He also clarifies that a small project could start with just HTML, CSS, JavaScript, and GraphQL, with no heavy framework required, while noting that JavaScript will be the primary language for hackathon resources.

The session transitions to Brian, who returns to recap the overall workshop arc from backend to frontend and directs participants to StepZen's blog for additional tutorials on consuming GraphQL APIs with various libraries. He reassures attendees that the breadth of material covered is intentionally ambitious and that the goal was to provide enough foundation to get started, not to master everything in one sitting.

00:59:26 - Wrap-Up and Next Steps

The moderator brings the session to a close, summarizing the wealth of resources shared throughout the workshop and offering participants two options: continue with live questions or take a break before the upcoming coffee and code hour at 4 PM Eastern. The group decides on a break, and logistics are clarified about the next Zoom link being posted in the Discord channels.

Brian posts additional blog links in the Discord for participants who prefer learning by reading, and the moderator thanks the entire StepZen team for their content and mentorship. The session ends on an encouraging note, with the presenters reaffirming their availability for one-on-one help throughout the hackathon week.

Transcript

00:00:07 - Lucia

I'll start by introducing myself. I am a software developer from Arizona. I work at StepZen. I was formerly a teacher for several years before transitioning into digital marketing — hey, fellow Arizona! — and then into tech and StepZen. So I see you all, you career changers, and I think it's really good to have different experience. Often people underestimate the value of their past professions when they're moving into tech. So if that's something you want to bring up with me in coffee and code, I'd be happy to chat about it, talk to you about how my digital marketing experience can kind of inform the job search there. But also, debugging is one of my favorite things to do. So I've introduced myself. I'll turn it over to you, Anthony.

00:00:59 - Anthony Campolo

Hey. I already spoke a little bit about myself for the keynote, but my name is Anthony Campolo and I also have a teaching background. Funny enough, that was something I didn't mention in my keynote. I'm a late career changer and I was originally a music teacher. I've changed some of my avatars. A couple of them floating around still have the picture of me with the upright bass.

00:01:27 - Lucia

So yeah, fellow teachers in the house.

00:01:31 - Anthony Campolo

Yeah, yeah. So we're here to talk to you about the very, very basics of GraphQL. And I'm super excited because we get to really go from ground zero here. And you have a really cool metaphor that we use to describe this. It's really useful, especially for people who are coming from the REST world. For me, when I went through my bootcamp, I didn't learn GraphQL at all. We did the normal kind of RESTful APIs. And for anyone who isn't familiar with that, it's like GET, POST, PUT — those kind of things. And when you hit an endpoint and you want to do something at that endpoint, you want to either get a bunch of stuff, write some stuff, or update some stuff. CRUD, as someone says in the chat. So that's not quite the same thing that we do with GraphQL. So why don't you go ahead and set us up for how we like to think about this?

00:02:37 - Lucia

Of course, of course. And before that, I just wanted to mention — if Brian's workshop seemed like a lot coming at you at once, it is two tools at once: it's StepZen and GraphQL. So in this one, we're taking a step back just to look at what GraphQL is. If Brian's workshop seemed like a lot, you can, after this workshop, go back and review the link to his video. I think it'll become a lot clearer. But yeah, there's an analogy that's used a lot to teach APIs. The client is kind of like a customer at a restaurant, the server is kind of like the database, and the API is the waiter running back and forth. And normally, if you're like me when you first learned REST APIs — you send a request to the database and it's like, okay, I need a burger and fries — a bunch of other data comes back with it, like a turkey and a fruitcake. And you have to write all this filter logic to filter it all out.

00:03:38 - Lucia

And GraphQL really blew my mind because you don't have to do that. You just request what you want and that's what you get. It just simplifies so much of the app-building experience. So I'm really excited for you guys to learn about it today.

00:03:52 - Anthony Campolo

Yeah, and one of the things that I really like about GraphQL is that it's set up in a way where it's very easy to actually get started with if you have a GraphQL endpoint already. So I'm going to drop a link in the chat and then I'm also going to share my screen — someone needs to give me the ability to share my screen, I believe. Yeah, that was my fault because I had hopped off for a second, so I wasn't sure if we were going to a different room for this. All right, cool. So anyone can go to this endpoint here. It's just rickandmortyapi.com/graphql. And this is fairly similar to what we were looking at with Brian. He also had — this is what's called a graphical playground. And it's a way to make GraphQL queries. One of the things that's really cool about GraphQL is there are a lot of similarities no matter what GraphQL tools you're using. And one thing that we're always going to have is these two things over here. We have our schema and we have our docs, and this lets you know what GraphQL API you want to query from.

00:05:22 - Anthony Campolo

So we see here that we have these character types, and character has things like a name, gender, and location. And if we look here at Docs, this is actually how we can interact with our GraphQL API. So we want to do a query for characters and get a list of those characters back. If we look here, we have this characters type and it has results. And this is basically like an array. So if you've ever seen an array in JavaScript or another language, you have the brackets and the character objects. And we can ask for whatever we want. So going back to that analogy of ordering exactly what we want — you don't have to order the whole character. If we just wanted the name of the character, we could do that. So how do we do that? First, we want to write a query.

00:06:31 - Moderator / host

So.

00:06:32 - Anthony Campolo

So we literally say "query." We tell GraphQL that we want to write a query, and then what we want to get out of this query. First let's give our query a name — we're gonna call this getCharacters. And then the actual query is going to be for the characters. We need to say that we want the results. This is just a quirk of this one specific GraphQL API. You don't necessarily need to create your schema in this way, but normally it would just be like characters name. That's just one weird quirk of the Rick and Morty API. But I still like using it because it's really nice. But right now, if we were to run this query, we're gonna get an error. That's interesting. Nothing's happening, huh? Okay, let's try.

00:07:45 - Audience questioner

Hey, Anthony. Underscore.

00:07:46 - Anthony Campolo

Underscore. GraphQL.

00:07:50 - Audience questioner

That's where.

00:07:50 - Intro / host artifact

Oh, this.

00:07:51 - Audience questioner

Oh, this.

00:07:51 - Anthony Campolo

You're not.

00:07:51 - Audience questioner

Okay.

00:07:57 - Anthony Campolo

Okay, okay. For some reason it was not handling the errors correctly. I'm not sure what the deal was with that. I was trying to get it to give me an error, but this is the correct thing that will actually give you back the answer. So we do a query — it was getCharacters — and we want, let's say in addition to the name, we also want the status. So now we can see that whatever we write on the left is what we're going to get back. So let's see what other stuff we could get here. We could also get the species. So if we add species here, we now get the species. This is what's really cool about GraphQL: you have the ability to query it and get exactly the data you want back. And right now this is totally decoupled from any sort of library or JavaScript tool. Right now there really is no front end whatsoever. So it's a common thing that people think of GraphQL as being really tightly coupled to something like React, but that's really not the case.

00:09:13 - Anthony Campolo

It's entirely its own thing. It's actually a specification that is handled by a whole foundation. But if you're curious about all that, I definitely recommend looking into the history of GraphQL. I think it's a really interesting project. But another thing I wanted to show here is that we don't need to use this graphical playground. We can just make an API request directly to this endpoint, and this should actually give me the error message I was hoping to get earlier. So this is Insomnia. And Insomnia is a lot like Postman. It's a cool tool for just interacting with APIs however you want. So right now we are going to make a POST request to this same endpoint that we were using before. Right now we're getting an error back, because to do GraphQL you have to send a query. So we haven't sent a query or anything at all, so it should give us an error back. And not only does it give us an error back, it knew that we were trying to make a POST, so it's giving us a specific error saying "POST body missing."

00:10:31 - Anthony Campolo

"Did you forget to use body-parser middleware?" If you've ever built out a backend with Node or Express or anything like that, you may have brought in a body-parser library. And there is a GraphQL query setting in Insomnia. Insomnia has a lot of really nice GraphQL integrations already built in. So if we do this, we're still not going to send a query, but we're going to do that. And now it's giving us a different error. Now it knows that we have tried to send a string, but there's no string. So it's saying "must provide query string." And if we try to make a query, it's going to give us an error saying that we haven't actually made a query. And before, this is what I was trying to get the graphical playground to error out with. Now it's letting us know that we actually have to give it more information. And then if we give it the actual query that we want, we can still get the data back just like we were previously.

00:11:43 - Anthony Campolo

Cool. So I'm going to stop sharing just for a quick second. Are there any questions so far for what we've gone over?

00:11:55 - Audience questioner

We have a couple. There's one interesting question which maybe you can elaborate on. Drew asked, where's the POST specified? Do you want to talk about how GraphQL architects its REST endpoints?

00:12:09 - Anthony Campolo

Yeah. As we were talking about with CRUD and REST, you have things like GET, POST, PUT, and PATCH — different HTTP verbs. And that's what is different about GraphQL, because you just have a single endpoint with GraphQL. So instead of having different endpoints that you send different verbs to, you have a single endpoint that you send everything to, and you just send generic queries and specify in the query what you want to do. So everything is going to be a POST, but a POST isn't always going to create something or write something like you normally would think. And when I was writing the query and I wrote the word "query" — if you want to actually write to a database or update something, you would write mutations. So you have queries and you have mutations. There's a decent amount of terminology that goes along with this. But you don't really have to worry about the HTTP verbs anymore. You don't have to worry about GET, POST, PUT, and PATCH or any of that stuff, because the kind of equivalent HTTP verb is always going to be specified within the query itself.

00:13:38 - Lucia

Right. And then Sergio asked if this example uses StepZen — just the GraphQL playground. We're just using the GraphQL playground. If you need to review how to integrate StepZen, you can go back to Brian's talk. And then Panos — I hope I'm pronouncing that correctly — says, does your example just now use StepZen, or would Altair GraphQL client work the same as Insomnia? Are you familiar with Altair, Anthony?

00:14:03 - Anthony Campolo

I actually don't think I've ever heard of it.

00:14:06 - Lucia

I just googled it and I don't know if it'd be the same as Insomnia. Because it looks like — I mean, unless you're meaning, is this a way to look at requests more easily, in which —

00:14:19 - Audience questioner

Like Insomnia, [unclear] — I can pitch in. They're very, very similar. You can use one or the other. I'm not sure what the advantages are of one over the other, but they're definitely similar.

00:14:33 - Anthony Campolo

Okay, so there's a good question about how this relates to the MERN stack. The MERN stack is Mongo, Express, React, and Node. GraphQL can be integrated as essentially a middle layer there. So if you wanted to take your Mongo and Express backend and expose that as a GraphQL endpoint to your React front end, that is how you would integrate GraphQL into the mix. Now, this is a really interesting question because if you've already got that stack set up, there's not really a whole ton of benefit in introducing GraphQL into the mix, unless you want to bring in all the GraphQL tooling that comes along with it. It's more so — if you were to think about the type of project you built that MERN stack with, and you're going to do a greenfield version of that — if you were to think about building that from the ground up with GraphQL, that's how you get your backend and front end really nicely integrated in a way that they can speak to each other well. So it's kind of a question of what benefit you're going to get from introducing GraphQL and whether you already have a full stack that has a coherent way of speaking to each other.

00:15:52 - Anthony Campolo

Because part of what is really nice about something like Mongo is that it's very much a document kind of thing where you're throwing JSON at it. So a lot of what GraphQL is doing is meant to model some of the experience you get from working with a MERN stack. But they're philosophically very much aligned in terms of what they're going for and the type of development experience you get. Hopefully that made sense. Yeah. Thank you so much for answering that. I really appreciate it. Cool. Yeah. And also just to clarify for the person who was asking about where the POST was — right now this is just using Insomnia as basically a graphical editor to indicate what we're sending in terms of GET, POST, PUT, or PATCH. What we're going to go on to next is actually how to make a fetch request and actually specify what is a POST request and what is not. So we're going to get a little bit deeper into that in a second.

00:16:55 - Anthony Campolo

But if there are no more major questions right now, I think we can move on to the next thing. Looks like there are still a couple more. "Is there a design architecture?" — if you can specify a little bit what you mean by design architecture... Oh, so they're asking if you could use MVC with GraphQL. Definitely. So if you think of MVC as model-view-controller, your model and your views would talk to each other with GraphQL, and your controller is like the resolvers in GraphQL. Don't worry too much about what a resolver is. The point is that you can think of MVC and GraphQL as fitting together fairly well if you just think of your view and your model as your front end and your back end talking to each other, and the thing in the middle being the controller. That's the GraphQL equivalent. All these things fit in really nicely together because it's mostly just a universal way for front end and back end to talk to each other. So if you think of MVC, the MERN stack, or any of this kind of stuff, it's all about just connecting front ends to backends.

00:18:15 - Anthony Campolo

That's really the crux of what GraphQL is doing.

00:18:23 - Lucia

All right, so one more question — MSAD says, what is the minimal prior knowledge needed to get into it?

00:18:31 - Anthony Campolo

So hopefully what we're doing right now —

00:18:33 - Lucia

Yeah, that's our goal: to be accessible to all starting points.

00:18:40 - Anthony Campolo

Yeah. And there's actually one other thing I realized we still didn't really go over. Let me share my screen again. So this is the GraphQL homepage, and I really recommend people check this out. If you don't end up on this site at least one time in the next week, then you probably missed something, because this is really the best home-base resource for general GraphQL. If you just want to understand GraphQL terminology and all that kind of stuff, this is a really good place to go. And what it does on the homepage is it walks you through a very, very simple Hello World example where you first define your type. So our type is going to be a Project, and our Project is going to have a name, a tagline, and a bunch of contributors. This is much like when we were on the Rick and Morty endpoint. We had a character type and that character had a name, it had a status, and it had a list of episodes it was on. This is the same idea. So this is how you define your schema.

00:19:53 - Anthony Campolo

That's the schema definition language — another GraphQL-ism. And then this is your actual query, which we were showing in the graphical playground and in Insomnia. You could write the word "query" in front here, or you can leave it off and it infers that it's a query. This is a little different from the query we ran. The query we ran would have been "projects" instead of "project," and we got a list back. Whereas with this, they're actually asking for a specific project and providing an input for which project they want — providing the name "GraphQL." So you can actually provide arguments to your queries as well. And then they want specifically the tagline for that project. So this is the query, and then this is the result. You get back the tagline for the project, the project being GraphQL and the tagline being "a query language for APIs." So this is a very, very simple Hello World. And then you can check out the actual docs — they're very well written and they really walk you through step by step.

00:21:18 - Anthony Campolo

So this being another example of a very simple query: saying that I want to get me and I want my name, and my name is of course Luke Skywalker. Cool. Let's see. Any other questions that came in?

00:21:38 - Lucia

Yeah, I like Claude's question. "Is there a difference between vanilla GraphQL, quote-unquote, and how we'll be using it over the next few days?"

00:21:44 - Anthony Campolo

Yeah, you want to take that one?

00:21:48 - Lucia

I would say it's a good question for me to think about. I would say kind of yes and no. We take a lot of the work of writing some of these things out for you, and yet you'll still be writing GraphQL files to deploy those StepZen endpoints.

00:22:07 - Anthony Campolo

Yeah, yeah. I would say there's going to be a mix of vanilla GraphQL and then some StepZen-isms. And Brian alluded to that just a little bit in his presentation. The way you can think about it is that anything you're going to be doing on the front end to actually make the GraphQL queries — that's what's going to be generic to any way of working with GraphQL. And then the stuff related to the actual API you're creating, like anytime you're using the StepZen CLI or anything like that, those are the things that are specific to StepZen. But even still, within the stuff you're doing that's specific to StepZen, it all still follows the GraphQL spec in terms of how you define your types and that kind of thing. So vanilla GraphQL — there's really not that much difference between how people implement it and how it's specified, because you actually have to follow the spec fairly closely to make it work at all. Cool. So there's a question about Apollo. "What role does Apollo play in GraphQL?" This gets at the history of GraphQL, and it's actually quite interesting, because there was a project called Meteor. And Meteor was an attempt to make a full-stack JavaScript framework that was fully integrated and really nice, much like you would think of maybe RedwoodJS today.

00:23:46 - Anthony Campolo

And the team behind Meteor ended up having to pivot because they got a lot of VC dollars and eventually kind of ran out of runway. And that's how these things go. And then they got into GraphQL essentially and turned into Apollo. So Apollo is basically an outgrowth of Meteor. They saw where the real value they could add was in this kind of mediating layer between the front end and the back end. And they essentially had a head start in thinking about these problems and how you can sync the front end and the back end. And so you ended up with this team, Apollo, that built a lot of open-source libraries like Apollo Server and Apollo Client. You've got a wide suite of open-source tools all under the banner of Apollo. And then Apollo itself is a company that also sells services that go along with those products. So when you look at GraphQL examples online, it's pretty common to see Apollo Server used for the server backend and Apollo Client for the client front end. In fact, RedwoodJS is made up of Apollo Server and Apollo Client.

00:25:10 - Anthony Campolo

Although this is kind of starting to shift a little bit because you can swap out different pieces, but it's a huge rabbit hole you don't need to necessarily go down. So the important takeaway here is just that Apollo is a very prominent part of the GraphQL ecosystem with numerous tools that many people use, but you don't need to use Apollo to do anything in GraphQL. Anything you can do with these different Apollo tools, there are other equivalents from other libraries and other companies, or you can just build this stuff yourself. At any point in time you could just make your own client — you could write all of this stuff entirely from scratch if you want. You don't ever have to use any of these open-source tools. It's just about what tools are out there, how you can leverage them, and how they all fit in. So this is why it takes a lot to wrap your mind around all these different things and how they relate to each other.

00:26:03 - Anthony Campolo

But this is why we're not going to teach you Apollo in this intro workshop — we're going to build up from an even more base layer than that.

00:26:13 - Lucia

Right. And then we've got a lot of messages coming in, which is awesome. But I want to get to Ms. Daniel On's question up at the top. She says when describing the data, quote-unquote, "this is different from the actual model schema." Daniel, can you elaborate on that a little bit?

00:26:29 - Anthony Campolo

So he's asking — oh, sorry, go ahead. Oh no, yeah — because on the GraphQL website you have a type, Project, name String, tagline String, so on and so forth. But in one of my projects we have a similar style of schema for our backend models. So I don't know if that's supposed to replace that, or if those are two separate entities. Yeah, so it's going to depend on your database really, because you're going to usually define your database models and then you're going to have a schema that interacts with it. So for example, in Redwood you have a Prisma schema, and then that's what actually does the database migrations, and then you have a schema that's kind of separate from that. So that's going to depend on what your back end actually is. And this is what StepZen is going to handle for you — if you want to connect to a MySQL database or something like that, you're able to just create that StepZen schema, and that's the thing that mediates all of that.

00:27:26 - Lucia

Yeah. And then I just wanted to highlight and review something we've got going on in the chat. It's a good distinction: GraphQL is different from SQL in that SQL is a query language for databases and GraphQL is a query language for APIs.

00:27:41 - Anthony Campolo

Yeah, yeah. And so that's why you can put an API layer on top of your database. And this is actually a good segue to the questions about FaunaDB. So I've actually built some projects with FaunaDB, and it's pretty interesting. It's pretty much a custom database that has its own query language entirely called FQL, the Fauna Query Language, which is like a functional Lisp kind of language and has a very steep learning curve. So they also have a GraphQL endpoint that lets you interact with FaunaDB through just their GraphQL API. It's kind of like how with StepZen you can create these APIs that can connect all these different backends. Whereas Fauna is saying, we have our one canonical database that is Fauna, and then we built this GraphQL API and stuck it in front for anyone who wants to use it. So you can think of what you're doing with StepZen as creating your own GraphQL endpoint to whatever your back end is. Whereas a lot of these more well-known services already have these built-out backends and they've already created that GraphQL API for you.

00:28:47 - Anthony Campolo

So that's one of the things that's really cool about getting your hands on something like StepZen — you get to go beyond just these GraphQL endpoints that are being handed to you. Like what we're doing right now, we're just showing you this example — it's like the Rick and Morty API. That's an API that's already built for you, but you can actually build your own APIs in this challenge. All righty.

00:29:12 - Moderator / host

Cool.

00:29:12 - Anthony Campolo

That was a lot of good questions, guys. Thank you. I think we are at the point where we can move on to the fetch stuff. I am going to drop a link in the chat. This is a little repo that I've put together for you all. There are a couple of things going on in this repo and it's meant to show a couple different ways that you can make GraphQL requests. So what we've shown so far is how to do it just by going to the actual Rick and Morty endpoint or by hitting it with a tool like Insomnia. But there are a couple other things you can do that are going to help you actually bring it into a project. So there's a little explanation here of the stuff that we already went over — like what is your schema, what are the types, and how do you actually query it? And then this is also what we already went over: how to query the endpoint. And if you want to get your hands on how to do this in a project, you can clone this repo.

00:30:32 - Anthony Campolo

So let's go ahead and get this going. And there's a double git clone — oops. It's funny. No matter what, git is always where margin of error comes into play. So this is just going to be a simple little project that has an index.js and index.html. There are no dependencies whatsoever in this project. And if anyone has ever used the Fetch API, this should be fairly simple. What we have here is just a boilerplate HTML file and we're importing a script tag here. The only thing we're going to need to run this is a nice little extension called Live Server, which I recommend people check out. It just lets you kick off a little development server so you can see what your project is doing. And the way we do that is you can either click "Go Live" here or you can right-click and say "Open with Live Server." Right here we're on localhost:5500/public/index.html. If we open up our console over here, right now we're getting this "Hello MintBean" here.

00:32:26 - Anthony Campolo

And that's because we are logging "Hello MintBean" there. Now what we want to do is make a fetch request to that Rick and Morty GraphQL API that we were seeing before. The Fetch API is something that's just built into the browser and that anyone can use. And the way you do it is you literally just write the word "fetch" and then put in the endpoint you want to query. So right now we have this endpoint, which is rickandmortyapi.com/graphql, and then inside these curly brackets here we need to tell it what kind of request we want to make. And so this is where we're going to actually say POST. This was like when we were doing the query through Insomnia — we selected POST and that's how we're letting it know it's a POST. And then we're also going to send in some headers. So headers is where you would do something like authentication, which is something you'll likely come across. It says my internet connection is unstable. So hopefully you all still hear me. We are going to tell it that the content type is going to be JSON.

00:33:58 - Anthony Campolo

This is also where — if we want to do authorization — we can put in an authorization header and then do something like "bearer" and concatenate on the string. So that's the type of thing you would do if you also need to send keys to the endpoint. But you wouldn't want to do that in just your client-side JavaScript. You'd want to do it in a serverless function. But that's outside the scope of this little intro. So we've already got the method and the headers, and then we've got this right here, which is going to be the actual body. And what I was saying before about how what's really nice about GraphQL is that you just have this query string that you're throwing over the wire. So we're sending this body payload, and we're just taking this same query that we were already sending before, stringifying it, and making the request. And then once we've done that, we do these .thens, because it's a promise and we need to resolve the promise. And then we're going to get the data and console log it, and then it's going to have a little "data" thing on it.

00:35:26 - Anthony Campolo

So that's why it's data.data. But I'll explain that in a second. So if we save that, then over here we see that we're actually getting the whole thing — getting characters, getting results, and then the list of things over here. And if we take that off, just to show what I was talking about — now it says "data." And the reason is just a quirk of GraphQL: you make the request, you send that string that has the whole thing, and then it gives you back the exact thing. And sometimes it gives it back to you wrapped in an object, and that object may be named "data." But we can then pull that out like this. And then we can go even further — if we wanted to say, okay, I don't want to just get that data object, I want to drill down a little more — we can say .characters. And then nicely, we're just getting this results thing, and then we can drill down a level deeper and say .results.

00:36:34 - Anthony Campolo

And now we're actually just getting the array. And this is important to know, because if you want to go a step further beyond this, you would want to take this object and then map over it and display it in the DOM. So you could do document.getElementById and then do innerHTML and just write it directly onto the page. And you need to know the shape of the data you're getting so you can destructure it out and map over it. If some people want to know more about that after this, feel free to message me. We can go deeper into that. But I just wanted to show how to do the actual query itself without any libraries that bring in any dependencies. If we have more time, we can go a step further and show how to do this with an actual GraphQL client. But let's break right there and take questions. And Lucia, feel free to jump in at all if you wanted to add anything —

00:37:40 - Anthony Campolo

— anything on that.

00:37:42 - Lucia

That looks awesome.

00:37:46 - Audience questioner

There was one question which I just wanted to bring attention to, because I know a lot of people are thinking this. Drew asked a question about how you would connect GraphQL into a React state. So could he maybe wax poetic a little bit about how to take your GraphQL data and put it into a state array, maybe inside a React functional component? Could you explain how you would do that?

00:38:11 - Anthony Campolo

Yeah, and that's actually the next thing I can show — it will probably help with that. What I just showed had no library, no dependencies, no package.json, no React at all. So this is what you call vanilla JavaScript. Someone was asking about vanilla GraphQL before — this is just Fetch, which is vanilla JavaScript. And some people are asking about Axios and things like that. Axios is a library that wraps Fetch. So when you're using Axios, you are making Fetch requests and it's giving you a nice wrapper to do that for you. So you could put headers on and do that kind of thing. So this is the most basic way you can make a GraphQL request without any libraries. But this doesn't really get you anywhere — this is a learning exercise. This isn't really the way you would ever actually want to do this. And some people are very adamant about wanting to do all their projects with vanilla JavaScript and do everything with the Fetch API if they can. But I don't think that really gets you super far, honestly.

00:39:20 - Anthony Campolo

And once you get into these kind of more real-world projects, the niceties you get from frameworks and libraries — from people who thought out these edge cases and actual real-world use cases — become very, very useful. And so what you're really going to want is some sort of front-end framework to handle taking that data and actually displaying it on the page. So now let's get into how you would actually do that, because it can be very theoretical if you try to just talk about it. And I've also created a couple different branches here to show what's going on. So I started with just the blank one that is only console-logging "Hello MintBean" to make sure your dev environment is set up. But if you want to jump ahead to the end, you can go to the fetch branch. That then has the fetch request I just made. But there's going to be another super-secret branch here if you're also so inclined to check out, where it shows how to actually connect.

00:40:34 - Anthony Campolo

The GraphQL Request library — GraphQL Request is the kind of next step beyond the Fetch API. This is another one of those open-source libraries, from a pretty prominent GraphQL company. In this case it's Prisma, although Prisma is kind of more of a general database tool now. But they still have strong lineage in the GraphQL community, and so they maintain this library. And as it says, it's a minimal GraphQL client supporting Node and browsers for scripts or simple apps. So this is not going to be as complex a client as something like Apollo Client. I kind of think of it as a midpoint between your basic Fetch and the more complex Apollo Client. But with this you are going to bring in a couple more libraries, so you're going to first use either Yarn or npm. Either of these will get the trick done. And then you're going to install a couple dependencies here. So this is why I like showing the Fetch API example first — you don't need to bring in these extra libraries. But if you want to have state management and do all that kind of stuff, then you can bring in React, ReactDOM, react-scripts, and then graphql and graphql-request.

00:42:11 - Anthony Campolo

So some of these depend on others — that's why you'll need all five to do what I'm going to show you. But that's pretty much the minimum viable GraphQL setup for what you need. And then you have some scripts. You can just do Create React App also if you don't want to do this — this is basically just me taking the very base pieces of what you get from Create React App and doing that. Once you've got all that going, this is pretty much exactly the same as what we were looking at before. And here, this is us making the request with the GraphQL Request library. For this you would basically do the exact same thing, except we're using this thing right here. So we're importing gql, and this is what lets us not have to do the JSON.stringify kind of thing. This is handling the query string part specifically. So that's why our query is inside of this gql thing. And then we pass that query into this GraphQL client.request, and the client is declared up here with the endpoint.

00:43:49 - Anthony Campolo

So the pieces you want to think about with this: there's always going to be the endpoint and there's going to be the query. And what you really just have to figure out with the client is how to get the client to understand what the endpoint is and how to send queries with it. So that's basically what's happening here. And then we're going to console log the data object — data object is what we're setting to the request. So this is doing the exact same thing that the fetch request did, just doing it with GraphQL Request instead. Now, since we are in React world, we have these react-scripts, so we can just do yarn start to start our development server, and then that's going to open on localhost:3000. And then over here we see that we're getting our characters with the results. This is now a point where you're basically set up to do what you would need to do to get this onto the homepage. What you would do from here is something like useState.

00:45:13 - Anthony Campolo

So you would import useState from React and then you could set the data object to the state. And you could also then have things like — if you wanted to use context, you'd use context, but you wouldn't necessarily need to go all the way to that level. But this is the next layer: once you've actually started making the request, how do you actually set it into the project? So does that kind of make sense in terms of how conceptually you would get at that?

00:45:59 - Audience questioner

Thanks, Anthony. Makes a lot of sense. I got at least one private message — is it normal that a recent boot camp grad — and this is private, so I'm not going to say their name. Monarch. Is it normal that a recent boot camp grad is only grasping 40 to 60% of the info being presented? And a few minutes ago I had an overwhelming feeling of, "Oh crap, I may not be ready to start this journey." And I wanted to address that. I'll address it first, and I welcome any comments from Lucia and Anthony. I, as a senior developer, only ever grasp 40 to 60% of any info being presented until I get my hands dirty.

00:46:46 - Lucia

You're doing great.

00:46:50 - Audience questioner

I can't think of anything that I learned just by watching, which is why tutorial hell is called tutorial hell and not tutorial heaven — because just watching tutorials, even from experts, only gets you so far. So if you're grasping 40 to 60%, I think it's great. And then coupled with the mentorship that the StepZen team is going to be providing for the whole hackathon, including coffee and code hours — which you guys should really come to — I think you guys are fine. Lucia, would you agree?

00:47:18 - Lucia

Absolutely, 100%. There's part of this that you will only get if you just start getting your hands on it. And we'll be available to take any questions. I am very willing to answer any questions you have. You might have this perception that some question is too simple to ask — I don't consider any question to be that way. I wrote my first line of code four years after I graduated college, so I have been [unclear]. Please don't worry about just getting in there and asking questions.

00:48:00 - Anthony Campolo

Yeah, yeah, really. If there's a lot of information that didn't make sense — part of why this is challenging is that you all are coming at this from many different levels. So there are questions coming in from people who are a little more experienced, and that's kind of who I was trying to speak to. So there were things I was saying that I would not expect you to understand. That is a good thing if you don't. Because if you're like, "Oh, this all makes perfect sense" — you probably didn't actually understand all of it. So you should feel confused by some of it. And that's why we're trying to really emphasize here what is the stuff you really, really need to know. And that's why we want to really break it down to the very, very basics — like what is an endpoint and what is a query. And if you can just wrap your mind around that, then you can start to worry about all the complexities around that after the fact. I just want to give you the ability to actually get your hands on it.

00:48:57 - Anthony Campolo

So just go to the Rick and Morty endpoint and try to make a query. Try to get some data back. If you can't do that, that's great — that means you know where you need to ask for help. You say, "I don't know how to make a query," and I say, "Great, we can show you how to make a query." So it's about knowing just enough to know how to ask the right questions — that's what we're trying to arm you with right now. And so you should have a lot of questions. You should be looking at it like, "Okay, I think I kind of get it. But what about this? What about this? What about this?" And people are asking all these "what about this" questions in the chat. And that's the great thing about this hackathon — you don't have to get to all of those "what about this" questions, because we're just here to learn. We're here to have fun. We're here to make some cool stuff. So if everything doesn't make perfect sense, that's okay, because we're here to learn.

00:49:46 - Anthony Campolo

If you already knew all this, then why are you here, you know?

00:49:49 - Intro / host artifact

Right.

00:49:49 - Audience questioner

Yeah, totally. I think if I were to put it on a scale — if you're a fresh boot camp grad, a university grad, a college grad, or self-taught and you don't have work experience, you should be grasping maybe 20 to 30% of what was said. So 50 to 60% is actually great. If you're new, you should be at this point grasping only 20 to 30%. If you have one year of experience, you should be grasping about 40 to 60%. If you have three years of experience, it should be about 80%. And if you have tons and tons of experience, maybe you got all of it. But if you're at the beginning of your learning curve, even if you got just a fourth of everything that was said, that's enough — it's a seed crystal. It's a seed in your head that's going to grow if you feed it. And that's how learning works. Knowledge is arranged in a graph. And even if you get just little pieces of it, the more energy you put into learning, the more that graph grows organically.

00:50:52 - Audience questioner

So talk to Lucia and Anthony in the Steppers channel. Ask them questions. There was another question: is there a place where we can ask questions inside the MintBean Discord? And yes, there is. There is a room called coding-questions. You can ask over there, you can ask in the Steppers room. We've organized them in different channels, but there are no real hard and fast rules about what channel to use. So if you don't know where to ask a question, ask it anywhere. Ask it in general and somebody may tell you, "Hey, go over there and ask that question," or they'll answer you right there. It's a warm, friendly community. The cost of asking a question you might think is dumb is zero. And chances are if you're thinking that question, 100 other people are thinking it too. So please, please, please ask questions. Definitely take advantage of the very generous mentorship that StepZen is providing. You can talk to Lucia and Anthony directly in any of the channels, but definitely the Steppers channel and the current events channel would be great.

00:51:57 - Anthony Campolo

And just to quickly answer a couple more things that I'm not sure if we covered yet. I know a couple of people are asking questions about API keys and how to manage that, which I briefly alluded to. We have an article that was actually written by one of our colleagues, Carlos, about how you'd want to approach that. And this is also something that we talk a little bit about with using RedwoodJS and their kind of built-in serverless GraphQL API type thing. So if you want to know more about that, feel free to check out this blog article that I just put in the chat or message me directly, because that is a nuanced question — time-intensive to get into right now, but important in terms of how you manage your keys. Basically the main thing is you don't want your keys in your client, so you don't want to actually put your keys in the request you're making from GraphQL Request or from Apollo or something like that. We can go into that more in the chats.

00:53:04 - Anthony Campolo

And then someone just asked, when getting started with a small project, would HTML, CSS, and GraphQL be enough? So you need some JavaScript to actually do the GraphQL request itself — that'll be the only other thing you need. And that was kind of what I first showed: you just had HTML and JavaScript. There wasn't really any CSS. And then when I brought in GraphQL Request, that's where you had actual dependencies and had to bring in some NPM libraries. So it's really up to you how you want to do it. GraphQL is super flexible. And actually, technically you really could do it without JavaScript — there are probably other ways to do it with other languages. But we're probably going to be mostly doing JavaScript here at this hackathon because that's what I think most people are going to know and that's where most of the resources for GraphQL are going to be.

00:54:00 - Lucia

If you need JavaScript help, hit us up in the — I forgot the name of it — the Discord. There we go. Yeah.

00:54:09 - Anthony Campolo

Marie says she'll be using C. Awesome. Cool. Yeah, that's pretty much it. Feel free to message us or contact us if you need anything. I'll be around all week.

00:54:24 - Lucia

Coffee and code hours. That'll be fun.

00:54:26 - Moderator / host

Excited for that. Awesome. I think we want to — are we — is Brian coming back on for —

00:54:35 - Anthony Campolo

Looks like he's getting in the zone. Yeah. Just put his headphones on.

00:54:41 - Moderator / host

It's been a long session. You guys have been great at answering a lot of these questions, so really appreciate it.

00:54:53 - Intro / host artifact

All right, I'm here. Can you hear me?

00:54:55 - Moderator / host

Yes.

00:54:56 - Intro / host artifact

For whatever reason, if I take my headphones off, Zoom forces me to manually change the settings. Okay. So hopefully — I know we've thrown a lot of things at you really quickly. Hopefully you feel a little bit of comfort with the concepts around GraphQL. I know there's been a lot of talk about not necessarily knowing everything you need to know to get going. And don't worry — that's the whole point. We're just trying to give you enough to get you started, to know where to look. Don't feel like you should have learned GraphQL in an hour. I've spent a lot of time doing all of this. And I would say I'm not even — I wouldn't consider myself an expert. So it takes some time. But I think hopefully we've given you enough to get started on building the project. I already showed you how to do that in StepZen. I'm here to kind of just answer anybody's questions in terms of how they can get started doing this in StepZen.

00:56:13 - Intro / host artifact

At this point, if anybody in the chat wants me to review that whole piece again — I know it's been a long session — or I can just answer any questions if anybody has immediate questions about it. Also, within the links I shared in the chat — though it can be hard to follow within Discord — I'm posting a handful of little tutorials. But I highly recommend checking out our blog. Obviously there's the documentation, but the blog also has a ton of tutorials that aren't specifically StepZen-only kind of things. Like, I have one about consuming GraphQL APIs in plain JavaScript. I have one showing how to use GraphQL Request, how to use Apollo Client, how to use — I can't remember the other one — oh, urql. Which are different libraries for consuming — you know, you have to think about there being two different pieces to this. One is building your API, and that's really the only part where StepZen plays a role. — And Joshua, yes, I'll share — I can share my slides.

00:57:31 - Intro / host artifact

You're writing GraphQL — you're writing schema definition language with some StepZen-specific directives. But other than that, it's all just writing GraphQL types and figuring out what APIs you want to connect to. Then the other half — some of what Anthony and Lucia covered — is how to consume these APIs. That involves writing GraphQL queries to get the data you need, and that also involves on some level doing the POST to get the data and then using that data within a front-end application in JavaScript. So if you're kind of thinking, "I didn't catch everything," that's because those are a lot of different pieces. We took you all the way from the backend to the frontend in terms of building an application in a couple of hours. Yeah, the Discord link was shared. Okay, so the blog posts — I'm going to post those on Discord.

00:58:51 - Intro / host artifact

I was just in the middle of doing that when my time came up here. Those two or three in particular will be helpful for you getting started, and they cover some of what Lucia and Anthony covered as well. And the blog in general has a ton of different things. So if you want to learn how to write your first StepZen backend, it's got a tutorial for that. Obviously the docs too, but there are a lot of resources there that I think will be helpful to you.

00:59:26 - Moderator / host

Absolutely. And I think that we're coming back to the first coffee and code hour as well. We're going to be planning on — sorry, I feel like there seems to be an echo on my end. Does anyone else hear it? Nope.

00:59:43 - Audience questioner

You're good.

00:59:44 - Moderator / host

Never mind. Yeah, there's a lot to consume here with all the resources and everything that we've absorbed. So we can go about it two ways. We can kind of stay on the call and if you guys have more questions, we can go through those questions, or we can come back at four when the coffee and code hour starts, when we begin planning how to plan your project. Thoughts? You want to open up your mics or in the chat?

01:00:18 - Intro / host artifact

Also, I just posted a few more links in the Discord channel with some specific posts on the blog that I think could be helpful to people, you know? I know it can be hard sometimes going back through video to find where exactly something was covered. And I'm always somebody who likes to learn by reading.

01:00:38 - Moderator / host

Definitely. I think everyone learns differently as well — some people prefer the video format, some people prefer written. Okay, I would like to come back for the coffee and code. Okay, cool. I think everyone could probably use a little bit of a break as well. We've been on this call for a while, so let's take a break, come back at 4, and then get started. And it'll give you guys a chance to actually look at the different Kanban tickets as well and really absorb the hackathon. Sounds good.

01:01:16 - Intro / host artifact

Somebody was asking, which Zoom link do you come back to — is it this one or a new link?

01:01:21 - Moderator / host

It's a new link. So we'll drop it in the current events channel and we'll also drop it in the Steppers channel as well.

01:01:33 - Intro / host artifact

Elvira, it's Eastern Time. It's 4:00pm Eastern Time. Yeah.

01:01:37 - Moderator / host

Yes. Perfect. All right, thank you so much, everyone. Really appreciated everyone joining the call, and thank you so much to the entire StepZen team. Fantastic content and super resourceful. I think Monarch had to jump off, but thank you so much, guys. Take care. Bye.

01:02:01 - Lucia

It was our pleasure. Bye.

01:02:03 - Anthony Campolo

Happy —

01:02:06 - Moderator / host

Bye.