Make Data Queryable in GraphQL With Gatsby

Instructor: [00:00] To make managing complex data a little bit easier, Gatsby uses GraphQL. The reason for this is that GraphQL allows us to create relationships between data so that we can query for all of it without having to individually grab each piece.

[00:15] To start, we're going to use the same products.JSON that we've used in previous exercises. This time, we're making one small change. The images are now a relative path from the JSON. That relative path goes right into the images. This is a good thing. Now, we've got a relationship here between the data that we're looking at and the images that they relate to.

[00:41] Next, to get this data, we're going to need a few Gatsby plugins. To set up GraphQL in Gatsby, there's a little more upfront boilerplate. The end result is a much faster, much simpler development process. Let's go ahead and install the required pieces. We're going to be using a few things.

[01:02] We need to be able to load the JSON file, this products.JSON, into Gatsby's internal data store, which is what we can then query with GraphQL. We want to convert those JSON files into a format that we can understand and query with GraphQL. We're also going to optimize these images.

[01:19] One thing that is really useful with Gatsby that we give you for free is, if you use our GraphQL layer, you're able to optimize your images and create multiple versions at multiple sizes to improve browser loading time and to make sure we're not wasting anybody's data by sending huge images when it's only going to be shown at a small size.

[01:39] Finally, we want to take those optimized images and put that into the data store so that we can query for it. Finally, we're going to add a plugin for using gatsby-image that will give us the ability to do lazy loading and using the optimized image data very easily. Let's install everything.

[01:55] We're going to do yarn add gatsby-source-file system. This is the one that's actually going to find the JSON file. We're going to do gatsby-transformer-json. This is the one that will turn JSON files into nodes for our data layer, which we'll talk about more in a second.

[02:13] We're going to use gatsby-plugin-sharp. This is for image optimization. gatsby-transformer-sharp, and the transformer is what takes the image data and puts it into our data layer. Finally, we're going to do gatsby-image. Let's install all of these.

[02:32] Once these get installed, we need to create a gatsby-config to actually use them. Let's come down here. We're going to add a new file called gatsby-config. In gatsby-config, we're going to export a configuration object. That configuration object includes a plugins array.

[02:51] The first thing we want to do is get our files. Let's do gatsby-source-filesystem. For the options, we're going to say the path we want to get is data. After that, we want to include the JSON transformer, so gatsby-transformer-json.

[03:15] Since we don't need any options with this one, we can just pass the name. We'll do the same thing for the Sharp transformer, gatsby-transformer-sharp. Finally, the plug-in Sharp, gatsby-plugin-sharp. Next, we can start the server. Let's do yarn develop. This is going to start up the server.

[03:41] Now, we haven't built any pages yet. What we want to do is, we want to look at the GraphQL layer. We get this as an interactive piece by going to localhost:8000/___graphql. If we open this in our browser, go to the ___graphql, we get the GraphQL Playground. Looking over here on the right, we can see a couple of tabs here.

[04:06] The first one is the one that we're interested in. This is going to give us our different things that we can query. One of them, as you can see here, is allProducts.JSON. If we take this, we can go to allProducts.JSON. The way the GraphQL works is, we define a JSON object without any values.

[04:32] That looks something like this. We're going to go into the edges. The edges are actually, in GraphQL speak, it's the relationships between the data. Then the nodes are the actual pieces of data themselves. That's where we'll see things like the title, slug, description, price, etc.

[04:54] We can go into the node. We're going to get the title, the description, the slug, and the price. We can execute that query by hitting this play button. We can see, now, all of this data is now available to us. We've got our vintage purple tee. We've got the socks. We've got the hat.

[05:17] If we get the image, what you would expect is that we could just do this image and it would work, but you can see we've got a problem. The image is a file. If we look here, we can see the image is referencing an actual file.

[05:33] Gatsby's JSON transformer is smart enough to know that if the Sharp plugin is installed and the JSON file is pointing to an actual image, it will then process that image and optimize it. Here, we now have the ability to get an optimized image.

[05:53] This comes out of Sharp. This is where the gatsby-transformer-sharp comes in. This will give us different settings. If I click on this, I can go in. Let's look at the image here. Go to the image, childimageSharp. We get a lot of pieces. We're going to use fluid. It gives us options. We can set a max with the max height.

[06:18] There are a lot of things that you can do with gatsby-image, but we're not going to talk about those here. Instead, we want to get out the file. We're just going to grab the source for now. We're going to grab fluid and source.

[06:31] When we run this, by clicking the play button, we can see now that we've got this image. This image is available here. If we go to the source set, we can see all the optimized versions of this that have been created.

[06:50] Starting from 200 pixels wide up to 1,200 pixels wide, we can look and see, here's the 200-pixel version. It's small, for smaller browsers. If we get the large version, for bigger browsers, and replace that in here, we can see it's the same image, but it's larger and higher quality. We can actually see all the detail in there on a bigger screen.

[07:17] This is the power of what we're talking about. All of this optimization happened in the background for us. We didn't have to manually go through and create these different versions of the image. Those were created in the background by the transformer-sharp and the plugin-sharp. We're able to now not only query our product data, but also this optimized image set for use with our page builder.