gatsby-plugin-ghost-images - Field "featureImageSharp" must not have a selection since type "String" has no subfields.

[yunntan]

Hi there,

I am trying to use gatsby-plugin-ghost-images to convert feature_image.

While the featureImageSharp field seems to be created, it is of type String and therefore I am unable to query the image using Gatsby's ImageSharp

I took the example code:

allGhostPost {
            edges {
                node {
                    featureImageSharp {
                        childImageSharp {
                            fluid(maxWidth: 1920) {
                                ...GatsbyImageSharpFluid_withWebp
                            }
                        }
                    }
                }
            }
        }

Here is what my gatsby-config plugin list look like:

[
        `gatsby-plugin-sitemap`,
        {
            resolve: "gatsby-plugin-sass",
            options: {
                implementation: require("sass"),
                postCssPlugins: [
                    require("postcss-url")({
                        url: "inline",
                    }),
                ],
            },
        },
        `gatsby-plugin-react-helmet`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/assets/images`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `staticImages`,
                path: `${__dirname}/static/images`,
            },
        },
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `markdown-pages`,
                path: `${__dirname}/src/assets/markdown`,
            },
        },
        {
            resolve: `gatsby-source-ghost`,
            options: {
                apiUrl: process.env.GHOST_CMS_API_URL,
                contentApiKey: process.env.GHOST_CMS_CONTENT_API_KEY,
                // version: `v3`, // Ghost API version, optional, defaults to "v3".
                // Pass in "v2" if your Ghost install is not on 3.0 yet!!!
            },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve: `gatsby-plugin-ghost-images`,
            options: {
                lookup: [
                    {
                        type: `GhostPost`,
                        imgTags: [`feature_image`],
                    },
                ],
            },
            verbose: activeEnv !== "production",
        },
        {
            // This plugin intercepts all local links that have not -
            // been created in React (in this case markdown) using -
            // gatsby-link, and replaces their behavior with that of -
            // gatsby-link's navigate.
            resolve: `gatsby-plugin-catch-links`,
            options: {
                excludeRegex: /excluded-link/,
            },
        },
        {
            resolve: "gatsby-plugin-react-svg",
            options: {
                rule: {
                    include: /images\/.*\.svg/,
                },
            },
        },
        {
            resolve: `gatsby-plugin-manifest`,
            options: {
                name: `Ghost Locomotion pre-order`,
                short_name: `Ghost`,
                start_url: `/`,
                background_color: `#F7F7F7`,
                theme_color: `#F7F7F7`,
                display: `minimal-ui`,
                icon: `src/assets/images/logo512.png`, // This path is relative to the root of the site.
            },
        },
        `gatsby-transformer-remark`,
        {
            resolve: `gatsby-plugin-env-variables`,
            options: {
                whitelist: ["DEPLOY_PRIME_URL"], // ENV variable provided by Netlify: https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata
            },
        },
        `gatsby-transformer-json`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/src/assets/jsonConfigs`,
            },
        },
        {
            resolve: `gatsby-plugin-google-tagmanager`,
            options: {
                id: `XXX`,
                includeInDevelopment: true,
            },
        },
        {
            resolve: "gatsby-source-apiserver",
            options: {
                // Type prefix of entities from server
                typePrefix: "signUpForm__",
                // The url, this should be the endpoint you are attempting to pull data from
                url: `${process.env.SIGN_UP_FORM_JSON_PATH}`,
                method: "get",
                name: `signUpFormConfig`,

                // Nested level of entities in response object, example: `data.posts`
                // entityLevel: ``,
                // Optionally save the JSON data to a file locally
                // Default is false
                localSave: true,

                //  Required folder path where the data should be saved if using localSave option
                //  This folder must already exist
                path: `${__dirname}/src/assets/json/`,

                // Optionally include some output when building
                // Default is false
                verboseOutput: true, // For debugging purposes
                // Optionally skip creating nodes in graphQL.  Use this if you only want
                skipCreateNode: true, // skip import to graphQL, only use if localSave is all you want

                // Optionally re-source data when it changes and
                // `gatsby develop` is running.
                // Requires `ENABLE_GATSBY_REFRESH_ENDPOINT=true`.
                // See https://www.gatsbyjs.org/docs/environment-variables/#reserved-environment-variables
                // Default is false
                enableDevRefresh: false,
                allowCache: false,

                // Optionally override key used to re-source data
                // when `gatsby develop` is running.
                // Requires `enableDevRefresh: true`.
                // See setting directly above this one.
                // See also https://github.com/gatsbyjs/gatsby/issues/14653
                // Default is `id`
                refreshId: `id`,
            },
        },
        {
            resolve: `gatsby-plugin-netlify`,
            options: {
                headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
                allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria
                mergeSecurityHeaders: true, // boolean to turn off the default security headers
                mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
                mergeCachingHeaders: true, // boolean to turn off the default caching headers
                transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
                generateMatchPathRewrites: activeEnv !== "production", // boolean to turn off automatic creation of redirect rules for client only paths
            },
        },
        // {
        //  resolve: `gatsby-source-stripe`,
        //  options: {
        //      objects: ["Sku", "Product"],
        //      secretKey: "",
        //      downloadFiles: true,
        //  },
        // },
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
    ]

[styxlab]

@yunntan Welcome to this project! This is a duplicate. Please have a look at the discussion on #240.

[yunntan]

@styxlab got it, thanks. Switched to gatsby-source-try-ghost instead of gatsby-source-ghost and it is now working!

For future reference - what are the differences between the 2 packages ? I can't seem to figure that out.

[styxlab]

gatsby-source-try-ghost is maintained by myself, the other one by the Ghost Team.

[yunntan]

I see, is one the fork of the other or are they completely different sources ?

[styxlab]

Both projects are independent and use different source code. I created gatsby-source-try-ghost because I had the need to overcome the limitations of the original. Please have a look at the README for further info.