Gatsby and GraphQL Schema Stitching with Drupal

conference: Decoupled Days 2019, New York City

Gatsby and GraphQL Schema Stitching with Drupal

With its 2.0 release, Gatsby added experimental support for GraphQL schema stitching to Gatsby’s already-excellent GraphQL system. This new feature allows you to create a single, universal graph of data composed of multiple GraphQL endpoints.

What does this mean? With traditional web services, each separate service needs to be queried separately. But schema stitching allows you to stitch together, for example, Gatsby’s plugin data with GitHub’s GraphQL API and with Drupal’s GraphQL module so that any data can be combined and retrieved with a single GraphQL query.

Previously, when looking to integrate Drupal and Gatsby, the natural choice has been to use the JSON:API module that is included with Drupal core. Now, using Gatsby’s official gatsby-source-graphql plugin, you can install Drupal’s GraphQL module and enjoy a simpler building experience as your Gatsby React components query Drupal directly through Gatsby’s built-in GraphQL API.

In this session, we’ll discuss:

  • The benefits of a universal GraphQL graph over traditional web services like REST and JSON:API.
  • Setting up GraphQL with authentication on a Drupal site.
  • Configuring Gatsby’s gatsby-source-graphql plugin.
  • How to query Drupal via Gatsby’s Graphiql interface.
  • Specific GraphQL queries to build a multi-lingual Drupal site using the Umami sample content.

A demo website, including full Git repository, will be provided for attendees to try out the Gatsby/GraphQL/Drupal code.

Slides
Gatsby.pdf (10.89 MB)