How to handle Contentful content data in Gatsby

Since this question was posted, an official Contentful plugin's been added to Gatsby's collection (official as in created by Gatsby team, not Contentful): https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-contentful

An example site's src code is here: https://github.com/gatsbyjs/gatsby/tree/master/examples/using-contentful

The plugin processes markdown via gatsby-transformer-remark and produces the resultant HTML, which you can access via Gatsby's GraphQL server w/ a query like this one from the example proj:

 contentfulProduct(id: { eq: $id }) {
      productName {
        productName
      }
      productDescription {
        childMarkdownRemark {
          html
        }
      }
      price
    }

You can use the plugin to connect both to the Content API (for published assets/content) and/or the Preview API (for both published and draft content/assets).

We use NODE_ENV to pull from the Preview API in dev and the Content API in production.


Here's the script I am using to pull down data from Contentful: https://gist.github.com/ivanoats/e79ebbd711831be2536d1650890055c4

I run this via an npm run script before gatsby build.

I would love to work on a plugin or get ideas on better architecture for this process.

I wrote a post on this architecture in more detail on the Aerobatic blog