CODEWITHSUNDEEP
javascriptgraphqlgatsby
Victor adt
Victor adt

Reputation: 69

ChildImageSharp is null after creating custom schema in gatsby-node

I'm building a website with gatsby and Strapi and i'm facing an issue that can't fix.

Here's my problem:

I made a custom graphQL Schema to avoid building fails if my clients leave empty fields in the CMS. But since i did that for my homepage banner, childImageSharp is null.

I'm assuming i did my custom graphql schemas wrong but I can't understand where.

Here's my files:

Homepage.js

const IndexPage = ({ data }) => {
  return (
    <Layout>
      {data.allStrapiBanner.edges[0].node.banner.childImageSharp.fixed &&
        <Img
          fixed={data.allStrapiBanner.edges[0].node.banner.childImageSharp.fixed}
          imgStyle={{ position: "static" }}
        />
      }
    </Layout>
  )
}

export default IndexPage


export const pageQuery = graphql`
    allStrapiBanner {
      edges {
        node {
          banner {
            childImageSharp {
              fixed(width: 800){
                src
              }
            }
          }
        }
      }
    }
  }
`

Here's my gatsby-node.js custom Schema:

exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type allStrapiBanner implements Node {
      banner: childImageSharp
    }
    type childImageSharp{
      childImageSharp: fixed
    }
    type fixed{
      fixed(width: Int): src
      }
    type src{
      src: String
    }
  `
  createTypes(typeDefs)
}

Now gatsby build without error when i don't upload an image to my banner field but when i upload an image childImageSharp is null

I already read the doc (https://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/) but i can't manage to make it work. if someone can give me a tips to how to correctly create my custom schemas for childImageSharp.

Thanks you very much in advance

Upvotes: 0

Views: 392

Answers (1)

Victor adt
Victor adt

Reputation: 69

SOLVED

After a lot of hours of brute force trying to understand what was wrong, I have finally fixed my problem. I can't believe it was so simple:

I simply changed my schema in gastby-node.js to

exports.sourceNodes = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type allStrapiBanner implements Node {
      banner: File
    }
  `
  createTypes(typeDefs)
}

and it work

Upvotes: 1

Related Questions