Create Custom Resolvers for Data Types

[00:00:00]
>> What we've done thus far is we looked at the beginnings of how to get custom data into Gatsby, our custom pages into Gatsby, I should say and then we've we've dug into getting custom data in. And we were able to get authors and books into the data layer and create relationships between them.

[00:00:20]
But I actually wanna take that a step further where I want to extend this a little bit because right now, if we go and look at our data, there's no way to purchase these books. So I can get, the ID, I can get the series, series order, but there's no opportunity for me to get, purchase the book.

[00:00:44]
So we're going to extend this thing and add the capability to buy it. So let's get into our Gatsby node again. And what we're gonna do now is I'm just gonna head down to the bottom, we're gonna use a third API, this API is called CreateResolvers. And a little bit of vocabulary here, a resolver is a term in GraphQL for a function that returns data for a given field.

[00:01:11]
That's how the field resolves. So, if we want to have a custom field, we need to provide a custom resolver for it, which is why we're going to use CreateResolvers here. And Gatsby's smart enough to infer data so that we don't have to also declare the type. We could, it wouldn't hurt anything but it's gonna make our lives a little bit easier to have all this code in one place, so I'm gonna pull in another helper.

[00:01:38]
So CreateResolvers and then CreateResolvers. All right, then, the way that we define resolvers is as an object that loosely matches the schema. So, if our data type is book, we add an object called book, and then any fields that we wanna add in the book, we can add here.

[00:01:59]
So I wanna create one called bio link. And the bio link for this book is also an object. And inside of it, it's gonna have two things, a type, and a resolve function. So this is the core setup of a custom resolver. So let's start by just running this so that we can see how it works.

[00:02:23]
So we call CreateResolvers by passing in these resolvers. I'm gonna make this a string and I'm going to have it just return a string that says to do and let's give this a shot. Let's see what happens when we actually run this. So I'm running Netlify Dev. It's starting up the Gatsby development server.

[00:02:47]
And when we come out here and refresh the page, we now have a bio link and if I, so let's get the books, turn off the author, though, how about that? Let's get just the name and the bio link to make it a little bit easier. So we can see, here's the title of the book and now we can see that our bio link is to do, so we were able to add a new field.

[00:03:12]
And now we can do whatever we want in here. I wanna make this actually return a link and the link that I wanna return is gonna be to Pauwels books. So I have an ISBN and so Pauwels books is a huge bookstore in Portland, Oregon. And I was looking around to see how this works.

[00:03:33]
And it turns out that if you search for an ISBN, you will find it. So if I go into one of my books, and I get the ISBN, I come back here and search, We have a URL that results in finding the book. So this isn't perfect. There's probably a better way to do it.

[00:03:52]
But this one doesn't require an API key and it supports an independent bookstore. So I'm pretty happy about that. So let's grab this link here, and I want to return this bio link and I'm, see does that hot reload here and actually tried this. Let's see. It does not how we load, so I'm not gonna restart the server.

[00:04:16]
But as you can see this is close, this would give us a bio link. But we've hard coded the ISBN. Fortunately, the resolver is gonna get the node and pass it in as the first argument, so we can call that source. And then if I convert this to a template string, I can actually go right in here and say source.ISBN, and now it should on resolution give us a custom bio link for each book.

[00:04:46]
So, we've been able to enrich our data now, so let's restart this thing. See how it goes. All right, okay, so let's double check that one of these works. So here's A Man Called Ove, and if you click it takes you right to the Pauwel site and there's the book.

[00:05:04]
Okay, perfect. So, we now have enriched data and our Gatsby site, pretty excellent. But we're not quite there yet because this is a book club and I wanna be able to show a little bit more data, I wanna be able to show the cover of the book. And for us to do that, we need to figure out how to get the cover first and foremost.

[00:05:29]
But we also then, it's gonna be remote. I wanna be able to bring that into Gatsby and take advantage of Gatsby image optimization.