Sourcing from Contentful

What is Contentful? Why choose it?

Contentful is a headless Content Management System (CMS) that lets you organize your content into what could be called “modules,” or little bits of data that can be rearranged to appear nicely on mobile devices, tablets, computers, virtual reality devices (maybe someday?) and more.

Actually, the way Contentful handles bits of content means that you can push content out when new technology develops without having to redesign, rewrite, or rethink all of it for a new format.

Prerequisites

This guide assumes that you have a Gatsby project set up. If you need to set up a project, head to the Quick Start guide, then come back.

Pulling data in and pushing data out

If you have a JSON file with content in it, you could pull it into Contentful using contentful-import. If you are creating new content, you don’t need this and just create content straight in Contentful.

If you do create content directly in Contentful, make sure to name your fields in a way you can remember when you create GraphQL queries. If you use GraphiQL, it can suggest fields to you, but this will only help if the field names are clear and memorable.

As far as pushing data out to your site goes, we suggest to you to use this fantastic plugin gatsby-source-contentful, to use it, you’d need to have the spaceId and the accessToken from contentful.

Install

npm install --save gatsby-source-contentful

How to use

With the Delivery API

plugins: [
  {
    resolve: `gatsby-source-contentful`,
    options: {
      spaceId: `your_space_id_grab_it_from_contentful`,
      accessToken: `your_token_id_grab_it_from_contentful`,
    },
  },
]

With the Preview API

plugins: [
  {
    resolve: `gatsby-source-contentful`,
    options: {
      spaceId: `your_space_id_grab_it_from_contentful`,
      accessToken: `your_token_id_grab_it_from_contentful`,
      host: `preview.contentful.com`,
    },
  },
]