Loading Data from a Headless CMS

[00:00:00]
>> Okay, we're in the homestretch everybody. We are gonna cover a couple things, and then we're gonna get this thing live. So let's do third party data. Getting data from another system is probably the number 1 task, that you'll get hit with is a Gatsby developer. Somebody's got their data in Airtable or Excel or WordPress or Sanity or Contentful, or any of these third party Systems.

[00:00:29]
And they're gonna want to make a website out of it, or as it's becoming more and more common. You'll actually get multiple sources. They'll have, Products in Shopify, and blog posts in Sanity, and you wanna bring all of that together. Gatsby is really good at this, yeah, and we talked about source plugins.

[00:00:48]
And one of the things that Gatsby does really well, is sourcing data from third party systems, especially anything that would bill itself as like a headless CMS. Or other kinda headless commerce, headless whatever, the term headless tends to mean, we store the data and provide API's to access it.

[00:01:08]
And that means that it's a perfect match for Gatsby. So let's go ahead and load in some data, I'm gonna use Sanity. So Sanity is a great, let's just give it a little peek. So this is Sanity. It's a really developer friendly, good free tier way to manage content, if you need a headless CMS.

[00:01:37]
It's configured through code, it's got a good back end, it's just nice in general I like the team. So this is what I use to manage the learn with JSON website. So on learn with JSON I list all of my episodes and each of these is stored in Sanity.

[00:01:56]
So what I need is the ability to pull these in and display them somewhere. So, if I was gonna do this in a Gatsby site, Sanity is a great match for this. So for me, this is pretty much exactly what I want. So, what I haven't showed yet is this Gatsby plugin.

[00:02:15]
We got there kinda incidentally, as we were talking about Gatsby source file system. But the plugin library for Gatsby is pretty incredible. If you get into this plugin library and you start looking around. We wanna use Sanity. Okay, let's look at Sanity and we can find in here, here's Gatsby-source-Sanity.

[00:02:34]
So, I'm gonna click on this and it gives us all the instructions that we need on how to make it work. So we're using Gatsby V3. So that's great. Let's go ahead and just install this thing, so I'm going to NPM install, Gatsby-source-Sanity. And ,now that we've got that we can go and configure it.

[00:03:00]
So, I'm gonna get into my Gatsby config. Down here. And, at the very bottom really doesn't matter, you can add it wherever you want. I'm gonna add one more plugin config object and this one is gonna resolve Gatsby-source-Sanity. And for the options, the Gatsby source for Sanity has a few things that we can do.

[00:03:30]
If you wanna just read data, you can get the Public data, which is what goes on our website, from Sanity, just using its project ID. And then you set the dataset. So, I wanna use production as the dataset. Now, my learn with JSON instance ID is you can all use this, so you don't have to go set up a data source is this VNKUPGYB.

[00:03:55]
And this is read only, like it's only gonna let you pull data that's public. So anything that you can get through this source is something that's already on my website. So it's not like we're doing a security risk or anything. You don't have a right token. You don't have the ability to go and mess with the data.

[00:04:15]
This is just to read it. So, after I've saved this, I can start my Server NPM run develop. And what I really love about this is, because we've already looked at, how to get images. How to get MDX posts, how to get site metadata, I bet you already have some inkling of how we're gonna do this.

[00:04:43]
So if I go over to graphical. Now, even if you've just heard of Sanity for the first time looking at this. I bet you could figure out, how to create content from Sanity data, because of how predictable Gatsby's data models are, right? That's the magic of this. So if we go in and we look all Sanity episode, all right, let's get the nodes.

[00:05:03]
Cool, I want to get the title and let's get the guest name, right? So, we can see here's the first look at Gatsby functions. Here's JavaScript autocomplete with straw day on here's introduction review, okay, so those are out of order. Let's order them. We're gonna sort by, let's go by date.

[00:05:26]
If we can find it somewhere down here. Here's the date ,we're gonna order it, descending. And, hey, now we're into the future. These are posts that are happening in the future. So I could do like a date is, let's say less than or equal to today. So let's do like, 2021, 811.

[00:05:58]
Let's see if that works. Yeah, there we go. So these are the episodes that have been published before today, so not anything that's scheduled, just stuff that's already happened. And, another way that we can do that is I know that a post has happened ,if it has a YouTube ID.

[00:06:14]
So, I could say instead of filtering on the date, I can filter on whether or not the YouTube ID does not equal null and we get the same result. So, there's a few ways that we can do that. Now we just happened and I happen to know that because I work on this site a lot.

[00:06:38]
But, you could pull it in whatever way you want it. Now, usually traditionally in Gatsby version 2 and prior, what you would have done at this point is you would have popped open a file called Gatsby node. You would have started digging into node API's, you'd have to run the Create Page calls and be providing paths and context.

[00:06:57]
And there's a lot of stuff that would need to happen to make this work. Fortunately, we don't have to do any of that anymore. We can just let Gatsby do all of that work for us. And this is another thing that I think is just like such a cool addition that they added in V3, which is the ability to create pages based on file names.

[00:07:17]
If you've ever used next js, this is gonna look pretty familiar, but you can do Sanity episode. I'm gonna write this out and then we'll break down, what I just did slug__current.js. Okay, so let's look at this file name and talk about what it is. So, what I'm doing here, is I'm saying and you know what, I wanna this to live in a folder.

[00:07:40]
So let's give it a folder called episode. And I'm gonna move this inside, yes, all right? So in here, we have a folder called episode and that's because I wanna each one to be prefixed with slash episode. And then we're saying, Sanity,Episode.slug__current. And that's all in curly braces.

[00:08:03]
So the curly braces, signify to Gatsby, we wanna dynamically create the name of this file. So, We're gonna generate the path based on what is inside here. The Sanity episode is the data type of what this thing is. So, if we look at the docs on this, if I go to query and then we'll go to let me just filter this Sanity, all Sanity episode.

[00:08:33]
What we get back is nodes and each node is a Sanity episode. So, I'm basically getting, I'm saying I wanna look for each Sanity episode that we can find. I wanna create a new file and we're gonna use the slug and I wanna use the the sub field current.

[00:08:56]
So, we're saying use the Sanity episodes and as the actual name for the path, use the slug current field. The double underscore signifies that we're using a sub field of slug. So, this is a little bit head bendy to look at initially when you're looking at the data.

[00:09:14]
But this is pretty slick, because it basically means any data that you have, we can now generate a file from it like that really cool. So let's do that. Let's actually make that happen.