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!

1 Answers

1
Community On

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
      }
    }
 }