Gatsby error Cannot read property 'fixed' of null - reactjs

Question

I want to show my Products in the Menu section of index page . I try to display content such as text and images from contentful API but I get this error:
TypeError: Cannot read property 'fixed' of null
src/components/HomePageComponents/Product.js:6
3 | import { styles } from "../../utils"
4 | import Img from "gatsby-image"
5 |
6 | export default function Product({ product }) {
7 | const { name, price, ingredients } = product
8 | const { fixed } = product.img
This is my Product.js
import React from "react"
import styled from "styled-components"
import { styles } from "../../utils"
import Img from "gatsby-image"
export default function Product({ product }) {
const { name, price, ingredients } = product
const { fixed } = product.img
return (
<ProductWrapper>
<Img fixed={fixed} className="img" />
<div className="text">
<div className="product-content">
<h3 className="name">{name}</h3>
<h3 className="price">{price}</h3>
</div>
<p className="info">{ingredients}</p>
</div>
</ProductWrapper>
)
}
const ProductWrapper = styled.div`
#media (min-width: 576px) {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1rem;
}
.img {
border-radius: 0.5rem;
}
.product-content {
display: flex;
justify-content: space-between;
font-size: 1.4rem;
text-transform: uppercase;
}
.name {
color: ${styles.colors.mainYellow};
margin-top: 0.5rem;
}
.price {
color: ${styles.colors.mainYellow};
margin-top: 0.5rem;
}
.info {
margin-top: 0.5rem;
word-spacing: 0.2rem;
text-transform: lowercase;
}
`
this is my Menu.js
import React from "react"
import Product from "./Product"
import { StaticQuery, graphql } from "gatsby"
import { Section, Title } from "../../utils"
import styled from "styled-components"
// import { Link } from "gatsby"
export default function Menu() {
return (
<Section>
<Title title="Featured items" message="Little taste" />
<ProductList>
<StaticQuery
query={graphql`
{
items: allContentfulMenu {
edges {
node {
name
price
id
ingredients
img {
fixed(width: 150, height: 150) {
...GatsbyContentfulFixed_tracedSVG
}
}
}
}
}
}
`}
render={data => {
return data.items.edges.map(item => {
return <Product key={item.node.id} product={item.node} />
})
}}
/>
</ProductList>
</Section>
)
}
const ProductList = styled.div`
margin: 3rem 0;
display: grid;
grid-template-columns: 100%;
grid-row-gap: 3rem;
#media (min-width: 576px) {
grid-template-columns: 95%;
}
#media (min-width: 776px) {
grid-template-columns: 80%;
justify-content: center;
}
#media (min-width: 992px) {
grid-template-columns: 1fr 1fr;
grid-gap: 2rem;
}
`

Answer 1

It seems that there's no image specified at the Contentful field. Therefore the fixed value is null and that's not allowed by their plugin gatsby-source-contentful.

Answer 2

In this case looks like the property img in product don't have any fixed property. In particular, img is null, and you're treating it as an object. You may have to check if img is actually an object before destructuring it