Getting Started with Drupal GraphQL: A Beginner's Guide

pritish.k

Drupal

Published on 11 Apr, 2018

5 min read

What Is GraphQL?

The GraphQL.org explains the GraphQL as a query language for APIs and a runtime for fulfilling those queries with your existing data.

For beginners, GraphQL provides a complete and understandable description of the data in your API, giving the clients the power to ask for exactly what they need, resulting in a powerful developer’s tool.

Why is it important?

Apps using GraphQL can speed up even on slow mobile network connections. The queries get to the properties of one resource as well as easily take up the references between them.

GraphQL APIs gets every one of the information your application needs in a single request.

While common REST APIs require stacking from different URLs, GraphQL APIs gets every one of the information your application needs in a single request.

Let's Compare it with REST API

“REST is an architectural concept for network-based software, has no official set of tools, has no specification, doesn't care if you use HTTP, AMQP, etc., and is designed to decouple an API from the client. The focus is on making APIs last for decades, instead of optimizing for performance.”

Feature	GraphQL	REST API
Data Retrieval	Have one single endpoint with which one can fetch all kinds of data from an object and other related objects.	We need multiple endpoints for different data, so we end up hitting multiple endpoints.
Number of Network Requests	Can receive the data in a single request.	Have multiple endpoints to receive the data. The user may end up making 2-3 requests to the server.
Sparse Fieldsets / Partials	Allows you to specify the fields (you would like to return to), allowing you to skip the data that is not relevant to your response.	REST does not specify with such implementation specifics.
Types of Response	The response is dynamic in nature. It returns the response depending on the fields and objects we have asked for.	We get a predefined static response which has been initially defined by the developer.
Error Handling	Will always get an OK response from the server. The error message is sent to the client with the response.	The error handling is based on the status code returned by the HTTP headers. The HTTP status code (200, 503, 404) tells us about the type of error.

Introduction to Drupal

Due to its faster access time and given that it uses the power to get what they need, GraphQL is becoming popular every day and Drupal is no exception to its popularity. It was first released in Drupal in the year 2015.

It provides a single interface and a common endpoint between client and server to fetch the desired data or perform manipulations. It is self-sustaining, in a way that it doesn’t rely on any language used in building a specific application.

How To Install?

Install the GraphQL and core modules from Drupal.org.

One must use composer to download the module. If you have composer installed to run the command “composer require 'drupal/graphql' ". This will ensure that the dependent library youshido/ graphql also gets installed.

(You can check here to know how to use Composer to manage Drupal site dependencies)

enabling the graphql and graphql core modules

Now enable the graphql and the core modules. You have turned your Drupal site into a GraphQL server, now.

Drupal GraphQL Modules

The module comes bundled with an interactive GraphiQL and Voyager. GraphiQL, which is an in-browser IDE to explore GraphQL. Here you can run queries, preview results and also get an overview of all the fields available. Voyager is a visual graph representing the core API.

GraphQL Explorer

You can navigate to the explorer via

Configuration → Web services → GraphQL → Schemas.

You can also reach the explorer by hitting the URL {yoursite}/graphql/explorer.

The above image shows a GraphQL dashboard. On the left, you write the queries, and on the right, you get the results. Ctrl-Enter or the play button can be used to run the queries. Ctrl-Space lists down the suggestions of the functions which can be called. The History tab keeps a log of the recently run queries.

GraphiQL or the explorer is a very helpful and user-friendly tool, which allows us to write and debug the queries. This helps beginners to easily understand and get started with, easily.

GraphQL Voyager

The voyager diagrammatically represents the relation between the data present in your graphQL API. This turns the whole schema into a visual graph.

Benefits

Single endpoint - It provides us a single end-point, making it simple to use and learn. This reduces the number of network requests made to the server.
Dynamic Response - It returns the data what is asked for from a single endpoint. The response is not a predefined by the developer, but changes with time and need.
Reduced Queries - With a single endpoint and flexibility to ask all the data in the single request, this reduces the number of requests made on the server. Thus reducing the load on the server.
Easier Frontend development - It will be a boon for the front end developers. This will help in the easier development of decoupled apps. This will also give power the front end developers to change their requests according to their needs and not be dependent on the backend developer to create new endpoints for their needs.

Thus we see, using GraphQL is easy in Drupal. It is easy to learn and understand. It certainly reduces the burden of making multiple endpoints as we do in the traditional RESTful APIs. We will cover more in the coming articles.

Let us know in the comments below how did you find the article.