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

  • Overview
  • Transcript

3.4 Writing Page Queries

Pages can have queries, too. In fact, it's desirable for pages to be responsible for fetching and using their own data. Learn how to write page queries in this lesson.

3.4 Writing Page Queries

In the previous lesson, we recreated our employee list by selecting the data with graphQL. And we saw that while it did require some extra code on our part, we ended up with the same results. And really, we have a more robust and flexible way of getting that data. Now let me once again say that's what we did originally by just fetching that JSON file. And then working straight with that data is perfectly fine in this particular case, we didn't have very complex data. However, as our data becomes more complex or we start working with multiple data sources then it makes more sense to use GraphQL. But for the sake of examples, we are perfectly fine using GraphQL to do this. So, now we want to recreate the individual employee pages. And we already have some of that done. We can reuse the majority of our previously existing code, we just need to make a few changes. Like for example, employees is no longer an array of objects. Employees is just one step in the chain to get to the actual array which is edges. So we have to go through employees then data then all employees Jason, and then edges. So the first thing we need to do is replace employees with the new structure there. Now remember that edges is an array of objects that have a node property. And then that node object has the information that we queried first name, and last name in this case. So I'm going to change this parameter to just items, something generic so that inside of this function. We can recreate the EMP variable, and we can set that to item dot node. And then we don't have to change anything else as far as our existing code is concerned. So as far as this, we are done, so we can turn our attention to the employee template. Now one thing to remember is that title is not part of the page context anymore. Since we only retrieved the first name and the last name, that is the only information being passed as the context. So that means inside of employee, we have to fetch the title for this particular employee. And we do that once again with graphQL. Now, you might be thinking that, wait a second, this is not very performant. We are issuing multiple queries to essentially get the same data and yes, you are correct. But remember that this is not something that is going to be run on the server. This is for building a website. So performance really doesn't matter as far as building is concerned. Now, if this was running on the server, I would say yes. We need to refactor this so that we issue as few queries as possible to get to the information that we need. But that's not the case. So from that standpoint, it's perfectly fine to issue queries inside of our pages. And really, I like this particular approach because now we're gonna have the code for displaying the employee directly inside of this template. So this template is strictly for displaying an employee, and everything necessary for displaying that employee is right here. So I like that. So the first thing we need to do is import graphQL from Gatsby. And really, we don't need the link here, because we didn't use it, so we can get rid of that, and then we will issue a query. But we're going to export this as query. And once again, we will use the back tick in order to delimit this string, and we are going to have a query function. Now, you can think of a graphQL query function, just like a normal function in that it's something that is logically going to execute. You can have parameters which in this case, we're going to have the first name and the last name both are strings. And these are parameters that we can then use in the actual query. So now we're going to use that employees at Jason. If you'll remember we had two schemas. We had allEmployeesJson, and then we had employeesJson. Since we are retrieving an individual employee, we're using the employeesJson. And we want to select the employee that has the first name equal to the first name that was provided as the parameter. So we have a function called query here, we have two parameters, first name and last name. And we are going to use those parameters in this internal query here. So we have the first name, which is going to be equal to the first name parameter. Then we will have last name and we will do the same thing that it is equal to the last name parameter. And then we will simply just select the title because that's all that we need. Now, you could make the argument that we should also retrieve first name and last name. And yeah, we could agree with that. Because once again, this goes back to doing everything that we need to display an employee here. But I would also make the argument that we already have the first name and last name, it was given to us through the page context. So yeah, I don't know. You can retrieve that information if you want to, I'm just going to stick with title. Now, the beauty of this is that we don't have to really specify first name and last name. Because that's automatically going to be pulled from the page context. So by default, behind the scenes Gatsby is going to see that there is a query for this page. It's going to execute that query, passing in the first name and last name from the context. It's going to get a response, and then it's going to pass that as a prop as data to our component. So that then to get to the title, we use data, and then employees Jason, and then title. And there we go for the first name and last name, we can still use the page context. However, once again if you wanted to use the first name and last name inside of the query, you could do that. And then you could use data dot employees Jason dot first name and last name to output that information. So with that done, let's stop Gatsby. Let's get it started once again, and hopefully everything will work just fine. We'll first of all see if there's any errors in the console. And I don't think that there is but you never know those are famous last words and it looks like everything is okay. So once this is done building development bundle, we will switch on over to the browser. And we will see if we can navigate to those pages and view them in the browser. That's really the most important part. So let's go to the browser. Let's refresh the page here. If we click on the John Doe link, there we see the page for John Doe. And of course, we would see the same result for Jim James. Now to prove that this is actually what's going on, we can just modify our component here so that the name is on top and the title is below. And there we go. We see that's been reflected in the browser. So now we have recreated not just our employee list but our employee pages using graphQL to select that data. And work with them inside of their respective pages.

Back to the top