Advanced GraphQL Advanced GraphQL

Data Loaders Exercise

Check out a free preview of the full Advanced GraphQL course:
The "Data Loaders Exercise" Lesson is part of the full, Advanced GraphQL course featured in this preview video. Here's what you'd learn in this lesson:

In this exercise, students use data loaders to speed up your queries.

Get Unlimited Access Now

Transcript from the "Data Loaders Exercise" Lesson

[00:00:00]
>> Scott Moss: Alright, so here is what you are going to be tasked to do.
>> Scott Moss: I think, I said the other one was hard, I think this one is harder [LAUGH]. All right, so what we're going to do is, on the project resolver, inside of project.resolvers, there's a tasks resolver.

[00:00:17] No, this is the extra credit one. Don't do that one, sorry. All right, what you're gonna do is, on the task resolver.
>> Scott Moss: You're gonna come down to this place where is says, taskResolvers. Basically, this is an object that I use to put field resolvers on for both DEV task and design task.

[00:00:43] Instead of writing them both in two places, I'll just put them in an object and spread over them, we'll keep it dry. So, you need to replace this call to the data base with a loader instead. So use a loader instead here, because if you look at our query that we had before, which was like this.

[00:01:03] This project call is killing us because it was probably already resolved up here, so now we're doing it again. We could just be loading it from cache at this point. So basically, if we use the loader in this resolver, and then we use the same loader in this resolver, it's gonna hit straight from cache.

[00:01:20] So it'll batch these, and then it'll get these from cache. Where as right now, it's getting from database, getting from database.
>> Scott Moss: Right, and then, you gotta also remember each one of these is probably doing a database call whereas the loader does one database call. So, it's not only is it batched, it's like more efficient too.

[00:01:43] And then this is from cache. So that's what you want to, you want to use the loader here instead. And then, the other one you want to do is on the, where is it at? No, that's just the example. Yeah, that's the only one you need to do.

[00:02:03] And if you want to tackle the extra credit one, no, I'm sorry, there is one. Okay, let me take that back. Yeah, so you need to do the project on the task resolvers. And you scroll down, there's a DevTask one. This one's gonna be tough,
>> Scott Moss: But I think you can do it.

[00:02:24] What you need to do here is this repo filled on a DevTask is actually making a call to GitHub. And what it's doing is, it's basically just gonna look at the, if you give it an org, it'll look for a repo by that name that you give it.

[00:02:43] To see if it exists and it will populate it and send back all these fields. Github has like rate limiting issues, you don't want to be hitting github all the time. It's the same data if you just ask for it so, you probably want to use data loader for this too.

[00:02:55] Data loader is not just for database, cache. It's also for caching and batching access to third-party API's, as well. So this one's more advanced, but I definitely recommend swapping out reposForOrg. And basically, these two lines can be swapped out with a loader, instead. And if you go to loaders.js, there's a placeholder for you to create that, create GitHub loader.

[00:03:20] This one's tough, you'll have to look at GitHub.js to understand how this reposForOrg work. I mean, it's pretty simple, it's literally just reading my tipeio, and sending back all the publicrepos for it. So if you give it a repo with a name that exists in my org, that's public, it should find it.

[00:03:38] But we wanna batch those. So those are your two tasks. Right, the loader for the task resolver which is I'm sorry, for the project owner task resolver which is here.
>> Scott Moss: And then the other one is doing the repo one.
>> Scott Moss: And again, you can look inside the loader.

[00:04:07]
>> Scott Moss: You can see how all this stuff is working.
>> Scott Moss: And if you just wanna get more practice on just writing a loader, even though, although I'm not really using this one, you can write a loader here. So you're gonna warm up to the createGitHubLoader. Write the task loader here, which is very similar to the project loader.

[00:04:26] In fact, it's literally the same thing. You can just replace projects with tasks and it'll work everywhere. I didn't warm up to this one. But you don't really have to do this one right now. This is just here for some more examples. Everybody clear on what they need to do?

[00:04:45]
>> Scott Moss: All right, any questions over here?
>> Scott Moss: Can you run the playground for task?
>> Scott Moss: Let's see, run the playground for task.
>> Scott Moss: I've got to give it an ID, Let's do Task with the project.
>> Scott Moss: There we go. Can we use the info to create the db concurrently?

[00:05:28]
>> Scott Moss: I guess that really depends on your database. What that means concurrently? But if you mean running simultaneous resolvers at one time, you can do that by just batching your graphic queries. And then those with [INAUDIBLE] but if you're talking about running concurrent database queries, that is up to your database.

[00:05:47] You have the info object is the AST that provides you the information to do whatever you want. So if your database can run concurrently, for sure. So if you're thinking about doing like a promise dot, a promise.all. And doing database queries in that, then yes, you can totally do that.

[00:06:03] I do it all the time.