Sample gatsby-config.js enabling live preview in Craft CMS

gatsby-config.js

const { createHttpLink } = require('apollo-link-http');
const fetch = require('node-fetch');
const store = require('store');
const sourceNodes = require('gatsby/dist/utils/source-nodes');
require('dotenv').config();

const craftGqlUrl = process.env.CRAFT_GQL_URL;
const craftGqlToken = process.env.CRAFT_GQL_TOKEN;

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-graphql',
      options: {
        typeName: 'Craft',
        fieldName: 'craft',
        createLink: () =>
          createHttpLink({
            uri: `${craftGqlUrl}`,
            headers: {
              Authorization: `Bearer ${craftGqlToken}`,
            },
            fetch: (uri, options) => {
              const token = store.get('X-Craft-Token');
              return fetch(
                `${uri}${token !== undefined ? `?token=${token}` : ''}`,
                options,
              );
            },
          }),
      },
    },
  ],
  developMiddleware: app => {
    app.use('*', (req, res, next) => {
      if (req.query.token) {
        store.set('X-Craft-Token', req.query.token);
        sourceNodes();
      }
      next();
    });
  },
};

Thanks. How exactly do I implement this?

Thanks for your solution @anthonyferreol, it's working for me!

So, I kind of got this working. I definitely need a deeper understanding of middleware and how createLink and createHttpLink work to finish this up but perhaps someone else on here could help me out.

By adding createSchemaCustomization and fixing the sourceNodes reference I was able to get this close. The problem here is that when Craft loads this in the iframe it doesn't load the latest draft. If refetchInterval is set however, it will load the correct content whenever that interval fetches new data. So, for now I just have the interval set to 30 seconds so content editors don't see changes immediately but they rarely have to wait long to see updates.

Does anyone else see what's wrong in here? We're hosting this on Heroku, running gatsby develop -p $PORT -H 0.0.0.0 (based on this article by @andreaskeller)

const { createHttpLink } = require("apollo-link-http");
const fetch = require("node-fetch");
const store = require("store");
const sourceNodes = require("gatsby/dist/utils/source-nodes").default;
const createSchemaCustomization = require("gatsby/dist/utils/create-schema-customization")
  .createSchemaCustomization;
require("dotenv").config();

const craftGqlUrl = process.env.CRAFT_GQL_URL;
const craftGqlToken = process.env.CRAFT_GQL_TOKEN;

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-graphql",
      options: {
        typeName: "Craft",
        fieldName: "craft",
        refetchInterval: 30,
        createLink: () =>
          createHttpLink({
            uri: `${craftGqlUrl}`,
            headers: {
              Authorization: `Bearer ${craftGqlToken}`,
            },
            fetch: (uri, options) => {
              const token = store.get("X-Craft-Token");
              return fetch(
                `${uri}${token !== undefined ? `?token=${token}` : ""}`,
                options
              );
            },
          }),
      },
    },
  ],
  developMiddleware: (app) => {
    app.use("*", (req, res, next) => {
      if (req.query.token) {
        // Reject app-data.json requests, they don't contain a token and override 
        // the page request that sets the token
        if (!req.baseUrl.includes("app-data.json")) {
          store.set("X-Craft-Token", req.query.token);
          createSchemaCustomization({ refresh: true }).then(() => {
            // This function only works if I pass {} or { webhookBody: null }
            sourceNodes({});
          });
        }
        // next() to moves on to the next middleware in the stack
        // http://expressjs.com/en/api.html#app.use
        next();
      }
    });
  },
};

@wfendler Did you manage to figure out your latest draft issue, I have hit the same problem...

@jamie-l-robertson I haven't. After making several attempts I've given up until we have better Gatsby + Craft support through a new source plugin. It seems like this is coming soon: https://github.com/craftcms/craft-gatsby

Discord conversation starts around here: https://discordapp.com/channels/456442477667418113/629094175509446657/752907415003070514

@wfendler Ah excellent, thanks for the heads up!