Creating a Listing of Third-Party Data

[00:00:00]
>> So the next thing that we wanna do here is let's figure out how to get these on the homepage right? Let's make a list of sites, or of recent episodes now they're over 200, so we probably don't wanna show them all. So let's show a subset instead.

[00:00:17]
And to do that, what we can do is we can actually just dive right into this query, we don't have to make another one. We can just go in and just start adding stuff so we can do all sanity episode. And then in here, we can take some of these things that we already had before right so actually why don't we just build this out in graphical, why write it by hand when we can copy paste?

[00:00:42]
So I want to filter where the YouTube ID does not equal no, right? So here we are not equal no, I want to get the date by order descending, and then I also wanna limit to the latest 20. So only 20 episodes and then I'm going to pull out the ID, I don't need the slug.

[00:01:10]
I want the ID for sure, I want the title, I want the guest name so that I can show who was on the show, and then I want the Gatsby path. Okay, so this one is kinda cool, this is a little bit of like a magical thing that Gatsby does, and I believe I need to refresh the page to get it.

[00:01:31]
When you use the the file path name, it's not always predictable what was used to access it, am I building this from the slug? And if I do, does it know that it was in a folder and those sorts of things so what Gatsby does is actually gives you the ability to just query whatever the path was that it generated.

[00:01:56]
Where's this? Wait. Right, you have to actually put in the file path that was generated so we used sanity episode.slugCurrent right. So what we're saying is Gatsby, give me whatever the path would be for this file name. And then when I run it, it will give me the actual path to use so that we can generate those slugs.

[00:02:35]
So that way we're not trying to do logic in two places, Gatsby is generating files and figuring out paths using one algorithm. And I'm doing my best guess at emulating whatever Gatsby's doing under the hood. Now get away from that. Instead, you can just use this same flow here of generating that Gatsby path based on what happened.

[00:02:53]
So with this, if I run this, now we get all of those files, and I'm gonna skip the outer query and just get this interior part, because we can drop that right in here. Now we are pulling in our episodes alongside our MDX and down here, I can just grab them out episodes equals data.allsanity.nodes.

[00:03:25]
And what I mean by all sanity is all sanity episode, right? Then come right down to the bottom here, and we can just write some markup to lay it out. So let's add an h2 and we'll say latest episodes have learned with Json, and underneath that we'll do another unordered list.

[00:03:52]
And we'll take each episode, map through it. And do we wanna what we don't even need the curlies, we can just make this into a. One of those dailies and just implicitly return our markup, so that's gonna be an Li, and because we're iterating we need to give it a key.

[00:04:15]
So we'll do episode ID, that's why it's always a kind of a nice flow to quit helping, my god, do you see this? Stop it. ID, thank you. It's because I spelled it wrong, that's episode ID, good. Okay, so we're putting in the episode ID as the key.

[00:04:36]
Then we are going to use the Gatsby link and we want to link to episode Gatsby Path. And this is nice, because otherwise, if we didn't have this Gatsby Path, we'd have to do a global search to say okay we actually changed our minds. They're not in the episode folder anymore we moved them into the top level so look for everywhere in the site that we have the the URL generation and make sure that you update these.

[00:05:07]
So it's a minor thing but boy does it add up, so then let's get the episode.title. And we'll say, with the episode.guest, and I wanna make sure that the guest exists, guests are always returned as an array because when I designed the sanity scheme, I made bad choices.

[00:05:31]
But that's how we get to it. This is optional chaining to make sure that if there is not a guest set, it doesn't cause the page to break. And then underneath this unordered list, we can just make a link. We'll say go watch, let's learn to Json.Dev and we'll say watch all episodes of learn with Json.

[00:06:00]
Okay, so having done this, now what we get if we go to the homepage. Is we get a listing of the latest 20 episodes and then a link to the site so we can get into one of these all right, come back out here. Get into one of these, and then if we link through, it's gonna take us over to learn with JSON site, or we can click over to YouTube and watch on YouTube, right?

[00:06:30]
So this is a, pretty quickly and with fairly minimal custom code having to get into the magic stuff, we were able to build a listing of our latest things. And this is one of those things that like as developers when we are working on. Getting our portfolios out there, or blogging, or keeping track of, for me something I've struggled with is.

[00:06:59]
Workshops like these when I give conference talks, I store that information somewhere, I'll put it on. Air table is one place I've tried I'll put it on a marked down unordered list I'll put it in somewhere like poly work right? And when I do that, I then want to show it on my website so I tell myself yeah, I'm gonna remember to update my website every month or so.

[00:07:24]
And then I don't for 18 to 24 months, and then someone will be, hey your website super out of date and then I'll feel guilty about it for another 18 to 24 months before I finally get around to fixing it. So with this sort of approach with this, this quickly being able to pull in data from different places.

[00:07:41]
The nice thing is, is that every time the Gatsby site builds and you could theoretically say I want my Gatsby site to rebuild every day, every week, something like that. It's gonna pull the latest data, I never have to look at this site again, it's always going to pull the latest, from learn with Json.

[00:07:58]
So if I made my portfolio site pulling from the learn with Json sanity and pulling from my, I don't know whatever else like whatever else I'm using. I could have it automatically build every week or so and it would always show up to date information and I personally would never have to touch it again.

[00:08:17]
Which is a pretty nice way to manage these sites that we know are important, but that it's hard to make the time to go and maintain. And again, by getting all of this, this plumbing work out of the way by getting the cognitive overhead of having to write all the market by hand or deal with bespoke data types or any of those sorts of things.

[00:08:38]
I can just focus that limited maintenance time that I have on actually writing that blog post that I've been promising somebody for a year. Or actually updating my bio instead of trying to figure out why the site won't build so that I can eventually update my bio. There's so many things that get in the way of us actually producing.

[00:09:00]
And one of the ways that it gets described is a term called yack shaving if you've never heard it. Which is you wanna do one task but before you can do that task, you have to do a whole bunch of other tasks that unblock that first task. I like Gatsby because it removes a lot of that yak shaving, I don't have to do a bunch of cleanup or special stuff, I can just build the thing, right?

[00:09:25]
That to me is one of the reasons that you would want to use a tool like Gatsby is if you are not necessarily interested in tinkering with the code of your website. If you're interested in producing things on your website you wanna publish, that's a good reason to use Gatsby.

[00:09:44]
Okay, I mean with that, I think we're ready to deploy. Does anybody have questions about loading in third party data before we move on to deployment.
>> If I will lose for example, sunny side for example or Shopify for grabbing data and use it into Gatsby. So if I went back your posts for example from Shopify, the data will be updated automatically in Gatsby or I have to do some something.

[00:10:23]
>> You would use something called a sanity web hook when you set up content there are easy ways to do this. So here there's a web hooks tab under your settings and what I can do is I can set it so that whenever something changes, it will trigger a build.

[00:10:46]
So whenever the production data set changes, it sends a post to this web hook that will cause the the site to rebuild. So WordPress and sanity and a lot of CMSs have some kind of web hook support like that. That would be the way that you would do that.

[00:11:08]
If they don't have web hook support what you would be looking for instead, is some kind of a cron job where you would just rebuild the site every day.