This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Instagram Source Plugin Setup" Lesson
[00:00:00]
>> Jason Legstorf: We're gonna build ourselves a component that loads post from Instagram. So we're going to just grab any Instagram account that we want and we'll be able to display data from that post and we're going to do that through the same graph QL layer that we've used for our post for our images for everything else.
[00:00:20] So what we're gonna do now is, we are going to,
>> Jason Legstorf: Install one more plug-in. I think this is the penultimate plug-in we're gonna install. I love when I get to use that word in a sentence. So we're gonna install gatsby-source-instagram. And source plug-ins in Gatsby are plentiful.
[00:00:50] Depending on what you want, let's see, you are able to find 272 source plug-ins. So you can load, let's see, what's at the top, PostgreSQL, any API end point, big commerce, Vimeo. Pretty much any CMS that exposes an API we've got a plug-in for. We've got some weird stuff in here, like you can use Google Sheets.
[00:01:21] Like you can load a Google spreadsheet as a data source for Gatsby. So like if you've got tabular data, it totally works. You can, we've got plugins for all sorts of things like there. You will not have a hard time finding a plug-in for what you need. And if you do find yourself needing a plug-in, we also have good docs that will be getting better soon, on how to build your own plug-ins for pretty much any data source.
[00:01:45] Did you have a question?
>> Student: So these are maintained by Gatsby?
>> Jason Legstorf: Not all of them are, no. Some of them are maintained by Gatsby. If you find like File system is here. And you'll see this one is an official plugin. So if it says an official plugin, that means that we maintain it.
[00:02:04] You can also just see a whole list of those if you go to the github gatsbyjs slash gatsby. We use a monerripo so all of the packages that we maintain are also in this packages folder. And so you can see everything that is actively maintained by Gatsby in here.
[00:02:29] So now that we've got our Instagram plug in installed, we're going to configure it. So let's jump into Gatsby config which I already have opened, and down at the bottom here, I'm going to resolve Gatsby source Instagram and the options are.
>> Jason Legstorf: Just the username, so we're gonna set the username we need, I'm gonna use the gatsbyjs Instagram, you can use any Instagram you want.
[00:03:04] This is all public data, so you don't need API keys or anything like that. After installing this, we're able to npm run develop. And I'm gonna jump back into the GraphQL Playground, once this finishes booting. There we go. Gonna refresh the page, make sure that we've got all of this new stuff.
[00:03:29] And now, I wanna see what's new, what's in here now. All instant node. Okay. Get those. What does that give us? How about the,
>> Jason Legstorf: Local file?
>> Jason Legstorf: Child image sharp, what's this? We're optimizing Instagram images for you. Yes, we certainly are. So now we can do a source set of your Instagram photos as well.
[00:04:02] And so now, I don't know what this is but I'm gonna pull it up anyways, ops! Let's go. Local host 8000, yeah. So there's an image from our Instagram, that's the 200 pixel version, and it's like been fully optimized for us, we don't have to do anything, we just installed it in because gatsby transformer sharp was available, it did the work.
[00:04:26] So now, we can use this to do fun things with. What we will do is, let's create a new component and we're gonna call this component, Insta. So inside Insta.js, we're going to import react from react. We're gonna import Image cuz we're gonna be using Gatsby image from Gatsby image.
[00:04:54] We're going to import the CSS tag from emotion/core.
>> Jason Legstorf: And let's set up our components. So we've got use Insta. All right, we've got our Insta component and that is going to, eventually, this is gonna need data.
>> Jason Legstorf: Once we have data, we're gonna return, so we'll just start by kinda scaffolding this out.
[00:05:24] You're gonna return a fragment, cuz again, we don't wanna populate the DOM with a bunch of junk divs if we don't have to. So we'll set up an h2. This is gonna say Instagram posts from. And eventually, we'll want the username to be dynamic, but we can hard code it for now.
[00:05:46]
>> Jason Legstorf: Then, we're gonna wanna show all of our posts. And those are gonna be
>> Jason Legstorf: Shown here. And then underneath that, we're going to want to,
>> Jason Legstorf: Link to the post. So we can say. It's gonna be
>> Jason Legstorf: Link out to Instagram.com. This will eventually be not hard-coded.
[00:06:17] We'll grab the username, but for now, we can just do that. And then we'll say, see more on Instagram. And we'll use that right arrow HTML entity again. So that gives us kind of a really default setup. So we will do an export default Insta, and let's include this somewhere.
[00:06:41] So I want this to live on the Index page. And so then, I'm just gonna go to the homepage. And I'm gonna import in stuff from components and stuff. And then down at the bottom, I want to just drop this right into the posts. And it doesn't need any props.
[00:07:09] We can just we can run it as is. So if I save this,
>> Jason Legstorf: And I come back out here, and go to the home page. We can see that it's sort of ready for some Instagram posts but we need to actually get that data.