#Drupal graphql install#
#Drupal graphql generator#
#Drupal graphql full#

Time to start putting our Drupal data to use for real. Stay tuned to this page for details about the differences between the two options. For the rest of this article, I’ll be using the first method since we only need to query data on the page level. Using Static Query allows for more flexibility in how you pull in data. Your page should reload automatically and show the same output as before. We’ll follow a similar pattern to add the Drupal source plugin just below this one: from 'gatsby' at the top of the file. This is what’s allowing the app to access local files via GraphQL, like that astronaut image we saw on the index page earlier. There’s already one plugin defined: gatsby-source-filesystem. Open gatsby-config.js and notice the property called plugins. This will make the package available to use in our config.

#Drupal graphql install#

Head over to for details about this plugin, which is designed to automatically pull data from Drupal via JSON:API.įrom within your project directory, run npm install -save gatsby-source-drupal. However, when working with Drupal (or a number of other common data sources), there’s a simpler approach: source plugins. You can use AJAX, the fetch API, async/await, or any third-party library you like. If you have any experience with React apps and pulling in data, any method to which you’re already accustomed will still work inside a Gatsby app (it’s still React, after all). This is the approach we’ll use to build our queries when we start pulling in data from Drupal. You’ll see this exact query (with a little formatting) as the query prop of the component at the top. Take a look back to src/components/layout.js. On the right-hand side, we’ll see the result.Īnd there we have our site title.

Type “title” and then ctrl + enter (or the play button at the top) to run the query.

Type ctrl + space one more time to bring up the auto-complete, where we’ll see title as an option.

Type siteMetadata (or use auto-complete), followed by another set of curly braces.

Ctrl + space again will show the auto-complete with a much smaller list of options.

Type the word “site”, then another set of curly braces.

Typing anything will also bring up the auto-complete. This gives you a list of all the possible properties available to query.

From here, type ctrl + space to bring up the auto-complete.

This will automatically create the closing brace.

Start by typing an opening curly brace.

To see how this works, we’ll write a query to fetch the site’s title. I like to come to this interface, experiment with queries, then copy and paste that query right into my app. On the left-hand side, we can write queries that auto-complete and see the result of the query on the right-hand side. Let’s begin with a fresh install of Drupal 8.

Familiarity with creating and navigating a fresh install of Drupal 8, including creating content and adding/enabling modules.

Gatsby - We’ll use Gatsby to build our front-end and consume content from Drupal.

JSON:API - This Drupal 8 module will take care of exporting our content in well-formed JSON.

We’ll take advantage of the article content type that ships with the standard profile and the convenient admin interface for content creation.

Drupal 8 - Drupal 8 will be used locally to model and manage our content.

By the end, you should feel comfortable pulling JSON into a Gatsby site and displaying it on the page.

#Drupal graphql full#

We’ll create an index page listing all of our blog posts with a brief snippet of the article, and a page for each post with the full text. This is an experimental idea at this point but its built into the design so doesnt require more efforts to support. In this article, we’ll take a hands-on look at using Drupal, the JSON:API module, and Gatsby to build a simple blog. A Resource-based GraphQL endpoints style where every Sling Resource can be a GraphQL endpoint (using specific request selectors and extensions) where queries are executed in the context of that Resource.

Together, Gatsby and Drupal form a powerful combination that makes an excellent case for decoupling your next project. On the back-end, we can leverage Drupal’s content modeling, creation, and editing tools along with the JSON:API module to serve that content to our Gatsby front-end.

#Drupal graphql generator#

Gatsby, a static-site generator built with React and GraphQL, alleviates these pain points while also providing a straightforward way to consume data from an API. GetPathByAlias('/'.Anyone who’s built a React app of any appreciable complexity knows how challenging it can be selecting and configuring the multitude of libraries you’ll need to make it fast and performant.