7

I'm interested in using Gatsby to build a Netlify static site using content from Contentful

Netlify has this nice gettting started Gatsby guide: ​​https://www.netlify.com/blog/2016/02/24/a-step-by-step-guide-gatsby-on-netlify

But I'm a bit unsure of how to bring Contentful into the mix. Do I need to write scripts to convert my Contentful content into Gatsby 'markdown'?

Any ideas, ideas, links appreciated!

ChatGPT
  • 5,334
  • 12
  • 50
  • 69

3 Answers3

8

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.

Mateusz Kocz
  • 4,492
  • 1
  • 25
  • 27
Brandon
  • 7,736
  • 9
  • 47
  • 72
  • Hi, What will the query format if I have to get data for 2 ids(or more). Is there anything like "in". Please help. – khushboo29 Oct 23 '18 at 06:50
3

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

Ivan -Oats- Storck
  • 4,096
  • 3
  • 30
  • 39
0

Right now the best option is to write a script which syncs content from Contentful to your Gatsby site's pages directory.

There's plans however for adding support within Gatsby to make this happen semi-automatically. Early days still here! See this issue for more https://github.com/gatsbyjs/gatsby/issues/324

Kyle Mathews
  • 3,240
  • 24
  • 22