Protect against undefined content in Preview

.gitignore

@@ -1,3 +1,6 @@
+# dotenv
+*.env*
+
 # Logs
 logs
 *.log

.prettierrc

@@ -0,0 +1,6 @@
+{
+    "trailingComma": "es5",
+    "semi": false,
+    "singleQuote": true,
+    "arrowParens": "avoid"
+}

bin/hello.js

@@ -1,30 +1,30 @@
-const chalk = require("chalk");
-const pkg = require("../package.json");
+const chalk = require('chalk')
+const pkg = require('../package.json')
 
 console.log(`
 
-${chalk.green("Hey there! 👋")}
+${chalk.green('Hey there! 👋')}
 
 Thanks for giving the ${pkg.name} a try. 🎉
 To get you going really quickly this project includes a setup step.
 
-${chalk.yellow.bold("npm run setup")} automates the following steps for you:
-  - creates a config file ${chalk.yellow("./.contentful.json")}
-  - imports ${chalk.green("a predefined content model")}
+${chalk.yellow.bold('npm run setup')} automates the following steps for you:
+  - creates a config file ${chalk.yellow('./.contentful.json')}
+  - imports ${chalk.green('a predefined content model')}
 
 When this is done run:
 
 ${chalk.yellow(
-  "npm run dev"
-)} to start a development environment at ${chalk.green("localhost:8000")}
+  'npm run dev'
+)} to start a development environment at ${chalk.green('localhost:8000')}
 
 or
 
 ${chalk.yellow(
-  "npm run build"
-)} to create a production ready static site in ${chalk.green("./public")}
+  'npm run build'
+)} to create a production ready static site in ${chalk.green('./public')}
 
 For further information check the readme of the project
 (https://github.com/contentful-userland/gatsby-contentful-starter)
 
-`);
+`)

bin/setup.js

@@ -1,11 +1,11 @@
-const spaceImport = require("contentful-import");
-const exportFile = require("../contentful/export.json");
-const inquirer = require("inquirer");
-const chalk = require("chalk");
-const path = require("path");
-const { writeFileSync } = require("fs");
+const spaceImport = require('contentful-import')
+const exportFile = require('../contentful/export.json')
+const inquirer = require('inquirer')
+const chalk = require('chalk')
+const path = require('path')
+const { writeFileSync } = require('fs')
 
-const argv = require("yargs-parser")(process.argv.slice(2));
+const argv = require('yargs-parser')(process.argv.slice(2))
 
 console.log(`
   To set up this project you need to provide your Space ID
@@ -14,47 +14,47 @@ console.log(`
   You can find all the needed information in your Contentful space under:
 
   ${chalk.yellow(
-    `app.contentful.com ${chalk.red("->")} Space Settings ${chalk.red(
-      "->"
+    `app.contentful.com ${chalk.red('->')} Space Settings ${chalk.red(
+      '->'
     )} API keys`
   )}
 
-  The ${chalk.green("Content Management API Token")}
+  The ${chalk.green('Content Management API Token')}
     will be used to import and write data to your space.
 
-  The ${chalk.green("Content Delivery API Token")}
+  The ${chalk.green('Content Delivery API Token')}
     will be used to ship published production-ready content in your Gatsby app.
 
-  The ${chalk.green("Content Preview API Token")}
+  The ${chalk.green('Content Preview API Token')}
     will be used to show not published data in your development environment.
 
   Ready? Let's do it! 🎉
-`);
+`)
 
 const questions = [
   {
-    name: "spaceId",
-    message: "Your Space ID",
+    name: 'spaceId',
+    message: 'Your Space ID',
     when: !argv.spaceId && !process.env.CONTENTFUL_SPACE_ID,
-    validate: (input) =>
+    validate: input =>
       /^[a-z0-9]{12}$/.test(input) ||
-      "Space ID must be 12 lowercase characters",
+      'Space ID must be 12 lowercase characters',
   },
   {
-    name: "managementToken",
+    name: 'managementToken',
     when: !argv.managementToken,
-    message: "Your Content Management API access token",
+    message: 'Your Content Management API access token',
   },
   {
-    name: "accessToken",
+    name: 'accessToken',
     when:
       !argv.accessToken &&
       !process.env.CONTENTFUL_ACCESS_TOKEN &&
       !argv.deliveryToken &&
       !process.env.CONTENTFUL_DELIVERY_TOKEN,
-    message: "Your Content Delivery API access token",
+    message: 'Your Content Delivery API access token',
   },
-];
+]
 
 inquirer
   .prompt(questions)
@@ -63,12 +63,12 @@ inquirer
       CONTENTFUL_SPACE_ID,
       CONTENTFUL_ACCESS_TOKEN,
       CONTENTFUL_DELIVERY_TOKEN,
-    } = process.env;
+    } = process.env
 
     // env vars are given precedence followed by args provided to the setup
     // followed by input given to prompts displayed by the setup script
-    spaceId = CONTENTFUL_SPACE_ID || argv.spaceId || spaceId;
-    managementToken = argv.managementToken || managementToken;
+    spaceId = CONTENTFUL_SPACE_ID || argv.spaceId || spaceId
+    managementToken = argv.managementToken || managementToken
     // Some scripts that set up this repo use `deliveryToken` and
     // `CONTENTFUL_DELIVERY_TOKEN`, instead of `accessToken` and
     // `CONTENTFUL_ACCESS_TOKEN`. Until all scripts are updated to
@@ -79,12 +79,12 @@ inquirer
       CONTENTFUL_DELIVERY_TOKEN ||
       argv.accessToken ||
       argv.deliveryToken ||
-      accessToken;
+      accessToken
 
-    console.log("Writing config file...");
-    const configFiles = [`.env.development`, `.env.production`].map((file) =>
-      path.join(__dirname, "..", file)
-    );
+    console.log('Writing config file...')
+    const configFiles = [`.env.development`, `.env.production`].map(file =>
+      path.join(__dirname, '..', file)
+    )
 
     const fileContents =
       [
@@ -93,22 +93,22 @@ inquirer
         `# Do NOT commit this file to source control`,
         `CONTENTFUL_SPACE_ID='${spaceId}'`,
         `CONTENTFUL_ACCESS_TOKEN='${accessToken}'`,
-      ].join("\n") + "\n";
+      ].join('\n') + '\n'
 
-    configFiles.forEach((file) => {
-      writeFileSync(file, fileContents, "utf8");
-      console.log(`Config file ${chalk.yellow(file)} written`);
-    });
-    return { spaceId, managementToken };
+    configFiles.forEach(file => {
+      writeFileSync(file, fileContents, 'utf8')
+      console.log(`Config file ${chalk.yellow(file)} written`)
+    })
+    return { spaceId, managementToken }
   })
   .then(({ spaceId, managementToken }) =>
     spaceImport({ spaceId, managementToken, content: exportFile })
   )
   .then((_, error) => {
     console.log(
       `All set! You can now run ${chalk.yellow(
-        "npm run dev"
+        'npm run dev'
       )} to see it in action.`
-    );
+    )
   })
-  .catch((error) => console.error(error));
+  .catch(error => console.error(error))

gatsby-config.js

@@ -4,9 +4,9 @@ require("dotenv").config({
 
 const contentfulConfig = {
   spaceId: process.env.CONTENTFUL_SPACE_ID,
-  accessToken:
-    process.env.CONTENTFUL_ACCESS_TOKEN ||
-    process.env.CONTENTFUL_DELIVERY_TOKEN,
+  accessToken: 
+    process.env.CONTENTFUL_ACCESS_TOKEN || 
+    process.env.CONTENTFUL_PREVIEW_ACCESS_TOKEN,
 };
 
 // If you want to use the preview API please define