Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Rendering Results" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason demonstrates how to query an API using GraphQL, and builds a result component that helps display the data queried.

Get Unlimited Access Now

Transcript from the "Rendering Results" Lesson

[00:00:00]
>> Jason Lengstorf: The last thing we wanna do here is actually add support for running queries against that brick and mortar API and returning results. So to do that, we're gonna start out by getting the dependencies that we need. We're gonna be using Apollo for this. Apollo is a GraphQL library that has specific React setup.

[00:00:19] It's designed to be relatively straightforward to set up and they just released hook support which is really, really nice, so we're gonna use that. So we're gonna yarn add gatsby-plugin-apollo and then we're gonna have some dependencies. So it needs the graphql tag and then it needs apollo/react-common for some common pieces will use, and then it needs apollo/react-hooks for the react hooks that we want to use.

[00:00:57]
>> Jason Lengstorf: So we'll get that installed. And while we're waiting for that to install, I'm gonna create a new component called results.js. And inside of it we're gonna import react from react and we're also going to import useQuery from apollo/react-hooks.
>> Jason Lengstorf: And we'll import the gql tag which is very different from the graphql that Gatsby uses.

[00:01:34] And it's important to draw a distinction here because the GQL tag stays in the code, so this will ship to the browser. And what it's doing is it's telling when you write a GraphQL query, and you use that template tag, the GQL tag breaks it down into something that a GraphQL server can understand.

[00:02:00] The Gatsby GraphQL gets removed at build time, it's marking something as like, hey, you should process this during the build. GQL from Apollo is telling Apollo how to interpret a query that's been written and executed at build time. So that's why they're different things, they perform different functions.

[00:02:21] But it can be a little confusing especially if you need a GraphQL to understand exactly what each of those pieces does and why they're necessary. But that's the very fast version of why that's there. So the first thing I wanna do is to set up my search query.

[00:02:36] And because we're doing this on the client side, we can use any variables that we want, we can do really anything that we want here. So this is the Rick and Morty API, and we'll just start with where we want to be. So we want to do a query for characters.

[00:02:52] The Rick and Morty API uses a different GraphQL Explorer. So it's a little bit different, it doesn't have the the like click button this to build a query thing, which is kind of a bummer, but it's still pretty nice. So we're gonna dig into the docs over here and take a look.

[00:03:11] So we've got the characters query, which is what I want and inside of it, I can set a filter. And the filter that I want is gonna be on the name. So let's query on the name, that's gonna be a string and then I want to filter on the name and we'll use that name variable.

[00:03:32] So we may open up the query variables down here and we'll say that the name is gonna be let's do Rick first. Then,
>> Jason Lengstorf: Once we're in here, we can hit Option + Space to see what the available fields are. So I'm gonna get results and inside my results, Option + Space again, and let's just get the name for now.

[00:04:03] So we should get everybody named Rick,
>> Jason Lengstorf: And we can see that there are quite a few of them. And if we were to include the info, we can see I think the count. So there are 73 characters in the show named Rick, and we are getting a sub-selection, it's not all of them, but for our purposes this is okay, right?

[00:04:27] So let's go ahead and get all the stuff that we need. So I think for our purposes, we're going to get an ID. We want the name, let's get the species, will get the origin name, and we'll get the location, and we'll do the name and dimension for that.

[00:04:48] And then finally, let's grab the image.
>> Jason Lengstorf: Okay, and so this will give us everything that we're gonna need to show some results back where they are, where they came from, name and and image of them so that we can show that off. So knowing that, we can take this query and we can drop it straight in here.

[00:05:12]
>> Jason Lengstorf: And let's make this a little bit smaller, okay? So I've got my full query up here. And then,
>> Jason Lengstorf: I'm going to set up my component. So my component is gonna be called Results and it's going to accept a name prop. And that name prop is gonna be the result of the query that we're gonna get out of the URL.

[00:05:36] So let's first, fire off the query. So the way that useQuery works is we send in the query itself, which we've defined up here, and then we can parse in any variables. So the variables that I'm gonna pass in are just the name, so this goes into here.

[00:06:00] And what we're gonna get out of it is a loading prop. So when the query is executing, loading will be true. If anything goes wrong, we're gonna get an error. And if everything goes well, we'll get data. Once we have that, we're gonna check to see if we've got results and we can do that by just saying if there's data.

[00:06:25] And then we're gonna do a little bit of kind of like tricky stuff. So we'll say data characters length and if that fails, we're gonna just skip over to an empty array, and then we'll set the length and say if the length is greater than 0, that means we have results.

[00:06:44] So basically, if the data comes back empty, we will show a no results. Or if if for some reason we don't get a characters prop at all will default to an empty array and then show no results. Once we know about that, we can return our object. And so for this one, for the sake of making it not impossible to read, we'll do a little bit of inline styling.

[00:07:11] So we're gonna set up a max width of 500 and then we'll set up a margin of 50 pixels at the top and bottom and center it left and right.
>> Jason Lengstorf: And then we'll say that these are our search results, and let's see, if we're loading. We're going to show just a paragraph that says loading results.

[00:07:39] If there is an error, we will show a pre-tag and we are just gonna have the overflowX scroll. So if we get a long error, it doesn't blow our layout. And then we will just stringify the error. So will do JSON.stringify passing the error. That's stringfies a function, so we'll pass in the error as the first argument, null is the second argument, and 2 as the number of spaces to break the object up and prettify it up a little bit.

[00:08:18]
>> Jason Lengstorf: And assuming we don't have an error, we're gonna check if we have results. And if we have results we wil,
>> Jason Lengstorf: Map over our characters, so data.characters.results.map, that'll give us a character. And we can set up a div, and that'll have a key of the character ID that we queried for that.

[00:08:44] So we can just use anything that comes back here the ID, names spaces, etc. Set up a little bit of styling on this, so display flex so that we can kind of show things in the line as opposed to a big gnarly stack. And then we'll set a little bit of margin bottom so that things aren't smashed together.

[00:09:07]
>> Jason Lengstorf: Okay, then,
>> Jason Lengstorf: We've got that div.
>> Jason Lengstorf: Right, and then down here we need to figure out if its not loading and it doesn't have results. So if it doesn't have results and it's not loading, we're going to show just a basic no characters found matching,
>> Jason Lengstorf: Name.

[00:09:42]
>> Jason Lengstorf: So assuming we get in here we've got our div and we want to show off what we've got. So let's set up a div to hold the image. And this is getting a little divy, I think this could be cleaned up but again we're not going for design awards here, we're going for, showing how the client side app would work.

[00:10:04] So if you go to do this, please don't make your markup this ugly. Let's go and do an image,
>> Jason Lengstorf: And inside of our image we need source and we're gonna use the character.image which is a URL. Then, we're gonna use the alt, which is the character's name, and a little bit of style, we will set it to be 100% wide, so just fill this div basically.

[00:10:37]
>> Jason Lengstorf: And next to that, because we're using flexbox, we will,
>> Jason Lengstorf: Set up an h3 to show,
>> Jason Lengstorf: The name. So we'll say character.name, and let's make the font size 20 and set the margin top to 0 so that it's not blowing out the layout. And then we'll set up a Species and use the character.species for that.

[00:11:21] And then let's duplicate this and say Origin and we'll use the character.origin.name. And I think that's probably good, so let's see species and origin name, so we're actually not using the location so we can just drop that out. So let's export this result,
>> Jason Lengstorf: Default results, okay?