Optimize Contentful Gatsby.js Example Project

This is a Gatsby project bootstrapped with Gatsby cli.

Getting Started

Configure environment variables

Copy .env.example to .env
Set Contentful variable values to match your CMS see example config
Configure your uniform data source

Install Gatsby CLI tool if you don't have

npm install -g @gatsby/cli

Install packages

npm i
# or
yarn

Run the development server

npm run develop
# or
yarn develop

open http://localhost:8000/ with your browser to see the website locally.
open http://localhost:8000/___graphql to see your graphql explorer and run / test your graphql queries.
open our GraphQL page query example

Build for production and launch server

npm run build
# or
yarn build

Example gatsby-config.js

 const dotenv = require('dotenv');

 dotenv.config({
   path: `.env`
 });

module.exports = {
  siteMetadata: {
    title: 'uniform-optimize-gatsby-contentful-starter',    
    description: 'UniformConf, a Uniform Optimize demo site'
  },
  /* Your site config here */
  plugins: [
    'gatsby-plugin-postcss',
    'gatsby-plugin-react-helmet',
    {
      resolve: 'gatsby-source-contentful',
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.NODE_ENV === 'production' ? process.env.CONTENTFUL_CDA_ACCESS_TOKEN : process.env.CONTENTFUL_CPA_ACCESS_TOKEN,
        host: process.env.NODE_ENV === 'production' ? process.env.CONTENTFUL_HOST : process.env.CONTENTFUL_HOST_PREVIEW,
        downloadLocal: process.env.NODE_ENV === 'production' ? false : true
      }
    }
  ],
}

Example gatsby-node.js

Before setting you the gatsby-node.js configuration, you must create a template inside src/templates/. In our example we create a ContentfulPage.tsx file in the templates directory which we map to in our gatsby-nodes.js file.

const path = require("path")

exports.onPostBuild = ({ reporter }) => {
  reporter.info("Your Gatsby site has been built!")
}

// creatre contentful pages dynamically
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const contentfulPageTemplate = path.resolve(
    "./src/templates/ContentfulPage.tsx"
  )

  const result = await graphql(`
    query {
      allContentfulPage {
        edges {
          node {
            id            
            slug
            title
            sys {
              contentType {
                sys {
                  id
                  linkType
                  type
                }
              }
              revision
              type
            }
          }
        }
      }
    }
  `)

  result.data.allContentfulPage.edges.forEach(edge => {
    console.log(edge.node.components)
    createPage({
      path: `${edge.node.slug}`,
      component: contentfulPageTemplate,
      context: {
        title: edge.node.title,
        slug: edge.node.slug,
        sys: {
          ...edge.node.sys,
        },
        components: edge.node.components,
      },
    })
  })
}

Learn More

To learn more about Gatsby.js, take a look at the following resources:

Gatsby Documentation - learn about Gatsby.js features and API.
Gatsby Contribution - Contribute to Gatsby
Gatsby Source Contentful

Known Issues

Gatsby will try and make requests to page-data and throw a console error which can impact lighthouse scores. See Github issue for more details

kamsar/gat