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