0

How would I add a gatsby-image type to a field on a graphQL model like below?

type PortfolioItem @model {
 id: ID!
 name: String
 Image: ?????
 ......other fields
}

I know im supposed to create a foreign key with another object, but how do I make another model for gatsby-image to attach as a foreign key?!?!

The json for the image is generated by this:

file(relativePath: { eq: "websites.jpg" }) {
      childImageSharp {
        fixed(width: 650) {
          ...GatsbyImageSharpFixed
        }
      }
    }

How on earth, do I add this as a field on a graphQL model so I can perform gatsby page queryies like below:

gql`query MyQuery {
    getPortfolioItem(id: "12314") {
        image: file(relativePath: { eq: "websites.jpg" }) {
            childImageSharp {
                fixed(width: 650) {
                    ...GatsbyImageSharpFixed
                }
             }
        }
    }
}

So the returned JSON would look like:

{
  name: 'something',
  image: {
    ...whatever JSON is returned by the gatsby-image function above
  }
}
  • Have you seen https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields ? – ehrencrona Jul 03 '20 at 19:49
  • @ehrencrona yes - I have MANY times and pardon my ignorance - but I really don't know how to apply that to gatsby-image, AWS or whatever image plugin I end up using. The docs for Gatsby Schema Customization are INSANE lol I've been a react/node dev for years and write APIs with Go, PHP and Python - but this Graphql Gatsby stuff is throwing me for a loop - im trying to find some examples of what im trying to do that are a bit closer - if you have any idea how to write an approx dummy example, that would be amazing. I cant be this hard to relate images to Data models lol –  Jul 03 '20 at 21:30
  • I feel you, I didn’t understand it either while skimming through it :) Just checking that you’d found it. – ehrencrona Jul 03 '20 at 21:53
  • Hey there, In your schema, `Image` should be of type `File`. Where are you sourcing the image from? If it's in your local file system, you'd need to find the image's File node id & use it as the foreign key; if it's from a bucket somewhere, you'd need to use `createRemoteFileNode` from gatsby-source-filesystem to download the file & create a node for it. Please edit your question to add more info. – Derek Nguyen Jul 07 '20 at 04:24

0 Answers0