Prevent GraphQL Queries from Over-fetching from the Database
With GraphQL, you can easily avoid over-fetching from the client. It's harder to prevent over-fetching from your database. Learn how to use the GraphQL info argument to avoid over-fetching data on your server.
Ryan Chenkie: [0:00] Here's a simple GraphQL server. We've got one type, which is user, we've got one query, which gives us a list of users, we've got some user's data, we've got a function to return those users, and then finally, a resolver to resolve those users out.
[0:15] If we want to query for just first name and last name, we get that data here. On the server, the call to our data in our getUsers function is returning all of the fields on our data. Now, that's not a big deal here in this contrived example. But when you're calling a real database, this can have some pretty serious performance impacts, especially if your data model is large.
[0:36] Let's clean this up a bit with the GraphQL info argument. GraphQL resolvers have four arguments. We've got parents, which has information about the resolver that is the parents to this current one. We've got args. Any arguments that we pass in with our query would be found here.
[0:51] We've got context, which gives us info about the request itself. Headers, for example, can be picked up on context.
[0:59] Then finally we have info. The Info argument is an abstract syntax tree, or an AST. It gives us all sorts of useful data, but it's a pretty large thing to work with. It's a bit tricky to parse in its raw form, so we'll use a library to help us out with parsing it.
[1:16] Install the GraphQL parseFields library. npm install graphql-parse-fields.
[1:26] Now, we require that library up at the top here -- const parseFields = require ('graphql-parse-fields');
[1:38] Run that info argument now through the parseFields function, and that will give us a result that is a lot easier to work with. parseFields is going to give us an object with the fields that are coming in the request from the client. We'll turn that into an array that we can work with.
[1:55] We'll give ourselves a const of requiredFields. That's going to be equal to object.keys on our parse of the info object. Now we can pass requiredFields to our getUsers function.
[2:10] I've got this function down here called pick, which is going to take an object and then a set of required keys, and then just strip out anything that isn't required. We can use that in our getUsers function.
[2:23] We'll receive requiredFields here, and then in the return, we will map over our users. We'll take a user and we'll run it through this pick function, and we'll pass in requiredFields.
[2:37] Now when we make our query, we still just want first name and last name, and we still get that over here. Now on the server, we just get our first name and last name in the call to data itself. We can prove this out a bit more if we take out last name. Now in our query, we just get first name coming through on the server as well.