Gatsby Integration Guide

This tutorial will guide you through the steps required to pull content from LexasCMS into your Gatsby powered website.

Throughout the tutorial, we’ve assumed that you have a basic understanding of Gatsby and its concepts. If you’re new to Gatsby, we highly recommend checking out the official Gatsby tutorial before proceeding.

Create your website

Ensuring that the Gatsby CLI tools are installed, run the following command to create a new Gatsby project.

gatsby new gatsby-lexascms-tutorial

Navigate into your website directory

After you have created your website, navigate into the websites directory.

cd gatsby-lexascms-tutorial

Install the GraphQL source plugin

Next we’re going to install the gatsby-source-graphql source plugin. This is an officially supported source plugin and will enable Gatsby to pull content from LexasCMS’ native GraphQL content delivery API.

Install the plugin by running the following command.

# If using Yarn
yarn add gatsby-source-graphql

# If using NPM
npm install --save gatsby-source-graphql

Configure GraphQL source plugin

Once the GraphQL source plugin has been installed, add the following plugin configuration to the gatsby-config.js file in the root of your website directory.

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: 'gatsby-source-graphql',
      options: {
        // The top level query type, this can be anything that you like
        typeName: 'LexasCMS',
        // The field you'll query against, this can also be anything you like
        fieldName: 'lexascms',
        // The GraphQL content delivery API endpoint for your space.
        // This can be found in your space settings, but you can use the demo
        // endpoint below for the duration of this tutorial.
        url: 'https://bc4c2f6d-7297-4857-8bb2-dd55e80bf5e6.spaces.lexascms.com/delivery/graphql'
      }
    }
    // ...
  ]
  // ...
}

Fetch your content

Now that you have installed and configured the GraphQL source plugin, you should be able to retrieve your LexasCMS content by using Gatsby’s source API.

Open the src/pages/index.js file and replace the contents with the following code:

import React from 'react';
import { graphql } from 'gatsby';

const IndexPage = ({ data }) => (
  <div>
    <h1>My Gatsby Blog</h1>
    <p>Welcome to my Gatsby blog.</p>
    <ul>
      {data.lexascms.blogPostCollection.items.map(blogPost => (
        <li>{blogPost.title}</li>
      ))}
    </ul>
  </div>
);

export const query = graphql`
  query {
    lexascms {
      blogPostCollection {
        items {
          title
        }
      }
    }
  }
`;

export default IndexPage;

This code does the following:

• Fetches your blog posts from LexasCMS using the blogPostCollection query
• Renders a list of blog post titles onto the page

Summary

In this tutorial, you’ve learned how simple it is to manage content on your website using a combination of LexasCMS and Gatsby.

If you would like to try it out yourself, please click here to request a free trial.