This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Getting the Image Data" Lesson
[00:00:00]
>> Jason Lengstorf: So to get the data, we're going to just take advantage of another hook and load our Instagram post. So let's create another file and hooks. And this one is going to be called, use Instagram. And inside of it, we're going to import GraphQL and useStaticQuery from Gatsby.
[00:00:27]
>> Jason Lengstorf: And this is gonna be a hook function, use Instagram. It's gonna return something, and that's gonna be our export default.
>> Jason Lengstorf: So what we wanna grab is, we're gonna set up data like we usually do, and this is gonna be the result of a useStaticQuery, using a GraphQL template tag, and let's go write this query that we want in the playground so that we can kinda see what we're getting after.
[00:00:57] So we know that we want the all Insta node, but I also know that I only want 12 of these. So I'm gonna use the limit filter. And once I get inside of this, I am going to want a handful of things. I want the ID
>> Jason Lengstorf: That's not in the local file, I want that to be up here.
[00:01:15] The ID, I want the caption, I want the username. And then I wanna make sure that we get the right size, so I'm gonna set the max width on these to 120 and also the max height, to 120. And one thing that I didn't mention, the GraphQL fragments, there's a limitation in the Playground and in other GraphQL explorers where we can't inject a GraphQL fragment into it, which means that you can't use them when you're writing these types of queries in the playground.
[00:01:52] So if I try this, if I'm like Gatsby image sharp fluid with web P, it's going to give me an error that it's an unknown fragment. So we have to kind of fake it with something like source set for now, and then we can swap that out once we get in.
[00:02:10] So now that we've got this query, we know it works. It gives us what we want. So I'm gonna just grab that out, drop it in right here. And I'm gonna use the fragment now instead of the source. And then at the bottom, what I want is to process this data a little bit and make it a little easier.
[00:02:36] So similar to the post we are gonna do return data.allInstaNode.nodes.map and that's gonna give us back a node, and I want to just return a simplified object. So the first thing I'm gonna do is, I'm just gonna spread out all of the local file stuff, because I want that to be available.
[00:02:58] Child image sharp. Then, I'm gonna add in the ID, so the node.id, and I add in the caption. Which is the node.caption and I'm gonna add in the username.
>> Jason Lengstorf: Which is node.username.
>> Jason Lengstorf: So with that being said, we now have a hook that should give us our Instagram data.
[00:03:29] So if I go back to my insta component, I can import use Instagram from hooks. Use Instagram,
>> Jason Lengstorf: And we'll be able to then pull this data in.
>> Jason Lengstorf: So let's create a const called, what do I want to call this? Insta Photos and that's gonna be use Instagram.
[00:04:06] And then we want to just grab out the user name from the first one because we're going to use this in both the title and in the link. So let's grab out the first insta photos.
>> Jason Lengstorf: And pull and destruct for the user name out of it and then I can use this here.
[00:04:34]
>> Jason Lengstorf: So now, what we should see when I get to the homepage. Think I might have to refresh this to get, no no, it's working. We have our,
>> Jason Lengstorf: Username is actually coming back from the query. That's good. So then, we can do some looping on this data.
[00:04:54] So we're gonna take our instant photos. And we're going to map over them, get a photo and then we will return,
>> Jason Lengstorf: And anchor, that's gonna have an atroph and the atroph that we wanna use is going to be a link to the photo itself so that's gonna be a link to Instagram.com/p/photo.id which is what I figured out is how Instagram addresses those.