Apr 20, 2018 - John Entwistle

Decoupled Drupal with GraphQL

Lately, there has been a lot of talk about "Decoupled Drupal" and there has been some great work by some awesome core contributors working on the API First initiative to stabilize the REST and JSON API projects with the hope that they will soon become part of the Drupal 8 core. This work is crucial in enabling Drupal to stay at the forefront of innovation and continue to drive powerful web applications. Because these tools are incredibly robust and flexible, however, there is a need to make some significant architectural decisions when crafting a front-end based on one of these APIs. This is not a bad thing, but it isn’t necessarily the right approach for every project.

Another up and coming player in the world of API first and decoupled Drupal is based on the GraphQL project by the same name. Created by Facebook, GraphQL is an API query language that puts control over data into the hands of the application front-end. Instead of having to be bound by what an API currently offers, the front-end is able to request exactly the information that it needs in a given scenario. To put this into practical, Drupal-centric terms, this paradigm shift can eliminate the need to make multiple consecutive requests to drill down to the right information, can reduce or eliminate the need for back-end teams to create and manage views to curate information in specific ways, and can mitigate the need for different API versions to support different front-ends.

The Drupal GraphQL module has seen very active development for the last several years and is currently nearing a stable release in its third version, and according to the module maintainers it’s already being used in production. Rightfully so. The module makes use of Drupal 8’s typed data to provide a turn-key starting point for building a first-class decoupled application backed by GraphQL, right out of the gate. In an instant, or at least as long as it takes to run a drush pm-enable command, any field contained in any bundle of any entity type can be queried and retrieved. Let’s look at a simple example using GraphiQL, the extremely easy to use GraphQL query explorer.

Example of a GraphQL query and response

Here we're querying the GraphQL server for node entities, and on nodes in the Article bundle specifically we're also pulling the node title and term names of the taxonomy terms in the field named Tags. In response we have a descriptive JSON object with all of the information requested and nothing more to wade through. It's that easy!

At Third and Grove we're excited to be creating applications backed by GraphQL. Keep an eye out here for more on this and other growing web technologies!