Gatsby not generating childimagesharp nodes for image fields inside components

[johncin]

See title. I made a component with a media field (single) and several enums for image options. But when I do my gatsby build, there's no sharp node being generated. However, if I have a straight up media field right under the content type, then it generates sharp nodes just as you'd expect.

[secretlifeof]

I am having a similar problem. Images inside dynamic zone components does not generate childimagesharp nodes.

In the following query strapiPage is a content type. Inside content there are dynamic zone components.

query MyQuery {
  strapiPage(title: {eq: "home"}) {
    content {
      text
      title
      article {
        gallery {
          url
        }
      }
    }
  }
}

A workaround is adding this to your gatsby-node.js:

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    StrapiPageContentArticleGallery: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: `${source.url}`, // for S3 upload. For local: `http://localhost:1337${source.url}`,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

[johncin]

Hello @secretlifeof , that's very useful. I'll try that next. I've been trying to learn how to do custom functions in gatsby-node, but it's hard to wrap your head around, haha.

I've been having another related headache - when I have multiple image components within a dynamic zone, their image data gets scrambled. I can pull in all the related component fields like the image descriptions just fine, but the image file data gets mixed up so the pictures get put in the wrong places. I'm not sure how to fix that either.

Edit: got around to trying out using a custom resolver as you said. It seems to work! Thanks so much.

[nathany]

The site I'm working on has many components with images that don't return childImageSharp nodes when querying Strapi. Here is one example query:

const data = useStaticQuery(graphql`
  query innovationLabArticleQueryData {
    content: strapiInnovationLab {
      articles {
        header {
          subtitle
          title
        }
        sections {
          image {
            childImageSharp {
              fluid(maxWidth: 550, maxHeight: 340, quality: 100) {
                ...GatsbyImageSharpFluid_withWebp
                presentationWidth
                presentationHeight
              }
            }
          }
          title
          body
        }
      }
    }
  }
`);

And the error for this one:

Cannot query field "childImageSharp" on type "StrapiInnovationLabArticlesSectionsImage".

So I've added the following to gatsby-node.js, but I still see the same error (I ran gatsby clean as well).

// To resolve childImageSharp issue: https://github.com/strapi/gatsby-source-strapi/issues/98
exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    StrapiInnovationLabArticlesSectionsImage: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: `http://localhost:1337${source.url}`, // `${source.url}` for S3 upload. For local: `http://localhost:1337${source.url}`,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

Using gatsby-source-strapi v0.0.12 (latest).

[benedictjohannes]

The example in this comment is actually very resourceful in helping me, after some syntax adjustments, I successfully get the childImageSharp.

So I've added the following to gatsby-node.js, but I still see the same error (I ran gatsby clean as well).

In your query,

        sections {
          image {
            childImageSharp {
              fluid(maxWidth: 550, maxHeight: 340, quality: 100) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }

Under sections, you queried image, while in your resolve function, you defined imageFile field. Either rename your query to imageFile or define field image in your resolver. You should be able to quickly catch this if you see available fields in GraphiQL.

[nathany]

@benedictjohannes Thanks for posting the clarification.

#98 (comment) didn't reference imageFile in the query so it wasn't clear to me that it should be changed.

[benedictjohannes]

@nathany So far, looking at how the plugin resolve fields, it's not easy to implement automated recognition of type of fields in GraphQL query.
For now, manual approach by creating resolvers looks like the simplest way. Manual approach also allows for modifications of fields (like using add node field to create childMarkdownRemark for rich text content from Strapi).

[ChrisKatsaras]

Thanks for your help @secretlifeof ! Your solution works almost perfectly for me but I've noticed that if urls have spaces in them e.g /path/to/file/file name with spaces in it.jpeg or . before the extension e.g /path/to/file/file.name.with.periods.in.it.jpeg a graphql error will occur saying the url is wrong.

I'm using https://github.com/AHgPuK/strapi-mongodb-files to store my images in MongoDB but I don't think it's a problem with storing the images as I can retrieve them using the url just fine if I manually access it using the browser e.g localhost:1337/path/to/file/file name with spaces in it.jpeg

Has anyone else dealt with this issue? Any help is greatly appreciated!

[kachus22]

I am having a similar problem. Images inside dynamic zone components does not generate childimagesharp nodes.

In the following query strapiPage is a content type. Inside content there are dynamic zone components.

query MyQuery {
  strapiPage(title: {eq: "home"}) {
    content {
      text
      title
      article {
        gallery {
          url
        }
      }
    }
  }
}

A workaround is adding this to your gatsby-node.js:

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    StrapiPageContentArticleGallery: {
      imageFile: {
        type: `File`,
        resolve(source, args, context, info) {
          return createRemoteFileNode({
            url: `${source.url}`, // for S3 upload. For local: `http://localhost:1337${source.url}`,
            store,
            cache,
            createNode,
            createNodeId,
            reporter,
          })
        },
      },
    },
  })
}

Another approach would be defining a just Type directly, without creating a resolver.
Using previous Collection as an example you also have the following options:
You could either add it on gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type StrapiPageContentArticleGallery implements Node {
      imageFile: File
    }
  `
  createTypes(typeDefs)
}

or directly in your query

const data = useStaticQuery(graphql`
    type StrapiPageContentArticleGallery implements Node {
      imageFile: File
    }
  query MyQuery {
  // Your Query
  }`)

I just tested out and it worked for me. I'm new to Gatsby and Strapi, but looking at how Strapi is creating the Types, I think it's easier to add the Type directly in your query. I'm using a component, so each Collection that use that I would have to declare a resolver or type for it.

[wantToHawaii]

Have the same issues!!! FMPOV plugin is too raw for production usage with gatsby-image and Gatsby-transformer-sharp...

[chrisid]

Although both #98 resolver and #98 Types work well for a single Media, I can't get them to work with Strapi's MultipleMedia, any ideas?