Creating Pages from Third-Party Data

[00:00:00]
>> So in here, we're going to, let me make this smaller again. I'm gonna import everything as React from React, as you do. I'm going to import GraphQL from Gatsby. I'm gonna import Gatsby image, because we want to use Gatsby images for showing those episode cards. And then I want to import our layout from components.

[00:00:28]
Wait, I'm two folders in, aren't I? Components, layout, all right. So then I'm gonna export a const called query, because we wanna do a GraphQL query to get episode data. So when we generate this filename, what that's gonna cause Gatsby to do is a very, very simple query.

[00:00:52]
The query that it's gonna do is not gonna be filtered. It's not gonna get the title or the guest name. It is only gonna get the ID and whatever the field is that it needs to create the thing, so slug, current. So this is all that's gonna be queried by Gatsby during page creation.

[00:01:15]
But that ID is all we need to make a page query. So in here I'm going to create a new query, we'll call this SanityEpisode, and we're going to pass in the ID and that's a string. So, remember when I said that whenever Gatsby creates a page, it puts things in page context?

[00:01:37]
That GraphQL query is getting handed to this page in context. So we have both the ID and the slug as a variable in our GraphQL query. I wanna get it this ID. So I'm gonna use that, so then I can pick instead of all SanityEpisode I'm gonna get one SanityEpisode.

[00:01:57]
So, singular SanityEpisode, and I'm going to check that the ID equals the ID that was given to us. Then inside, we want the title, I want the description. I want the current slug, because we're gonna link to it on the Learn with Jason site. Then we wanna get the YouTube ID, I also wanna get the date and we'll do that from now.

[00:02:27]
Filter again because I want it to be relative. I'm gonna get the image, and here's a cool thing that Sanity does. Sanity is designed to support Gatsby image data by default. So we don't actually need to do anything. We can just use Sanity and it will automatically configure any images from Sanity itself to provide Gatsby image data as part of the transformer plugin.

[00:02:55]
So there are a lot of tools that will do that, Sanity is one of them, Contentful is another one. And there's a list of a few more that you can find on the Gatsby image docks. As well as a guide on how to do that in your own transformer plugins, if you wanna add a source for your own.

[00:03:16]
If you're working on a headless CMS or an API, and you want Gatsby to be able to pull it in with automatic image optimization, there's a tutorial you can follow on how to do that as well. Cool, so we've got this query now, we can use it. Let's export default function, SanityEpisode.

[00:03:37]
That's gonna be the name of our component. And we're gonna get data, that data is the result of this query. So if I wanted to, I could just return pre JSON stringify(data, null 2) right? And then I need to close my parentheses. Let's put this in the layout just so it looks somewhat usable.

[00:04:08]
All right, so Gatsby images yeah, defined but never used that's okay. Let's get a list, let's see what happened. So here's my 404. We didn't actually build the pages, so we're going to stop and restart. Cuz we created that new dynamic page so we actually need Gatsby to run again to detect that.

[00:04:25]
And you can see here now sanity is giving info as well. So we can see that it's pulling in information and dropping it in. And so when I refresh this page, now we have 242 pages instead of the original, because it created all of these different pages. So let's click into one of these.

[00:04:45]
And look at that, there is all of our data. So this, we've dynamically created all of these pages, and because we wrote I this query, we now have access to all the Sanity data for that episode in the component itself. So what I'm able to do then is I can take, let's simplify this a bit.

[00:05:08]
We'll get the episode, And that'll be data.sanityEpisode, not capitalized though there, all right? And then inside here, you can set a title of episode.title. You can set a description of episode, description. We could set the image, I'm not gonna worry about it. So, instead let's set up Gatsby image.

[00:05:41]
And what I wanna do here is we're gonna set the image is going to be episode.image.asset, GatsbyImageData. And the alt is going to be the episode title. Then we can do an h1 with the episode title. All right, let's do a paragraph tag and we'll say when it was posted.

[00:06:11]
So sorry, posted not episode. Posted on episode, date and then let's see here. Drop in the description, so episode.description. Okay? Then what we can do is let's just add some details about this, right? So we've got in here, if you wanna watch this on the original show, we can link out to the site.

[00:06:47]
So learnwithjason.dev, and then drop in the episode slug current. Right? And then we'd say full episode and details. And then underneath that, we can add another one. What if we just wanna watch this on YouTube? We can say https, go to youtu.b, which is the shortcut. And then we can do episode.youtubeID and that'll take you right to the the episode on YouTube and say watch on YouTube.

[00:07:32]
All right, so that's like an episode component right, so let's see what happens. Bang, look at that. With very little custom code we just wrote some markup, right? We didn't have to dig into internals. We didn't have to figure out where data lives. We didn't have to really do a lot.

[00:07:53]
We were able to just use this GraphQL Explorer to figure out what data looked like. And then build a page out. So again, this is a really really slick way to get a lot of data in very short order. I find this to be a really compelling reason to lean on Gatsby when I'm trying to build something.

[00:08:14]
If I need to get something up quickly, Gatsby's a good way to do that. You are able to very quickly plug in whatever data source, write some react, you know what the data is gonna look like. You don't have to figure out, well, what's the difference between the way that air tables API works, and the way that Contentfull's API works?

[00:08:33]
I don't have to care, because when they come into Gatsby, they look exactly the same. They're nodes, I'm gonna query those nodes. I'm gonna filter them based on predictable filters that Gatsby provides, and I'm gonna show those as pages. Same workflow whether it's MDX or images or Sanity data or something entirely different.

[00:08:52]
That predictability is a big boost for using Gatsby. It's a big reason to steer into Gatsby as a tool.