Recipes: Sourcing Data

Data sourcing in Gatsby is plugin-driven; Source plugins fetch data from their source (e.g. the gatsby-source-filesystem plugin fetches data from the file system, the gatsby-source-wordpress plugin fetches data from the WordPress API, etc). You can also source the data yourself.

Adding data to GraphQL

Gatsby’s GraphQL data layer uses nodes to model chunks of data. Gatsby source plugins add source nodes that you can query for, but you can also create source nodes yourself. To add custom data to the GraphQL data layer yourself, Gatsby provides methods you can leverage.

This recipe shows you how to add custom data using createNode().

Directions

  1. In gatsby-node.js use sourceNodes() and actions.createNode() to create and export nodes to be able to query the data.

  1. Run gatsby develop.

    Note: After making changes in gatsby-node.js you need to re-run gatsby develop for the changes to take effect.

  2. Query the data (in GraphiQL or in your components).

Additional resources

Sourcing Markdown data for blog posts and pages with GraphQL

You can source Markdown data and use Gatsby’s createPages API to create pages dynamically.

This recipe shows how to create pages from Markdown files on your local filesystem using Gatsby’s GraphQL data layer.

Prerequisites

Directions

  1. In gatsby-config.js, configure gatsby-transformer-remark along with gatsby-source-filesystem to pull in Markdown files from a source folder. This would be in addition to any previous gatsby-source-filesystem entries, such as for images:
  1. Add a Markdown post to src/content, including frontmatter for the title, date, and path, with some initial content for the body of the post:
  1. Start up the development server with gatsby develop, navigate to the GraphiQL explorer at http://localhost:8000/___graphql, and write a query to get all markdown data:
  1. Add the JavaScript code to generate pages from Markdown posts at build time by copying the GraphQL query into gatsby-node.js and looping through the results:
  1. Add a post template in src/templates, including a GraphQL query for generating pages dynamically from Markdown content at build time:
  1. Run gatsby develop to restart the development server. View your post in the browser: http://localhost:8000/my-first-post

Additional resources

Sourcing from WordPress

Prerequisites

  • An existing Gatsby site with a gatsby-config.js and gatsby-node.js file
  • A WordPress instance, either self-hosted or on Wordpress.com

Directions

  1. Install the gatsby-source-wordpress plugin by running the following command:
  1. Configure the plugin by modifying the gatsby-config.js file such that it includes the following:

Note: Refer to the gatsby-source-wordpress plugin docs to know more about configuring your plugins.

  1. Create a template component such as src/templates/post.js with the following code in it:
  1. Create dynamic pages for your WordPress posts by pasting the following sample code in gatsby-node.js:

  1. Run gatsby-develop to see the newly generated pages and navigate through them.

  2. Open the GraphiQL IDE at http://localhost:8000/__graphql and open the Docs or Explorer to observe the queryable fields for allWordpressPosts.

The dynamic pages created above in gatsby-node.js have unique paths for navigating to particular posts, using a template component for the posts and a sample GraphQL query to source WordPress post content.

Additional resources

Sourcing data from Contentful

Prerequisites

Directions

  1. Log in to Contentful with the CLI and follow the steps. It will help you create an account if you don’t have one.
  1. Create a new space if you don’t already have one. Make sure to save the space ID given to you at the end of the command. If you already have a Contentful space and space ID, you can skip steps 2 and 3.

Note: for new accounts, you can overwrite the default onboarding space. Check to see the spaces included with your account.

  1. Seed the new space with example blog content using the new space ID returned from the previous command, in place of <space ID>.

For example, with a space ID in place: contentful space seed -s '22fzx88spbp7' -t blog

  1. Create a new access token for your space. Remember this token, as you will need it in step 6.
  1. Install the gatsby-source-contentful plugin in your Gatsby site:
  1. Edit the file gatsby-config.js and add the gatsby-source-contentful to the plugins array to enable the plugin. You should strongly consider using environment variables to store your space ID and token for security purposes.

  1. Run gatsby develop and make sure the site compiled successfully.

  2. Query data with the GraphiQL editor at http://localhost:8000/___graphql. The Contentful plugin adds several new node types to your site, including every content type in your Contentful website. Your example space with a “Blog Post” content type produces a allContentfulBlogPost node type in GraphQL.

The GraphQL interface, with a sample query outlined below

To query for Blog Post titles from Contentful, use the following GraphQL query:

Contentful nodes also include several metadata fields like createdAt or node_locale.

  1. To show a list of links to the blog posts, create a new file in /src/pages/blog.js. This page will display all posts, sorted by updated date.

To continue building out your Contentful site including post detail pages, check out the rest of the Gatsby docs and additional resources below.

Additional resources

Pulling data from an external source and creating pages without GraphQL

You don’t have to use the GraphQL data layer to include data in pages, though there are reasons why you should consider GraphQL. You can use the node createPages API to pull unstructured data directly into Gatsby sites rather than through GraphQL and source plugins.

In this recipe, you’ll create dynamic pages from data fetched from the PokéAPI’s REST endpoints. The full example can be found on GitHub.

Prerequisites

  • A Gatsby Site with a gatsby-node.js file
  • The Gatsby CLI installed
  • The axios package installed through npm

Directions

  1. In gatsby-node.js, add the JavaScript code to fetch data from the PokéAPI and programmatically create an index page:
  1. Create a template to display Pokémon on the homepage:
  1. Run gatsby develop to fetch the data, build pages, and start the development server.
  2. View your homepage in a browser: http://localhost:8000

Additional resources

Sourcing content from Drupal

Prerequisites

Directions

  1. Install the gatsby-source-drupal plugin.
  1. Edit your gatsby-config.js file to enable the plugin and configure it.
  1. Start the development server with gatsby develop, and open the GraphiQL explorer at http://localhost:8000/___graphql. Under the Explorer tab, you should see new node types, such as allBlockBlock for Drupal blocks, and one for every content type in your Drupal site. For example, if you have a “Page” content type, it will be available as allNodePage. To query all “Page” nodes for their title and body, use a query like:
  1. To use your Drupal data, create a new page in your Gatsby site at src/pages/drupal.js. This page will list all Drupal “Page” nodes.

Note: the exact GraphQL schema will depend on your how Drupal instance is structured.

  1. With the development server running, you can view the new page by visiting http://localhost:8000/drupal.

Additional Resources

Edit this page on GitHub