GraphQL

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

Founder @ednsquare | Continiously Designing Testing Coding at ednsquare | Any query? shoot an email at ednsquare@gmail.com

Published · May 31 2020

Previous tutorial: Adding Realtime GraphQL Subscriptions in NodeJS and Express #7

Starting boilerplate code for this chapter can be found Github

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 
// nodejs-graphql-part-8/after/typeDefs.js#L17

// 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
// 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 || "";

        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.

Final code for this chapter can be found Github