fbpx Skip to content

Aquent | DEV6

Getting Started With GraphQL

Written by: Tunji Akinbami

Front end web development traditionally focuses on creating features that enhance the user experience when interacting with an application. Over the years, we’ve seen a number of technologies that have been developed to address user interface development requirements such as React (focusing on the view), Angular (bringing MVC architecture to the frontend), CSS preprocessors and so on.

However, the frontend provides little functionality when it comes to manipulating or querying data. The traditional architecture is to receive data through some form of web service (typically REST, SOAP or WebSockets) then we consume this data on the client side. RESTful architectures have been the standard way of creating web APIs for over a decade, popularized by startups (e.g. the early years of Facebook) that wanted a way for third party developers to interact with their stack and create applications. While it solves the problem of data transfer it has certain limitations such as:

  1. Over-fetching: Sometimes the data we’re trying to consume can be complex; we might have to perform multiple iterations with code to eventually retrieve the data we want. Apart from being difficult to write it could weaken the performance of our applications particularly in mobile as we’re having to make multiple round trips between the server and client.
  2. Architecting REST applications is no trivial task. Fields and additional data are added to REST endpoints as the system requirements change. As a result, REST endpoints have to be versioned and documented to keep up with the pace of requirements however, this can lead to code duplication and spaghetti code.
  3. REST endpoints are usually weakly-typed and lack machine readable data.

Enter GraphQL.

GraphQL is neither a front or back end technology, rather it sits somewhere in the middle layer. Unlike REST APIs, one of the core features of GraphQL is the ability for the client side to make various queries and get exactly what it needs from the server without having to change the API on the server to accept new parameters, or return new objects or update the query that it makes to the database, etc. As you may have guessed, the QL part starts for Query Language, similar to that in the SQL acronym.

graphQL

The integration of GraphQL makes client side development more flexible because it’s less reliant on the server side for changes to endpoints. Traditionally, we tend to build applications with the creation of the data models first then we deal with the UI components afterwards. Now our approach revolves around the product first and the multiple clients or devices accessing our application data such as mobile phones and watches.

GraphQL Nomenclature

Here are some of the key terminologies you might come across when using GrahpQL.

Query: a query is made when we fetch some data from a GraphQL server. In GraphQL you have the ability to pass arguments to fields for instance:

Query:

{
  customer(id: "1AC97") {
    firstName
    lasName
  }
}

Output:

{
  "data": {
    "customer": {
      "firstName": "Tunji",
      "lastName": “Akinbami”
    }
  }
}

In the code above we are attempting to retrieve some customer data with a given id. The output data is also limited to the fields we pass in the query code, in this case it’s firstName and lastName.

Mutation: Mutations are used to modify server-side data from the client side.

Schema: A schema defines what queries and mutations can be done on a GraphQL server. We can define what each query or mutation takes as input and returns as output.

Type: Type defines the shape of the response data that is returned from the GraphQL server.

Input: Similar to type but defines the shape of input data sent to the GraphQL server.

Scalar: This refers to primitive data types such as String, Int, Floats and Booleans.

While many people have been quick to say that GraphQL will replace REST architecture, we’re seeing more trends where both technologies sit side by side in the technology stack. In a later post, we will look at using GraphQL in an actual application and use some of its core features like mutations and queries.