Query Images from GraphQL

[00:00:00]
>> We're gonna do some dynamic images so let me just clean this up a little bit, get us down to an empty folder. And let's start by opening up our about page. So on our about page, I wanna get an image. By querying for it. So to do that, I'm gonna get graph QL out of Gatsby.

[00:00:18]
Now note I'm not getting use static query, we're gonna introduce something called a page query. So page queries in Gatsby, they were the original concept. But they introduce a little bit of a cognitive leap. And that's why I usually recommend if you can just do a static query and in this case, I'm intentionally not doing a static query despite the fact that we could to show how this works.

[00:00:49]
So let's export a new concept called query. And this tells Gatsby that this is a page query. So it's gonna go in and look for all of these so that it can pull them out. And anything that we run as a query like this export const query is gonna get injected into our component as a data.

[00:01:12]
So this is a very cool concept. Like I love the idea what we're basically doing is saying hey, Gatsby, build time. Take this query and convert the results of this query into a prop called data. That's just a JSON object with the graph QL query that ran. Love it as a concept.

[00:01:30]
It's very, very cool. Significantly more complicated to learn then Use static query, which effectively does the same thing, but doesn't require you to know that you have to export a query and that it's gonna show up as data. You get to just const data equals use static query.

[00:01:47]
Page queries though, get access to that page context. Which were not gonna use in this particular example, but we'll use it in the shortly when we look at third party data. So in this query, I wanna load a one image. So I'm gonna head over here. Let's load a single image, so I'm gonna get file.

[00:02:14]
And I wanna load a file. That is called Cocktail. And In that I want the child image sharp and I want the Gatsby image data and let's get the placeholder to be dominant color and again you can choose any of the normal ones will do dominant color. So if I run this, we will get back this Gatsby image data.

[00:02:45]
We've looked at this, here's our fallback. Here's our sources. We've got the web p version, the JPEG version, so on. This is gonna be my query but I wanna change it will say what's called like cocktail party or something and, In here, I can paste that in. Now this is gonna be the graph qL query that gets executed.

[00:03:14]
And then we'll get data dot file dot child image, sharp Gatsby image data. Then I'm gonna get a another helper from Gatsby, so this one is gonna be called Gatsby image. And then we want another thing called get image which is a utility function. And we're pulling that in from Gatsby plugin image.

[00:03:39]
Down here with this data we're gonna actually grab this out. So we'll go right under the layout. And we're gonna say Gatsby image. And I want the image to be get image data file And we can set alt and it'll be like a cocktail set inside an elaborate floral arrangement with dry ice mist curling around it.

[00:04:09]
This is a cocktail from a bar called bar chef in Toronto that is famous for effectively making diagram as you can drink from. And let's go take a look at what it looks like. So let me head over to the about page and look at that cocktail. See in there?

[00:04:32]
That's the thing that you drink. And this is all the stuff that's around it. But these are the like, we were able to query for that image and load it in. And this is useful if for example, you were trying to show an image gallery. You could query all file and get the source instance name of images, and then grab out these child image sharp and kind of loop over them and show Gatsby images.

[00:04:57]
This is a bit of a contrived example just to show how you would do it, but the principle kinda holds the same we would do this the same way If we were getting a group of files or if we wanted to load a few different images. Or what we'll look out in the future is when we don't know what's gonna be on the page cuz we're building like a template that gets reused for all of the data from a third party system.

[00:05:24]
That's when these page queries really start to shine cuz we can Can't do. Like I can't put if we look at the index. I can't put variables in here. If I tried to put a variable in here it will. It will tell me No. So, that's why you use static queries until you can't.

[00:05:43]
As soon as you have some kinda variable data dynamic data, you have to introduce page queries cuz they're the only ones that can support variables and any kinda dynamism. But this is not so bad like we know how to query in graph QL. We just get to click around until we find the thing we want in here.

[00:06:04]
That's why this Explorer is so great. The Gatsby image data thing if you're new to Gatsby three, but you remember what it was like to get images in Gatsby two and previously, Gatsby image data is a is incredible like what a great upgrade to the system. For me, this is the whole reason to upgrade to Gatsby three.

[00:06:23]
Like there's a lot of good things that happen but this is night and day. It's so nice to use. So now that we've got this Gatsby image data, what if we wanna do that in our MDX files. What if we wanna pull in our MDX, let's say we wanna put something into another blog here.

[00:06:43]
To do that we can actually do almost exactly the same thing. So I'm gonna grab this import here. And then we can actually just, I also need to import graph QL. Oops, from Gatsby and then down here. We can export a const called query and that's gonna be graph QL.

[00:07:18]
Now I already know what that query is gonna look like. It's gonna be identical to this one. So I'm gonna pull it over but instead of this one. We're gonna call this one The Smashburger query. And this one is gonna query for the Smashburger. So this all effectively the same and then we just do the same thing.

[00:07:43]
Let's get a Gatsby image in here, we're gonna set the image to be get image and I can't remember who asked before but about getting things from the file. Like when we do this, we've now added a data prop to our page. We don't have access to the props in a traditional way where we're not seeing a function with the props added.

[00:08:11]
But MDX just adds props. So whatever gets passed to this page will get stored into the props. So we can do props data file. And so that is exactly the same as we did on this about page. The only difference is instead of D structuring data, it's like you did this.

[00:08:31]
So that's the only measurable difference is that in this one we can D structure and in MDX we can so props data file. Then as an old we'll say Smashburger on a plate with french fries in the foreground. And if we save that, head back to our homepage and navigate to another blog hey look at that we've got ourselves a Smash burger right on the page queried from graph QL.

[00:09:06]
So the the work Flow is very similar, between MDX and using it in a standard react component. There's a couple of things to just know like that props is set here. That's if you've never seen that before, that can be a little, un-intuitive but it's one of those things that, a little bit of a curve with MDX, but things start to smooth out pretty quickly and suddenly you're just often humming.

[00:09:35]
I really love this ability to write MDX or write markdown and then drop in a react component and then go right back to writing markdown and not have to. It would just not be fun If I had to go in, and I hate having to write paragraph tags every time.

[00:09:51]
It's not hard. It's not much. But it just adds up, and it's just enough friction that I talk myself out of doing the work. And it keeps me from publishing. It keeps me from writing. So I really like this idea of being able to only pull things in.

[00:10:06]
When I actually need something special and otherwise I'm just writing content. I really like that as a general flow. So that's a huge section. We've just learned a lot about images. And kinda digging into this going through it again we looked at how to pull in images statically.

[00:10:28]
When you pull in a static image, you are able to get it just by its path. Wherever you are you do a path to where that image is in your source code. Gatsby will do the rest. It's gonna drop all this stuff in and then you can figure it with the placeholders width and height.

[00:10:44]
There's a full API that you can use, we only looked at a few of the properties. Honestly, you probably won't need most of the properties most of the time there. This is usually gonna be enough. If you wanna use that in a MDX post, you can install that remark plug in and just drop in markdown the way that you always would.

[00:11:04]
You can query using graph QL that shows up as a data prop any graph QL queries export ID As a constant called query, we'll get added as data. At which point you can use this Gatsby image. And if you wanna do something in your MDX, it's the same flow, you export a constant called query, you're gonna get props that have data, and you can use that Gatsby image again.