7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 10Length: 1.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Querying With GraphQL

Simple JSON file reading is fine for simple data, but Gatsby shines when we need to work with more complex data. In this lesson, you'll learn how to install and configure source and transformer plugins, and how to use GraphQL to query our JSON data.

Related Links

3.3 Querying With GraphQL

Over the past two lessons, we generated pages using data. And that is a wonderful thing because for the vast majority of our sites, we want data driven sites. However, our data was very simplistic. And as such, our approach was very simplistic. I mean all we did is read a JSON file, and then worked with that data. I mean there's nothing complex there. However, if we start working with much more complex data, then it makes more sense to use GraphQL. Because this gives us a whole lot more power, especially when working with more complex data. Now if you're not familiar with GraphQL, unfortunately, we're not going to go through a little tutorial. However, there is a visual query builder that we can use, and you will get a sense as to how SQL works from there. Now I should point out that if you do want to get involved with GraphQL, we do have another course here at Tuts+ that teaches you how to implement GraphQL using Laravel. Now it is Laravel specific but, there are some universal things as far as GraphQL is concerned. All right, so, the first thing we need to do is install some plugins. Because we have data, but we need to tell Gatsby that we have data that it can load into its GraphQL repository, if you will. So there are two packages. We'll use npm install, we want to save these. And the first is going to be gatsby-source-filesystem. This plugin is so that Gatsby will read files on the file system, and import that into the GraphQL feature, if you will. However, since we are working with JSON data, it needs to know how to transform that data. So the second plugin Is called gatsby-transformer-json. And then as this is installing, let's configure our project. So we need to go to gatsby-config. And we now have two plugins that we need to add to our configuration. The first is going to be the file system. However, this is going to be a little bit more involved because there are some options that we need to set. So instead of just having the name of the plugin, like we did with the helmet plugin, we're going to have an object. The first property is called resolve. And this will be the name of that plugin. So that is gatsby-source-filesystem. Then there is an options. And this has a path, because we need to tell this plugin where our data resides on the file system. And that is inside of our data folder. So path is going to be set to data, and that's all that we need to do for that plugin. For the transformer plugin, all we have to do is just specify the name, so gatsby-transformer-json, and there we go. So with that done, our project is configured, we can close out of that. And by now everything should be installed. So let's run gatsby develop, and let's hop on over to the browser because we want to look at the GraphQL Explorer. So this is localhost 8000 and __graphql. And if this is up and running, it is over on the left hand side, we have all of the schemas available to us. Early on I said repository. That's not really correct. These are all the schemas that we can use inside of our Gatsby project. So if we wanted to work with all the directories, or all of the files, but more importantly, is the allEmployeesJson, and the employeesJson. So behind the scenes, Gatsby, with the file system plugin, read the data folder, grabbed all of the JSON files which we only have one, and it generated these schemas based upon that single file. So the allEmployeesJson we can use to retrieve all of our employees. For the employeesJson we can use to retrieve a single employee. So let's try to replicate at least the first page which is the, Employee index or the list. So to do that we want to retrieve all of our employees. So let's expand this. And you're going to see a lot of stuff that has really nothing to do with our data. I mean, where is the title, the first name and the last name? Well, this is a little convoluted. And it's not particular to GraphQL, but this is more of a Gatsby thing. So inside of allEmployeesJson we need to drill down to edges and then down into node. And then the nodes are the individual objects. So a node from our data store is where we would find the first name, and the last name, and the title. So if you click on those things, you're going to see this middle section start to light up with everything that we have clicked. And this is our actual query. So here we're saying that from allEmployeesJson, and edges, and node, select the firstName, lastName, and the title. And whenever we run this, we are going to see that data. So our return result from the query is gonna have a data property, which will have an allEmployeesJson property, which will have an edges property which is an array. That has objects called node. And then those objects have our firstName, lastName, and title. So yes, it is more involved. It seems counter-intuitive, but this is a much more powerful way of working with data within our Gatsby project. So as far as our index is concerned, or our list, if we look at the employee list, all we are showing is the first and last name. So for showing this list, we don't really need the title. And that is awesome because we can tell our GraphQL query to omit the title. So that all we need is the first and last name. And in which case that's all of the data that we would get. So this is the query that we're going to execute. Now we don't need the query name here or the query term. We don't need the name of the query, which in this particular case is MyQuery. We just need the stuff from the opening curly brace, to the closing curly brace. So let's go ahead and copy that. Let's go to our code, and inside of gatsby-node, we need the GraphQL function. Now this is a sibling of actions. So after the closing curly brace for where we destructured actions to get createPage, we're gonna have a comma, and then we want to graphql. And in order to use this graphql function, we need to do so asynchronously. So we're going to mark this function as async so that we can await this. We're going to comment out employees that we currently have. Let's go ahead and comment out our use of employees for creating each individual page. And we will use the GraphQL function to make our query. So we will simply just call GraphQL, although we do need to await it. And then for the query, I'm going to use a back tick to, Delimit the string. That way we can have our query on multiple lines. And that should give us the data that we want. And to get to that data, as I mentioned, we first of all are going to have the employees, because that's our variable. Then we have data, then we have allEmployeesJson. Then we have edges. And this is the array that has those node object. So in order to prevent us from having to do anything inside of our templates for the employee list, we are going to transform the contents of edges. So here we're going to say employees is going to be the result of calling map. And we are simply going to just return an object that has the first name and last name. So here, we have firstName. We'll use our item, node. And then firstName. For last name, we will have item, node, and last name. So this will end up creating a new array that has just some objects, that have firstName and lastName. That's all that we need inside of our employee list template, at least I think it is. So we're probably gonna have to restart. So let's go ahead, let's stop the project, and call Gatsby develop once again. If there's any errors, then we should see them here in the console. But I don't think we're going to end up with anything which are famous last words. But so far, so good. So now we should be able to go to our employees list page, just the index of employees. And we should see the same exact thing that we saw before, except that now we are using GraphQL to get our data. So let's refresh and voila, we have the same thing there. In the next lesson, we will generate the individual pages for each employee. However, we'll need to take a slightly different approach because we no longer have the title in our query results. But that's okay, that's perfect. We'll get around that in the next lesson.

Back to the top