Gatsby Tutorial #15 - Multiple Queries

Key Takeaways

All right, then. So, another thing I'd like to show you when it comes to making queries is how to make multiple queries on one page because sometimes you might want to grab two different data sets. Now, to demonstrate this, what I'm going to do is just add a little bit of data to our metadata. And remember that's in Gatsby-config over here. So, all of this stuff is the metadata. Now, all I'm going to do is add on a contact field, and it's just going to be an email address. So, we'll say me@thewebwarrior uk.com. All right, then. So, let me now save this and open up the terminal. I'm going to cancel out of the process and restart the server using Gatsby develop just because we've edited this Gatsby-config file. So, once we've done that, now I want to make a query for that metadata inside this project index page. But we already have a query right here. I just want to make another query as well as this. Well, we can easily do that. All we have to do is come down below this query right here and add in another one. Now, it's still inside this thing inside these angle brackets. We don't create another query like this. All we do is place another item inside this query right here. So, then, what I'd like to do is this time query site and then site meta data. We've seen all this before. This is how we query the metadata. And then inside that, we just want the contact field. So, now we have two things that we're querying, and this is absolutely fine to do. Now, up here, we're logging the data to the console. So, what I'd like to do is open up the console over here. I'm going to refresh, go to the console, and then we can see this object. This is our data object right here. So, anything that this query gets us. So, if we open up this data object, we can see we have the all markdown remark. That's for our markdown files, and we use that right here to get the nodes, the project. But, we also have this other property now, the site. And if we open up that, the site metadata, and then the contact. So, that's how easy it is to make those two queries in one page. Okay. Now, another thing, we could actually name these parts of the query if we want to. So, what I'm going to do is call this one project, like so, and then I'm going to call this one contact. Now, you don't have to do this. This is just sometimes easier when you're using the data in the component. So, if I come up here now, this is actually not going to work. We're going to get an error. Let me save this and show you. You can see this big fat error over here. Now, I still want to see the object when it's output. So, what I'm going to do is just comment out a lot of this over here, like so, and what I'll do is just a little hello inside here, just so we have some content. I'm also going to comment out this thing right here, just so we can see this data output in the console. Now, if I save this, I'm going to refresh over here. Now, you can see inside this data object, we now have two properties, contact and project. Now, before, that was all markdown remark and site. But, this time, those properties have changed to project instead of all markdown remark and contact instead of site. So, it just makes it a little more clear in our component now which properties we want to get, because it might be the case that we use site twice for two separate queries here, or all markdown remark for two separate queries as well. So, by naming them, we're making it clear what the data is inside the component. So, now if I want to get the project, I have to change this thing right here to project, because it's on the data object, then it's the project property. Inside that, it's still the nodes. So, we still say nodes on top of this. So, I can uncomment this now and uncomment all of this as well. And now it should work. I'll get rid of this hello. We don't need that dude anymore. Save it. Come over here. And now it's all working, right? But we've just called it something different. So, we've called this one project, but I also want to get the contact data as well. So, let me below this say const contact and set that equal to data.contact. siteMetadata. contact. So, if we take a look at the object, that was how we got it. So, it was on the data object, then let me just move this over here. If we open this, .contact.siteMetadata.contact again. This thing right here. All right. So, now we can use that inside our template. I'm just going to output it right at the bottom somewhere down here. So, below this div, I'll do a paragraph and I'll say like what you see. Question mark. Email if I can type that is me at and then I'm going to output the contact like so. For a quote. So, we should now just output that contact data. So, if I save it and preview all, we can see this right at the bottom and it's output that email address. So, there we go, my friends. That's how we query several different things inside a single page.