React reading data form the server - reactjs

Question

I am getting an error from strapi backend data when I fetch particular data into the front end react app I get an error when I log the data into the browser console I see my data in the browser console.
query GetPromoProducts {
allStrapiProduct(filter: {promo: {eq: true}}) {
edges {
node {
strapiId
name
variants {
images {
url
}
}
}
}
}
}
`)
const [selectedSlides, setSelectedSlides] = useState(0)
console.log(data);
var slides = [];
data.allStrapiProduct.edges.map(({node}) => {
console.log(node.variants[0].images[0]);
})

Answer 1

Debugging
To debug the server side, use optional chaining and console.log to work your way up to the object's that returning null.
Not sure what the exact code looks like, based on question.
const myQuery = graphql`
query GetPromoProducts {
allStrapiProduct(filter: { promo: { eq: true } }) {
edges {
node {
strapiId
name
variants {
images {
url
}
}
}
}
}
}
`;
const Component = () => {
const [selectedSlides, setSelectedSlides] = useState(0);
console.log(data);
data.allStrapiProduct.edges.map(({ node }) => {
// For this case, use optional chaining to work your way up the tree
console.log(node);
console.log(node?.variants);
console.log(node?.variants?.[0]);
console.log(node?.variants?.[0]?.images);
console.log(node?.variants?.[0]?.images?.[0]);
});
};
To stop right at the area this happens:
data.allStrapiProduct.edges.map(({ node }) => {
if (!node?.variants?.[0]?.images?.length) {
console.log(node);
console.log(node?.variants);
console.log(node?.variants?.[0]);
console.log(node?.variants?.[0]?.images);
console.log(node?.variants?.[0]?.images?.[0]);
throw "Required data missing";
}
});
Resilient React with GraphQL
GraphQL structured data may be typed, but unless the fields are required, you have to handle null.
To make the client-side code more robust, you can use Array.prototype.filter() to skip objects with no images, or - as in this example - make components handle the case where data is missing. It's entirely up to how you want the frontend app to render it.
I haven't tested this code, so take it as "pseudo-JSX" to demonstrate handling empty graphql response fields.
const ProductVariant = ({ variant }) => {
if (!variant) return null;
return (
<div className="variant">
{variant?.images?.map?.((image, idx) => (
<img src={url} key={idx} />
))}
</div>
);
};
const ProductVariants = ({ variants }) => {
if (!variants?.length > 0) return null;
return (
<div className="variant-list">
<div>Variants</div>
<div className="variant-list--items">
{variants?.map?.((variant, idx) => (
<ProductVariant variant={variant} key={idx} />
))}
</div>
</div>
);
};
const Products = () => {
const [selectedSlides, setSelectedSlides] = useState(0);
console.log(data);
const products = data.allStrapiProduct.edges.map(({ node }) => {
// Handle as you deem fit
});
return (
<div id="products">
<p>Here is a list of products</p>
<div className="products">
{products?.map?.((product, idx) => {
return (
<div className="product" key={idx}>
{product?.variants?.length > 1 && (
<ProductVariants variants={variants} />
)}
</div>
);
})}
</div>
</div>
);
};