3

I'm working on image optimisation for a site using Gatsby and Kentico Cloud. I want to use the gatsby-image plugin, but gatsby-image cannot query url fields. So I need to download these images from the CMS on another node so they can be queried by gatsby-image.

I have tried to implement this using another plugin, gatsby-plugin-remote-images, but so far it has not worked. I am not sure if I am misunderstanding the documentation.

Here's my latest code from gatsby-config

{
  resolve: `gatsby-plugin-remote-images`,
  options: {
    nodeType: 'kenticoCloudItemAbout',
    imagePath: 'data.kenticoCloudItemAbout.elements.main_image.value[0].url'
  }
}

My understanding is that I should now be able to query localImage (after restarting server) from GraphiQL and see the downloaded file path but this doesn't seem to work.

Thanks!

rocky
  • 7,506
  • 3
  • 33
  • 48
Sean
  • 37
  • 7

2 Answers2

2

As a newbie to GatsbyJS, I struggled with this too before getting it to work. First, I don't think your imagePath configuration should include data. which is a variable used in components to return graphQL results. Start with kenticoCloudItemAbout. If that doesn't work, I found that a nested imagePath was problematic. (Either I don't yet understand the imagePath's proper use or the plug-in doesn't like the nested structure.) For example, my GraphQL query/data structure is like this:

  {
  allMyNodes{
    edges {
      node {
            levelOneField
            subItem {
              levelTwoField
              subSubItem {
                imageURL
              }
            }
          }
        }
      }
    }

When I used { nodeType="myNodes", imagePath="myNodes.edges.node.subitem.subsubitem.imageURL"} I didn't have any luck getting the plugin to work. However when pointed directly to the node with my imageURL like { nodeType="subSubItem", imagePath="imageURL"}, it worked. Also, watch for errors in the terminal when you build gatsby develop. Errors such as imageURL not pointing to a file (broken link) caused trouble. Finally, be sure you're not including GraphQL fragments (such as ...GatsbyImageSharpFluid) in your GraphiQL window. In GraphiQL only try to reference the localImage object properties to test if the plug-in is working for you. For example: 

{
    allSubSubItem {
      imageURL
      localImage {
         id
      }
    }
 }
Brian
  • 21
  • 2
0

Probably you found a solution by now.

If not, I was able to get remote images to work with gatsby-image. I tried gatsby-plugin-remote-images as well but couldn't get it to work. What did the job for me was creating a resolver for my remote API (my remote cms source ingatsby-source-graphql, I use Webiny CMS) like so:

Ingatsby-config.js:

plugins: [
       {
        resolve: 'gatsby-source-filesystem',
        options: {
            name: 'images',
            path: '${__dirname}/src/images',
        },
         },
    {
        resolve: 'gatsby-source-graphql',
        options: {
          typeName: "Webiny",
          fieldName: "webinyHeadlessCms",
          url: "https://XXXXXXXXXXX.cloudfront.net/cms/read/production",
          headers: {
            authorization: "XXXXXXXXXXXXXXXXXXXX"
          },
          refetchInterval: 60,
        },
    },
  ],

And my gatsby-node.js:

const { createRemoteFileNode } = require(`gatsby-source-filesystem`)

exports.createResolvers = ({actions,cache,createNodeId,createResolvers,store,reporter,}) => {
    const { createNode } = actions
    createResolvers({
        Webiny_BlogPost: {
            imageFile: {
                type: `File`,
                resolve(source, args, context, info) {
                    return createRemoteFileNode({
                        url: source.headerImage,
                        store,
                        cache,
                        createNode,
                        createNodeId,
                        reporter,
                    })
                },
            },
        },
    })
}

Now I can query images to use with gatsby-image now like so:

export const query = graphql`{
    webinyHeadlessCms {
        listBlogPosts {
            data {
                headerImage
                imageFile {
                    childImageSharp {
                        fluid (quality: 100, maxWidth: 1920) {
                            ...GatsbyImageSharpFluid_withWebp
                        }
                    }
                }
            }
        }
    }
}`

It is important to really understand the GraphQL Schema of your remote API. Have a look at it in GraphiQL. In my case the resolver creates a new node named imageFile at Webiny_BlogPost. In general this should be done at typeName_SchemaSubType, where the part before the underscore is your typeName defined in gatsby-source-graphql and the part after the underscore is the schema subtype within that source, you want to create your image (File) node in. When you query it, keep in mind, that you need to query the node with the remote image url as well (in my case headerImage) to make it work.

Philipp Laurim
  • 45
  • 1
  • 6