GraphQL — A query language for APIs

What is GraphQL?

Some features about GraphQL

GraphQL is an open-source query and manipulation language for APIs developed by Facebook in 2012. Contrary to REST architecture, GraphQL is not an API specification; it’s a runtime for fulfilling queries with existing data. Backbend GraphQL provides a type system that describes a schema for data; in return, this gives front-end API consumers to request the exact data they need.

GraphQL vs REST

GraphQL is a query language. When developing our code, we define a type that GraphQL can use to query against. The awesome thing about GraphQL is that it adapts to the code and data at the client’s end.

• GraphQL can provide customers with the exact data they need. One of the most common problems with traditional REST APIs is that they tend to cause over fetching, obtaining more information than needed. A REST query will extract all the data from a specific resource, while GraphQL will only get what is dictated in a query.
• There is no specific programming language or database that has to be used for this to work.When utilizing GraphQL we minimize the number of roundtrips made from the client to the server to get all required data. When we use REST we have to visit a specific endpoint to get the data we need, as there is an action made inside a controller to serve just that data.
• One thing that can be confusing about big applications using REST is the number of endpoints (it can be enormous)… by using GraphQL we can eliminate that as we only have one endpoint.
• Another great thing about GraphQL is that you only get what you ask for. You won’t get a lot of data that you don’t need? How is that — well the reason is that a GraphQL query is defined by fields that you would like returned.

Like this example:
We want to get the information of an order detail, but we need to know the information of the products, the account of the user and the order amount final, to do this we can build a query.

query{
  allOrderDetails{
    orderDetailId
    orderDetailName
    orderDetailQuantity
    product {
      productName
      productDescription
      productSku
      productStatus
    }
    order {
      orderId
      orderAmount
      orderShipName
      orderEmail
      orderStatus
      account {
        accountFirstName
        accountLastName
        accountEmail
        accountStatus
      }
    }
    
  }
}

This would produce the following response:

{
  "data": {
    "allOrderDetails": [
      {
        "orderDetailId": 1,
        "orderDetailName": "Adding Mouse Wireless",
        "orderDetailQuantity": 1,
        "product": {
          "productName": "Mouse Wireless",
          "productDescription": "Lorem ipsum dolor sit amet, cUt enim ad minim  ea commodo consequl, sunt in culpa qui officia deserunt mollit anim id est laborum.",
          "productSku": "P001",
          "productStatus": true
        },
        "order": {
          "orderId": 1,
          "orderAmount": 720,
          "orderShipName": "Technologies From Home",
          "orderEmail": "email@email.com",
          "orderStatus": true,
          "account": {
            "accountFirstName": "Miguel",
            "accountLastName": "Ponce",
            "accountEmail": "miguel.ponce@mail.com",
            "accountStatus": true
          }
        }
      },
      {
        "orderDetailId": 2,
        "orderDetailName": "Adding Keyword Wireless",
        "orderDetailQuantity": 1,
        "product": {
          "productName": "Keyword Wireless",
          "productDescription": "Lorem ipsum dolor sit amet, cUt enim ad minim  ea commodo consequl, sunt in culpa qui officia deserunt mollit anim id est laborum.",
          "productSku": "P003",
          "productStatus": true
        },
        "order": {
          "orderId": 1,
          "orderAmount": 720,
          "orderShipName": "Technologies From Home",
          "orderEmail": "email@email.com",
          "orderStatus": true,
          "account": {
            "accountFirstName": "Miguel",
            "accountLastName": "Ponce",
            "accountEmail": "miguel.ponce@mail.com",
            "accountStatus": true
          }
        }
      },
      {
        "orderDetailId": 3,
        "orderDetailName": "Adding Charger Wireless",
        "orderDetailQuantity": 1,
        "product": {
          "productName": "Charger Wireless",
          "productDescription": "Lorem ipsum dolor sit amet, cUt enim ad minim  ea commodo consequl, sunt in culpa qui officia deserunt mollit anim id est laborum.",
          "productSku": "P009",
          "productStatus": true
        },
        "order": {
          "orderId": 1,
          "orderAmount": 720,
          "orderShipName": "Technologies From Home",
          "orderEmail": "email@email.com",
          "orderStatus": true,
          "account": {
            "accountFirstName": "Miguel",
            "accountLastName": "Ponce",
            "accountEmail": "miguel.ponce@mail.com",
            "accountStatus": true
          }
        }
      }
    ]
  }
}

The above request would not be possible to make with REST as the typical REST endpoint would return more or less data than you need and you then need to use the returned data to request another endpoint to build a full dataset. It depends on how the developers behind the API you are consuming have made the implementation on their end. This is a really important and different advantage of GraphQL. It is really beneficial if we want to share this API to many apps because they can use the exact fields that they really will need.