tryghost / gatsby-source-ghost

Source plugin for pulling data into Gatsby.js from the Ghost Public API.

Gatsby Source Ghost

Source plugin for pulling data into Gatsby.js from Ghost, using the Ghost Content API.

• Demo: https://gatsby.ghost.org
• Gatsby Starter https://github.com/TryGhost/gatsby-starter-ghost
• Documentation: https://docs.ghost.org/api/gatsby/

Install

yarn add gatsby-source-ghost

npm install --save gatsby-source-ghost

How to use

Plugin configuration for gatsby-config.js:

{
   resolve: `gatsby-source-ghost`,
   options: {
       apiUrl: `https://<your-subdomain>.ghost.io`,
       contentApiKey: `<your content api key>`,
       version: `v5.0` // Ghost API version, optional, defaults to "v5.0".
                     // Pass in "v4.0" if your Ghost install is not on 5.0 yet!!!
   }
}

apiUrl Ghost Content API URL - for Ghost(Pro) customers this is your .ghost.io domain, it’s the same URL used to view the admin panel, but without the /ghost subdirectory. This should be served over https.

contentApiKey The "Content API Key" copied from the "Integrations" screen in Ghost Admin.

If you want to keep these values private (if your site is not public) you can do so using environment variables.

How to query

There are 5 node types available from Ghost: Post, Page, Author, Tag, and Settings.

Documentation for the full set of fields made available for each resource type can be found in the Content API docs. Posts and Pages have the same properties.

Example Post Query

{
  allGhostPost(sort: { order: DESC, fields: [published_at] }) {
    edges {
      node {
        id
        slug
        title
        html
        published_at
        ...
        tags {
          id
          slug
          ...
        }
        primary_tag {
          id
          slug
          ...
        }
        authors {
          id
          slug
          ...
        }
      }
    }
  }
}

Filter Posts by Tag

A common but tricky example of filtering posts by tag, can be achieved like this (Gatsby v2+):

{
  allGhostPost(filter: {tags: {elemMatch: {slug: {eq: $slug}}}}) {
    edges {
      node {
        slug
        ...
      }
    }
  }
}

Query Settings

The settings node is different as there's only one object, and it has the properties listed here.

{
  allGhostSettings {
    edges {
      node {
        title
        description
        lang
        ...
        navigation {
            label
            url
        }
      }
    }
  }
}

Query Other Node Types

The Post, Page, Author and Tag nodes all work the same. Use the node type you need in this query:

{
  allGhost${NodeType} {
    edges {
      node {
        id
        slug
        ...
      }
    }
  }
}

Copyright & License

Copyright (c) 2013-2023 Ghost Foundation - Released under the MIT license.

gatsby-source-ghost's Issues

Cannot query field "ghostId" on type "GhostPost"

Unable to run my website using gatsby and ghost

Running Ghost container:
curl http://161.97.112.22:2368

Dockerfile:
FROM node:latest
RUN mkdir -p /koders-website
WORKDIR /koders-website
COPY package.json .
RUN npm install
ENV PATH /app/node_modules/.bin:$PATH
RUN npm install --global gatsby-cli
COPY . .
EXPOSE 9000
RUN gatsby build
CMD ["gatsby", "serve", "-H", "0.0.0.0"]

Gatsby config:
{
resolve: gatsby-source-ghost,
options: {
apiUrl: http://0.0.0.0:2368, //Tried 127.0.0.1:2368/localhost:2368/161.97.112.22:2368
contentApiKey: xxxxxxxxxxxxxxxxxxxxxxxxxx,
},
},

Intermittent error during build, Cannot read property 'map' of undefined on posts

Issue Summary

seeing intermittent issue with gatsby-source-ghost and ghost pro:

1:43:10 PM: Fetch Contentful data: 8649.430ms
1:43:19 PM: error "gatsby-source-ghost" threw an error while running the sourceNodes lifecycle:
1:43:19 PM: Cannot read property 'map' of undefined
1:43:19 PM:   29 | 
1:43:19 PM:   30 | const transformCodeinjection = (posts) => {
1:43:19 PM: > 31 |     posts.map((post) => {
1:43:19 PM:      |           ^
1:43:19 PM:   32 |         const allCodeinjections = [post.codeinjection_head, post.codeinjection_foot].join('');
1:43:19 PM:   33 | 
1:43:19 PM:   34 |         if (!allCodeinjections) {
1:43:19 PM: 
1:43:19 PM: 
1:43:19 PM:   TypeError: Cannot read property 'map' of undefined
1:43:19 PM:   
1:43:19 PM:   - gatsby-node.js:31 transformCodeinjection
1:43:19 PM:     [repo]/[gatsby-source-ghost]/gatsby-node.js:31:11
1:43:19 PM:   
1:43:19 PM:   - gatsby-node.js:71 api.posts.browse.then
1:43:19 PM:     [repo]/[gatsby-source-ghost]/gatsby-node.js:71:17
1:43:19 PM:   
1:43:19 PM:   - next_tick.js:68 process._tickCallback
1:43:19 PM:     internal/process/next_tick.js:68:7
1:43:19 PM:   
1:43:19 PM: 
1:43:19 PM: not finished source and transform nodes - 17.225s
1:43:19 PM: ​
1:43:19 PM: ┌─────────────────────────────┐
1:43:19 PM: │   "build.command" failed    │
1:43:19 PM: └─────────────────────────────┘

To Reproduce

don't have clear reproduce instructions, but it's a basic blog and a gatsby setup based off of
https://github.com/TryGhost/gatsby-starter-ghost

Technical details:

• Ghost Version: Version 3.33.0
• Gatsby Version: [email protected]
• Gatsby Source Ghost Version: [email protected]
• Node Version: whatever netlify runs by default
• OS: whatever netlify runs by default

Fails when Gatsby /__refresh is hit

Issue Summary

After using the /__refresh of Gatsby to make the content more dynamic the following message keeps appearing

ERROR #85923 GRAPHQL

There was an error in your GraphQL query:

Cannot query field "icon" on type "GhostSettings".

To Reproduce

1. Activate the refresh endpoint of Gatsby
2. use the curl -X POST http://localhost:8000/__refresh
   It is expected to rerun normally but it fails and sometimes even breaks

Technical details:

• Ghost Version: V3
• Gatsby Version: 2.21.19
• Gatsby Source Ghost Version: 4.0.4
• Node Version: 12.13.1
• OS:Windows 10 x64

Gatsby-Node.js returning null

Not sure if my bad code or a bug, but it doesn't seem to be building production builds (via Netlify). Throws the error
TypeError: expecting an array or an iterable object but got [object Null]

Well on development it also gives that error but still builds everything fine from the my Ghost api.

Here's the full code

const path = require("path")
const _ = require(`lodash`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions
  const createPosts = new Promise((resolve, reject) => {
    const postTemplate = path.resolve(`./src/templates/blogTemplate.js`)
    resolve(
      graphql(`
        {
 allGhostPost(sort: { order: DESC, fields: [published_at] }) {
    edges {
      node {
        id
        slug
        title
        html
        published_at
      }
    }
 }
        }
      `).then(result => {
        const items = result.data.allGhostPost.edges

        _.forEach(items, ({ node }) => {
          node.url = `/${node.slug}/`
          createPage({
            path: node.url,
            component: path.resolve(postTemplate),
            context: {
              slug: node.slug,
            },
          })
        })

        return resolve()
      }).catch(error => {
        console.log(error);
      })
    )
  })

  return Promise.all(createPosts)
}

Ran a graphql query as well and results seems fine.

Add gatsby-transformer-sharp support

I'll try to look into adding this via a PR but would be nice to add gatsby-transformer-sharp so we can do responsive images and use gatsby-image for lazyload, etc.

See https://github.com/angeloashmore/gatsby-source-shopify

Status undefined

This is working fine in my local machine but not on the server when I'm trying to gatsby build via docker image.

DockerFile
FROM node:latest
RUN mkdir -p /koders-website
WORKDIR /koders-website
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json .
RUN npm install
RUN npm install --global gatsby-cli
COPY . .
EXPOSE 9000
RUN gatsby build
CMD ["gatsby", "serve", "-H", "0.0.0.0"]

My ghost docker container is running fine on http://161.97.112.22:2368

GETS STUCK AT BUILDING
Shows this error

Fails with Gatsby schema rebuilding

Issue Summary

We've discovered recently that gatsby-source-ghost doesn't work with Gatsby schema rebuilding.

Full explanation on why this is happening: gatsbyjs/gatsby#23633 (comment)

The solution is to use Gatsby schema customization API to define schema instead of using "fake" objects.

To Reproduce

$ git clone -b issue-gatsby-23633 https://github.com/styxlab/gatsby-starter-try-ghost.git
$ cd gatsby-starter-try-ghost
$ yarn
$ gatsby develop

Technical details:

• Gatsby Version: 2.21.3
• Gatsby Source Ghost Version: 4.0.4

Data schema stub showing up in posts list

Issue Summary

Data schema stub showing up in posts list:

I just upgraded to v3 of Ghost and updated all dependencies and noticed I have a post for "Data schema".
After digging a little bit and trying a clean install I could reproduce the same issue.

Also, this is visible in the demo at https://gatsby.ghost.org/

To Reproduce

1. Do a clean install and it will show up

Technical details:

• Ghost Version: 3.27.0
• Gatsby Version: 2.24.11
• Gatsby Source Ghost Version: 4.0.5
• Node Version: 10.18.1
• OS: MacOS 10.15.6

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: renovate.json
Error type: The renovate configuration file contains some invalid settings
Message: Invalid configuration option: node

profile_image for authors

I tried looking at the code. Any ideas why profile_image doesn't show up for authors?

[feat]: add Gatsby Cloud functionality and "hot reloading"

Summary

Right now -- this plugin has several areas that could be augmented to better support the Gatsby ecosystem, particularly with Gatsby Cloud. Specifically:

1. Images are sourced from static.ghost.org rather than tying into createRemoteFileNode functionality (See #5)
2. No ability to "live update" data from Ghost, e.g. when content is created, updated or deleteed

Let's focus on #2 for this issue.

Live Updating

Gatsby Cloud uses webhooks to synchronize content from the CMS with the running Gatsby application. Ghost already supports webhooks, so we're part of the way there towards supporting hot reloading of data.

How it works under the hood is that the sourceNodes function in gatsby-node.js is re-invoked whenever we receive a web hook. What's missing now is some way to incrementally know what has been changed, and how to take the current state of the GraphQL schema and update it to match the new Ghost data.

To best support plugin authors, we've put together an Integration Guide that outlines several approaches in updating a plugin to have great Gatsby Cloud support. The eventual result of this work would be:

1. This plugin has a way to request changed data
2. This plugin (when sourceNodes is invoked) calls createNode, deleteNode, and touchNode to get the schema consistent with Ghost

@JohnONolan question -- does the webhook that's triggered receive a payload? That could be a relatively low-effort way to get the updated content!

Adding Gatsby Cloud as an Integration

For anyone else who may be working on this, adding Gatsby Cloud will look something like this:

allGhostPage not working

Hi,

while trying to build queries, I only see allGhostPost, allGhostAuthor and allGhostTag working. allGhostPage does not appear in the GraphiQL dropdown list. Also copy/pasting the query does not work:

{
"errors": [
{
"message": "Cannot query field "allGhostPage" on type "Query". Did you mean "allGhostTag", "allGhostPost", "allSitePage", "ghostTag", or "allGhostAuthor"?",
"locations": [
{
"line": 2,
"column": 3
}
]
}
]
}

Is this a feature or a bug ?

Best
Heiko

403 on default author profile picture

Issue Summary

we're getting a build failing with following error, this happens only on our online builds, not locally

success onPreBootstrap - 0.010s
error "gatsby-node.js" threw an error while running the onCreateNode lifecycle:
failed to process https://casper.ghost.org/v2.0.0/images/ghost.png
HTTPError: Response code 403 (Forbidden)

the url can be found here: https://github.com/TryGhost/gatsby-source-ghost/blob/master/ghost-schema.js#L18

changing the url to a publicly accessible one fixes the issue, so maybe you guys need to change some accessibility settings for this particular url?

Add snippets support

Would have added to ideas category in forum as requested but that category could not be selected and there were no instructions for getting permission to add posts to Ideas that I saw.

It is a simple question. Snippets are available as part of the api v3 but are not exposed by in this plugin. If I made a pull request would it be merged reasonably quickly or left to sit for years? What are the contributor guidelines?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency @tryghost/content-api to v1.11.15
• Update dependency qs to v6.11.2
• Update Test & linting packages (eslint, eslint-plugin-ghost, sinon)
• Update dependency eslint-plugin-ghost to v3
• Lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• Update dependency gatsby-node-helpers to v1

Detected dependencies

github-actions

.github/workflows/test.yml

• actions/checkout v3
• actions/setup-node v3

npm

package.json

• @tryghost/content-api 1.11.7
• cheerio 1.0.0-rc.12
• gatsby-node-helpers 0.3.0
• qs 6.11.1
• eslint 8.37.0
• eslint-plugin-ghost 2.16.0
• mocha 10.2.0
• proxyquire 2.1.3
• should 13.2.3
• sinon 15.0.3
• node 12.x || 14.x || 16.x || 18.x

---

• Check this box to trigger a request for Renovate to run again on this repository

Post are returning expty array

When i try to connect my gatsby site to ghost API, i am getting posts data as empty array even if i have published posts from ghost cms.

The graphql query i have used to fetch posts is
query GhostPostQuery{ allGhostPost( sort: { order: DESC, fields: [published_at] } ) { edges { node { id title slug } } } }
I have also attached the screenshot of the query and its response.

PACKAGE JSON :
`
{
"name": "spet-gatsby",
"private": true,
"description": "Spet - Gatsby React IT & Business Startup Template",
"version": "0.1.1",
"author": "EnvyTheme.com",
"dependencies": {
"@loadable/component": "^5.15.0",
"animate.css": "^4.1.1",
"axios": "^0.24.0",
"babel-plugin-styled-components": "^2.0.2",
"dayjs": "^1.10.7",
"dotenv": "^10.0.0",
"gatsby": "^3.14.0",
"gatsby-awesome-pagination": "^0.3.8",
"gatsby-plugin-gatsby-cloud": "^2.11.0",
"gatsby-plugin-image": "^1.14.0",
"gatsby-plugin-manifest": "^3.14.0",
"gatsby-plugin-next-seo": "^1.9.0",
"gatsby-plugin-offline": "^4.14.0",
"gatsby-plugin-react-helmet": "^4.14.0",
"gatsby-plugin-sharp": "^3.14.0",
"gatsby-plugin-sitemap": "^5.4.0",
"gatsby-plugin-styled-components": "^5.4.0",
"gatsby-source-filesystem": "^3.14.0",
"gatsby-source-ghost": "^4.2.4",
"gatsby-source-strapi": "^1.0.2",
"gatsby-transformer-sharp": "^3.14.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-accessible-accordion": "^3.3.5",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-helmet": "^6.1.0",
"react-helmet-async": "^1.2.2",
"react-markdown": "^7.1.1",
"react-masonry-component": "^6.3.0",
"react-owl-carousel3": "^2.2.5",
"react-slick": "^0.28.1",
"react-tabs": "^3.2.2",
"sass": "^1.41.1",
"styled-components": "^5.3.3"
},
"devDependencies": {
"path": "^0.12.7",
"prettier": "2.2.1"
},
"keywords": [
"gatsby"
],
"license": "0BSD",
"scripts": {
"build": "npm run clean && gatsby build && node copy-redirects.js",
"develop": "npm run clean && gatsby develop",
"format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md}"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo "Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}

`

Unexpected null / undefined for optional fields (Gatsby Bug)

Opening this as a catch-all as I assume this will get reported often.

The gatsby-source-ghost plugin suffers from Gatsby bug: gatsbyjs/gatsby#3344 /

Which is covered by this refactor epic: gatsbyjs/gatsby#4261

This issue means that if the first post/tag/author returned from the API has nulls for optional fields such as custom_excerpt, feature_image, profile_image, og & twitter fields, Gatsby sets these to null permanently.

Any subsequent posts/tags/authors that have the fields set will have those fields ignored.

The current workaround is to ensure your oldest post has all fields populated. There are other options for workarounds that might possibly be added to this plugin - we'll look into those.

Error - cannot read property 'codeinjection_head' of undefined

I get the following error after simply adding the plugin to my 'gastby-config.js' file:

{
      resolve: 'gatsby-source-ghost',
      options: {
        apiUrl: 'http://165.22.123.203/ghost',
        contentApiKey: 'af42a8bea1d7a6e1ef1a611193',
        version: 'v2',
      },
    },

Error output:

 ERROR #11321  PLUGIN

"gatsby-source-ghost" threw an error while running the sourceNodes lifecycle:

Cannot read property 'codeinjection_head' of undefined

  TypeError: Cannot read property 'codeinjection_head' of undefined
  
  - gatsby-node.js:99 
    [landing-page]/[gatsby-source-ghost]/gatsby-node.js:99:43
  
  - task_queues.js:89 processTicksAndRejections
    internal/process/task_queues.js:89:5
  
  - From previous event:
  
  - gatsby-node.js:120 createLiveGhostNodes
    [landing-page]/[gatsby-source-ghost]/gatsby-node.js:120:20
  
  - gatsby-node.js:155 Object.exports.sourceNodes
    [landing-page]/[gatsby-source-ghost]/gatsby-node.js:155:12
  
  - api-runner-node.js:234 runAPI
    [landing-page]/[gatsby]/dist/utils/api-runner-node.js:234:37
  
  - api-runner-node.js:347 Promise.catch.decorateEvent.pluginName
    [landing-page]/[gatsby]/dist/utils/api-runner-node.js:347:15
  
  - api-runner-node.js:346 
    [landing-page]/[gatsby]/dist/utils/api-runner-node.js:346:12
  
  - timers.js:439 processImmediate
    internal/timers.js:439:21

Versions:
Ghost Version: 2.31.1
Gatsby CLI version: 2.7.14
Gatsby version: 2.15.28
Gatsby Source Ghost Version: 4.01
Node Version: v12.3.1
OS: OSX Mojave

'feature_image_alt' and 'feature_image_caption' missing from /ghost-schema.js

Issue Summary

Hello! Trying to pull in the feature_image_alt and feature_image_caption fields in my posts, but noticed they aren't in the schema which means I error out. I'm guessing they just need to be added to /ghost-schema.js at https://github.com/TryGhost/gatsby-source-ghost/blob/main/ghost-schema.js#L20

More than willing to drop in a PR, but couldn't find a Contributing guide. Please let me know if I missed it!

To Reproduce

1. Crack open GraphiQL after starting your gatsby/ghost project
2. Drop in this query:

query blogIndex {
  allGhostPost(
    sort: {order: DESC, fields: [published_at]}
  ) {
    nodes {
      id
      slug
      feature_image
      feature_image_alt
      feature_image_caption
    }
  }
}

3. Should get an error stating the field can't be queried

Technical details:

• Ghost Version: v3
• Gatsby Version: 3.6.0
• Gatsby Source Ghost Version: 4.2.4
• Node Version: 12
• OS: OSX 12.1

update package.json node engine to support node v20

Hello guys, I've raised a PR to add support for node v20 and avoid getting a warning.

added support for node 20 by chrism1996 · Pull Request #277 · TryGhost/gatsby-source-ghost (github.com)

Thanks!

TypeError: Cannot read property 'posts' of undefined

Issue Summary

The build just started failing without any change to the packages or configs in a codebase I'm maintaining.

To Reproduce

1. Run gatsby build
2. This error is thrown:

error Plugin gatsby-source-ghost returned an error


  TypeError: Cannot read property 'posts' of undefined

  - gatsby-node.js:87
    [jump450.com]/[gatsby-source-ghost]/gatsby-node.js:87:39

  - Array.forEach

  - gatsby-node.js:86
    [jump450.com]/[gatsby-source-ghost]/gatsby-node.js:86:14

  - runMicrotasks

  - task_queues.js:97 processTicksAndRejections
    internal/process/task_queues.js:97:5

gatsby-node.js:

const path = require(`path`);
const config = require(`./src/utils/siteConfig`);
const { paginate } = require(`gatsby-awesome-pagination`);

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === `build-html`) {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};
exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions;
  /**
   * Posts
   */
  const createSuccessStory = new Promise((resolve, reject) => {
    const postTemplate = path.resolve(`./src/templates/success-story.js`);
    const indexTemplate = path.resolve(`./src/templates/index.js`);
    resolve(
      graphql(`
        {
          allGhostPost(
            filter: {
              tags: {
                elemMatch: { name: { in: ["case-study", "success-story"] } }
              }
            }
          ) {
            edges {
              node {
                slug
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          return reject(result.errors);
        }

        if (!result.data.allGhostPost) {
          return resolve();
        }

        const items = result.data.allGhostPost.edges;

        items.forEach(({ node }) => {
          // This part here defines, that our posts will use
          // a `/:slug/` permalink.
          node.url = `/success-story/${node.slug}/`;

          createPage({
            path: node.url,
            component: path.resolve(postTemplate),
            context: {
              slug: node.slug,
            },
          });
        });

        paginate({
          createPage,
          items: items,
          itemsPerPage: config.postsPerPage,
          component: indexTemplate,
          pathPrefix: ({ pageNumber }) => {
            if (pageNumber === 0) {
              return `/`;
            } else {
              return `/page`;
            }
          },
        });

        return resolve();
      })
    );
  });
  const createCareer = new Promise((resolve, reject) => {
    const postTemplate = path.resolve(`./src/templates/job.js`);
    const indexTemplate = path.resolve(`./src/templates/index.js`);
    resolve(
      graphql(`
        {
          allGhostPost(
            filter: { tags: { elemMatch: { name: { in: ["job"] } } } }
          ) {
            edges {
              node {
                slug
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          return reject(result.errors);
        }

        if (!result.data.allGhostPost) {
          return resolve();
        }

        const items = result.data.allGhostPost.edges;

        items.forEach(({ node }) => {
          node.url = `/careers/${node.slug}/`;

          createPage({
            path: node.url,
            component: path.resolve(postTemplate),
            context: {
              // Data passed to context is available
              // in page queries as GraphQL variables.
              slug: node.slug,
            },
          });
        });

        // Pagination for posts, e.g., /, /page/2, /page/3
        paginate({
          createPage,
          items: items,
          itemsPerPage: config.postsPerPage,
          component: indexTemplate,
          pathPrefix: ({ pageNumber }) => {
            if (pageNumber === 0) {
              return `/`;
            } else {
              return `/page`;
            }
          },
        });

        return resolve();
      })
    );
  });
  const createPages = new Promise((resolve, reject) => {
    const pageTemplate = path.resolve(`./src/templates/page.js`);
    resolve(
      graphql(`
        {
          allGhostPage(sort: { order: ASC, fields: published_at }) {
            edges {
              node {
                slug
                url
              }
            }
          }
        }
      `).then(result => {
        if (result.errors) {
          return reject(result.errors);
        }

        if (!result.data.allGhostPage) {
          return resolve();
        }

        const items = result.data.allGhostPage.edges;

        items.forEach(({ node }) => {
          node.url = `/${node.slug}/`;

          createPage({
            path: node.url,
            component: path.resolve(pageTemplate),
            context: {
              slug: node.slug,
            },
          });
        });

        return resolve();
      })
    );
  });

  return Promise.all([
    createSuccessStory,
    createCareer,
    createPages,
  ]);
};

Technical details:

• Ghost Version: v3
• Gatsby Version: 2.8.5
• Gatsby Source Ghost Version: 3.4.2
• Node Version: 12.18.0
• OS: OSX 10.15.5

Update gatsby-source-ghost plugin to support Gatsby 5 and Node 18.x

Issue Summary

It seems that we are unable to update to the new Gatsby version 5 as gatsby-source-ghost requires a node version 16.x but Gatsby requires Node version 18.x
When trying to update Gatsy to version 5 we get the following:

$ yarn add gatsby
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=18.0.0". Got "16.16.0"
error Found incompatible module.

And after updating node version to >=18.0.0 we get the following

error [email protected]: The engine "node" is incompatible with this module. Expected version "12.x || 14.x || 16.x". Got "18.7.0"
error Found incompatible module.

To Reproduce

1. Install Gatsby version 5 npm package
2. Install gatsby-source-ghost npm package

Technical details:

• Ghost Version: 5
• Gatsby Version: 5.0.1
• Gatsby Source Ghost Version: 5.0.0
• Node Version: 18.7.0
• OS: Ubuntu

Gatsby fails to build when site meta settings are unset.

Issue Summary

Gatsby fails to build when site meta settings are unset. Meta fields are not included in the schema when no value is assigned in Ghost, causing Gatsby build error.

To Reproduce

1. Populate the Ghost site meta settings (meta/og/twitter title/description/image).
2. In Gatsby, construct a GraphQL Query as such:

query {
  ghostSettings {
    og_description
    og_image
    og_title
    meta_description
    meta_title
    twitter_description
    twitter_image
    twitter_title
  }
}

3. The query successfully returns the set site meta settings at build-time.
4. Now, unset the site meta settings in Ghost.
5. Attempt to rebuild Gatsby, and the following error is returned for each of the above fields:

ERROR #85923  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "og_description" on type "GhostSettings".

If you don't expect "og_description" to exist on the type "GhostSettings" it is most likely a typo.
However, if you expect "og_description" to exist there are a couple of solutions to common problems:

- If you added a new data source and/or changed something inside gatsby-node.js/gatsby-config.js, please try a restart of your development server
- The field might be accessible in another subfield, please try your query in GraphiQL and use the GraphiQL explorer to see which fields you can query and what shape they have
- You want to optionally use your field "og_description" and right now it is not used anywhere. Therefore Gatsby can't infer the type and add it to the GraphQL schema. A quick fix is to add a least one entry with that field ("dummy content")

It is recommended to explicitly type your GraphQL schema if you want to use optional fields. This way you don't have to add the mentioned "dummy content". Visit our docs to learn how you can define the schema for "GhostSettings":
https://www.gatsbyjs.org/docs/schema-customization/#creating-type-definitions

Expected

Instead of the field disappearing from the schema, it should be set to null if unset.

Observed

The aforementioned fields are not presented in the schema, causing build failure.

Technical details:

• Ghost Version: 3.13.4
• Gatsby Version: 2.11.17
• Gatsby Source Ghost Version: 4.0.4
• Node Version: v12.16.1
• OS: Elementary OS 5.1.3 Hera

Discussion

Not sure whether I should be including catch logic on my side, but when other fields are unset in Ghost, null is returned as expected.

My hunch is that a fake nodes are not being set for the above fields, and that the file ghost-schema.js should be updated to include these fields in the settings object.

gatsby-source-ghost/ghost-schema.js

Lines 106 to 125 in d9be245

	const settings = {
	title: 'Ghost',
	description: 'The professional publishing platform',
	logo: 'https://static.ghost.org/v1.0.0/images/ghost-logo.svg',
	icon: 'https://static.ghost.org/favicon.ico',
	cover_image: 'https://static.ghost.org/v1.0.0/images/blog-cover.jpg',
	facebook: 'ghost',
	twitter: '@ghost',
	lang: 'en',
	timezone: 'Etc/UTC',
	codeinjection_head: '<script>>some script</script><style></style>',
	codeinjection_foot: '<style>.some-class {\n}</style><script></script>',
	codeinjection_styles: '.some-class {\n}',
	navigation: [
	{label: 'Home', url: '/'},
	{label: 'Tag', url: '/tag/getting-started/'},
	{label: 'Author', url: '/author/ghost/'},
	{label: 'Help', url: 'https://help.ghost.org'}
	]
	};

From experimentation, all the above fields which have keys in the object are returned as null when unset, but the keys not present (but listed in the Ghost V3 API spec) are missing from the schema.

It could be that I'm missing the point of this dummy schema, or that more is involved here, but it seems a sensible first guess. Please do let me know if I'm making some easy peasy mistakes here.

Cheers! 😊

Failing package.json scripts for initial commit of new project

Issue Summary

Note
I'm not positive these are issues with gatsby-source-ghost. It may be an issue with the gatsby-cli or something else. I don't know how Gatsby starters work behind the scenes.

A new project created by running gatsby new example-project https://github.com/TryGhost/gatsby-starter-ghost.git has the following issues in it's initial commit:

1) the package-lock.json file is out of date

➜  example-project git:(master) npm ci
npm ERR! code EUSAGE
npm ERR!
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR!
npm ERR! Invalid: lock file's [email protected] does not satisfy [email protected]
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR! Missing: [email protected] from lock file
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci
npm ERR!
npm ERR! Options:
npm ERR! [--no-audit] [--foreground-scripts] [--ignore-scripts]
npm ERR! [--script-shell <script-shell>]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR!
npm ERR! Run "npm help ci" for more info

After resolving the package-lock.json discrepancy,

2) npm run lint fails due to parsing errors

➜  example-project git:(master) ✗ npm run lint

> [email protected] lint
> eslint . --ext .js --cache


/Users/mike/src/example-project/.eslintrc.js
  0:0  error  Parsing error: require() of ES Module /Users/mike/src/example-project/node_modules/eslint-scope/lib/definition.js from /Users/mike/src/example-project/node_modules/babel-eslint/lib/require-from-eslint.js not supported.
Instead change the require of definition.js in /Users/mike/src/example-project/node_modules/babel-eslint/lib/require-from-eslint.js to a dynamic import() which is available in all CommonJS modules
...

3) npm run format fails because the prettier script is missing

➜  example-project git:(master) ✗ npm run format

> [email protected] format
> prettier --write "**/*.{js,jsx,json,md}"

sh: prettier: command not found

These issues all occur on the command line.

To Reproduce

1. gatsby new example-project https://github.com/TryGhost/gatsby-starter-ghost.git
2. cd example-project
3. npm ci
4. npm install (to resolve the out-of-sync package-lock.json)
5. npm run lint
6. npm run format

I think these are bugs because it adds work to getting basic CI/CD up-and-running for every new project created with this tool.

The impact may be minor if the user is capable of debugging and resolving the issues. Or the impact might turn someone away from the using this project or from using Ghost. Probably depends on the experience of the developer and how much they care about having these commands working.

Technical details:

• Ghost Version: N/A as far as I'm aware
• Gatsby CLI version: 4.20.0
• Gatsby version: 4.15.2
• Gatsby Source Ghost Version: 5.0.0
• Node Version: 16.16.0
• OS: Mac

---

I'll try to do some debugging of the issues with npm run lint and npm run format but I wanted to make note of everything in a report for now.

TypeError: Cannot read property 'concat' of undefined

If a post in Ghost has codeinjection_foot set but not codeinjection_head, then gatsby-source-ghost throws an error:

TypeError: Cannot read property 'concat' of undefined

Technical details:

• Ghost Version: >2.10.0
• Gatsby Source Ghost Version: >3.4.0

Bookmark cards not working

After importing Ghost blog posts that use the great v3 feature "bookmark cards", they come out completely scrambled on this theme.

This is probably just a styling issue, but could you please support all standard Ghost elements (like bookmark cards) in this theme?

MobileDoc node field return null

Hi,

Each time I tried to query data post/pages through graphiql the mobiledoc field is set to null.
If I call the content api directly with a raw curl query it works fine, I've got data on mobiledoc format.

I installed the gatsby-source-ghost plugin localy and tried adding mobiledoc on postAndPageFetchOptions object's formats field. Located in gatsby-node.js, but this does not work.

const postAndPageFetchOptions = { limit: 'all', include: 'tags,authors', formats: 'mobiledoc,html,plaintext' };

Is there something I've missed ?

To go further, I thought it would be nice to have mobile doc format to add imageSharp processing support via a transformer plugin. There is a html-to-mobiledoc helper on the ghost SDK, but I don't think it's the right way to do it while at some point I should be able to query this format "natively".

Hope someone can clarify.
Have a nice day