Using Gatsby with Agility CMS
Tags: gatsby, webdev, cms, react
Published: 2019-08-28 19:53:34

[Gatsby](https://www.gatsbyjs.org) is an amazing framework for Static Site Generation.  Built on top of [React.js](https://reactjs.org), it's been around for about several years, and it's solid.

Recently, my colleague [James Vidler](https://github.com/jamesvidler) wrote a [Gatsby Source Plugin](https://github.com/agility/gatsby-source-agilitycms) for [Agility CMS](https://agilitycms.com).  It allows you to build sites using Gatsby with content pulled directly from Agility's Headless Content APIs - including dynamic page routing.

Let's take a look!

### Create A Free Agility Account
It only takes a minute to create an Agility CMS account, and it's free forever. [Sign up here](https://account.agilitycms.com/sign-up?product=agility-free).  

Once your account is created, we'll need to grab your GUID and API Keys.

### Get the Code

Make sure you have Gatsby CLI tools installed (we are using npm here...)
```
npm install -g gatsby-cli
```

Go ahead and clone the starter repo on from GitHub that has all the code you need to get started.
```
git clone https://github.com/agility/agility-gatsby-starter.git
```

Resolve any dependencies

```
npm install
```

Run it in development mode!
```
gatsby develop
```

The site is just a starter, but it has a bunch of interesting features that you can use to build from.  Let's hook this code up to your new Agility CMS instance that you just created.

## Hook it up to your Agility CMS instance
Edit the **gatsby-config.js** file and repace the *guid* and *apiKey* with yours.  

You can [find your API Keys](https://help.agilitycms.com/hc/en-us/articles/360031919212-Retrieving-your-API-Key-s-Guid-and-API-URL-) by navigating to Settings, then clicking on API Keys. 

![alt text](https://help.agilitycms.com/hc/article_attachments/360035503851/mceclip0.png "Agility CMS - Settings - API Keys")

If you use the "preview" key, you won't have to publish to see the changes you've made show up. If you use the "fetch" key, make sure you've published any content you wish to see changed.

## How Does It Work

The Gatsby Source Plugin downloads all the Pages on the Agility CMS Sitemap, as well as any Shared Content that's referenced on the *sharedContent* property on of the gatsby-config.js file.

All of those pages and content are then made available in GraphQL to the React Components you will write to render those pages.

Check out the Jumbotron component, which is used to render the Jumbotron module.  Here it is in the Agility Content Manager:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mjv2brybc17iyqdoy25u.png)


And here is the code used to render it.  Notice that the *title* and *subTitle* fields are available as properties the *item.fields* object.

``` javascript
import React, { Component } from 'react';
import { graphql, StaticQuery } from "gatsby"

import './Jumbotron.css'

export default class Jumbotron extends Component {
    render() {    
        return (
            <section className="jumbotron">
                <h1>{this.props.item.fields.title}</h1>
                <h2>{this.props.item.fields.subTitle}</h2>
            </section>
        );
    }
}
```

When we add new modules and content definitions to Agility, the components we use to render those modules will automatically get the strongly typed data delivered to those modules as props.  

Sweet!

...

This is just the tip of the iceberg for working with Gatsby and Agility CMS.  

Let me know in the comments below what you think!