styxlab / gatsby-theme-try-ghost

A Gatsby theme to build flaring fast blogs from headless Ghost CMS
MIT License
136 stars 56 forks source link

No Fetched posts #279

Closed lacsinagramar closed 3 years ago

lacsinagramar commented 3 years ago

Hi I wanted to use gatsby-plugin-ghost-images so I changed gatsby-source-ghost to gatsby-source-try-ghost. But now it isn't fetching any data from my ghost api

Here's my gatsby-config.js:

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-leadfeeder`,
      options: {
        key: 'v1_DzLR5a5QLW6aBoQ2'
      }
    },
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {
          src: path.resolve(__dirname, 'src')
        },
        extensions: []
      }
    },
    `gatsby-plugin-typescript`,
    `gatsby-plugin-material-ui`,
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-remark`,
    `gatsby-plugin-eslint`,
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        enableIdentityWidget: true,
        manualInit: true,
        modulePath: `${__dirname}/src/cms/cms.ts`
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/_posts`,
        name: 'content'
      }
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/assets/images/`,
        name: 'images'
      }
    },
    {
      resolve: `gatsby-plugin-ghost-images`,
      options: {
        // An array of node types and image fields per node
        // Image fields must contain a valid absolute path to the image to be downloaded
        lookup: [
          {
            type: `GhostPost`,
            imgTags: [`feature_image`]
          },
          {
            type: `GhostPage`,
            imgTags: [`feature_image`]
          }
        ],
        // Additional condition to exclude nodes
        // Takes precedence over lookup
        exclude: node => node.ghostId === undefined,
        // Additional information messages useful for debugging
        verbose: true,
        // Option to disable the module (default: false)
        disable: false
      }
    },
    {
      resolve: `gatsby-plugin-layout`,
      options: {
        component: require.resolve(`./src/modules/templates/Layout/index.tsx`)
      }
    },
    {
      resolve: `gatsby-source-try-ghost`,
      options: {
        apiUrl: `MY-URL`,
        contentApiKey: `MY-API-KEY`,
        version: `v3` // Ghost API version, optional, defaults to "v3".
        // Pass in "v2" if your Ghost install is not on 3.0 yet!!!
      }
    }
  ]
}

This is what I get: image

styxlab commented 3 years ago

Welcome @lacsinagramar! The above does not work, because you are providing the options in the wrong way. Please have a look at the README of the source package. Other than that, gatsby-source-try-ghost should be placed before gatsby-plugin-ghost-images. Let me know if you can get it to work with these two changes.

lacsinagramar commented 3 years ago

@styxlab worked like a charm! I have another question though, author profileImageSharp has a null value.

I changed my config to this, still has null

{
      resolve: `gatsby-plugin-ghost-images`,
      options: {
        // An array of node types and image fields per node
        // Image fields must contain a valid absolute path to the image to be downloaded
        lookup: [
          {
            type: `GhostPost`,
            imgTags: [`feature_image`, 'profile_image']
          }
        ],
        // Additional condition to exclude nodes
        // Takes precedence over lookup
        exclude: node => node.ghostId === undefined,
        // Additional information messages useful for debugging
        verbose: true,
        // Option to disable the module (default: false)
        disable: false
      }
}
lacsinagramar commented 3 years ago

Also, some images were processed but the image srcset cannot be rendered. It's just the placeholder

image

styxlab commented 3 years ago

Please open a new issue for every issue that you encounter. This helps other people navigate through the different topics.