How does GraphQL solve the data over-fetching issue of regular Restful APIs

What is data over-fetching?

The over-fetching issue happens when and end point of the API offer a set of fields for a specific list but clients are interested in different variations of these fields.

For example you have an api the returns a list of employees. http://yourapi/employess

Your API returns most popular fields that may be used by most clients. For example:

  • first-name
  • last-name
  • age
  • position
  • start-date
  • salary
  • department-id
  • reports-to
  • nationality
  • gender

One of the clients of your API needs to display a list of employees but it is interested only in name and position.

There are two options for that scenario

First option: client consume the existing employees endpoint but display only the required fields.

Problem in first option: the client retrieve a load of the data that it doesn’t need.

Second option: you implement a new end point for that specific client. The new end point will look like this url: http://yourapi/employees-shortlist

Problem in second option: there are a few issues in the second option but the most problematic one is that there may be unlimited variations of data sets needed for different client or even the same client. In this case you may find yourself in an infinite loop of implementations of variations of endpoints for clients to satisfy their needs of different versions of data.

What is GraphQL?

GraphQL is a query language for API https://graphql.org/.

How does GraphQL solve first problem?

In GraphQL, the query by definition must contain the required fields for each type being retrieved by the API. On the other hand from server side, the will be only one implementation for that API and GraphQL is responsible for returning the required fields only to clients.

Example of schema definition used in your API:

const UserType = new GraphQLObjectType({
    name: 'User',
    fields: () => ({
        id: {type: GraphQLString},
        firstName: {type: GraphQLString},
        lastName: {type: GraphQLString},
        age: {type: GraphQLInt}
 
    })
});

const RootQuery = new GraphQLObjectType({
    name: 'RoorQueryType',
    fields : {
        user: {
            type: UserType,
            args: {id: {type: GraphQLString}},
            resolve(parentValue, args) {
                return axios.get(`http://localhost:3000/users/${args.id}`)
                .then(resp => resp.data);
            }
        }
    }
});

For more information on how to implement GraphQL schema, please visit the official GraphQL website https://graphql.org/.

Examples of queries used in clients of GraphQL API:

Query #1

{
   user(id: "41"){
     firstName
   }
 }

Query #2

{
  user(id: "41"){
    firstName
    lastName
  }
}

Query #3

{
  user(id: "41"){
    firstName
    age
  }
}

For more information about GraphQL queries, please visit the official GraphQL website https://graphql.org/

As you can see that API schema is defined once with all the fields that can be retrieved from the API. And there are different variations of queries for the same API that are interested in different sets of fields.

Leave a Reply

Your email address will not be published. Required fields are marked *