NodeJS GraphQL: Searching, Filtering, and Pagination in GraphQL API #8

In this post we will add the filtering and pagination functionality to our application that allow to filter Human character



In this post, we are going to add search functionality to the application. We will be filtering the Human character by name. We will also add the pagination functionality in our GraphQL API.

So let's get started!
. . .

Filtering Human Characters

You already can list all humans, but another feature of we want to add is to search them, by the name and homeplanet. In GraphQL, this concept is the same as mutations: you pass an argument to the links field, used by the resolver to filter the results. We will update the allPeople Query to accept the search query argument
// Construct a schema, using GraphQL schema language const typeDefs = gql` type Person { ... } type Query { allPeople(search: String): [Person]
... } type Mutation { ... } type Subscription { newPerson: Person } `;

NOTE: search: String is optional argument

We also need to update our resolvers, that filters the results based on the query passed in argument, update the resolver as follows
let Persons = [ ... ]; // Provide resolver functions for your schema fields const resolvers = { Subscription: { ... },
Query: { async allPeople(parent, args) { const query = args.search || "";
let persons = Persons if ( query.length > 0) { persons = [] for (let i=0; i < Persons.length; i++ ) { p = Persons[i]; if (p.name === query) { persons.push(p); } } } return persons; }, }, Mutation: { ... } };

If the search query is provided by the user, we will filter the result that matches the name with the given query.

Run the below query in GraphiQL interface to filter the human character
{
allPeople (search: "Luke Skywalker") {
id
name
mass
height
homeworld
gender
}
}

Above query will filter the human characters name which matches the query, it will return the result

You can change the search query to see how the result changes with the query.
. . .

Pagination

Imagine that your Application has thousands of created humans character – that would be awesome for you – but the clients making the request wouldn’t be happy.

Retrieving too much data on a single request is unpractical and may even break your app. Pagination exists to solve this problem, allowing the client to specify how many items it wants. The simple way defined in the GraphQL pagination documentation is to slice the results using two parameters: first, which returns the first n items and skip, which skips the first n items.

We will update the allPeople Query to accept the skip first query argument for pagination purpose
// nodejs-graphql-part-8/after/typeDefs.js#L17 // Construct a schema, using GraphQL schema language const typeDefs = gql` type Person { ... } type Query { allPeople(): [Person] ... } type Mutation { ... } type Subscription { newPerson: Person } `;

Note: (search: String, skip: Int, first: Int) are optional arguments

We also need to update our resolvers, that filters the results based on the query passed in argument, update the resolver as follows
// https://github.com/gufranmirza/nodejs-graphql-swapi/blob/master/nodejs-graphql-part-8/after/resolvers.js#L74 let Persons = [ ... ]; // Provide resolver functions for your schema fields const resolvers = { Subscription: { ... }, Query: { async allPeople(parent, args) { const query = args.search || ""; const first = args.first || -1; const skip = args.skip || -1; let persons = Persons if ( query.length > 0) { persons = [] for (let i=0; i < Persons.length; i++ ) { p = Persons[i]; if (p.name === query) { persons.push(p); } } } if ( first > 0 ) { persons = persons.slice(0, first); }

if ( skip > 0 ) { persons = persons.slice(skip, persons.length); } return persons; },
... }, Mutation: { ... } };

Above query
  • Will filter the human characters with name given in the query
  • Will skip the `skip` number of elements from last
  • Will return `first` number of elements from starting

Run the below query in GraphiQL interface to filter the human character
{
allPeople (first:3, skip: 1) {
id
name
mass
height
homeworld
gender
}
}

Above query will filter the first three characters and skip the last character and will return the two persons object in response

You can change the search query to see how the result changes with the query.
. . .
Congratulations, you’ve reached the end of the NodeJS GraphQL tutorial! Here, In this tutorial, you learned how to build a GraphQL server from scratch.


Never miss a post from Gufran Mirza, when you sign up for Ednsquare.