How to handle "Cannot read property 'node' of null" in a query - reactjs

Question

I am pretty new to React/Gatsby and am doing a query with Apollo.
The thing is that if there is no title or image it'll say "Cannot read property 'node' of null". I get that because if I do not set a title or image in my headless CMS there's no data to read.
How can I make it conditional so that if 'title' is empty don't render it. Any other suggestions or tips about my code are always welcome!
Here's an example of my code
import React from "react"
import Container from "react-bootstrap/Container"
import Image from "react-bootstrap/Image"
import { useQuery, gql } from "#apollo/client"
const APOLLO_QUERY = gql`
{
posts {
nodes {
title
databaseId
content(format: RENDERED)
featuredImage {
node {
sourceUrl
}
}
}
}
}
`
const ApolloTest = () => {
const { data } = useQuery(APOLLO_QUERY)
return (
<Container>
{data &&
data.posts.nodes.map(post => {
return (
<article key={post.databaseId}>
<h3>{post.title}</h3>
<p>{post.content}</p>
<Image
src={post.featuredImage.node.sourceUrl}
alt={post.title}
style={{ width: "150px" }}
fluid
></Image>
</article>
)
})}
</Container>
)
}
export default ApolloTest

Answer 1

I would recommend short-circuit evaluation to first check if the information exists prior to trying to render it. A quick example is {post.title && <h3>{post.title}</h3>}, which will only render the h3 and everything inside it if post.title is truthy. You can extend this to work for the image as well:
return (
<Container>
{data?.posts.nodes.map(post => {
return (
<article key={post.databaseId}>
{post.title && <h3>{post.title}</h3>}
<p>{post.content}</p>
{post.featuredImage && <Image
src={post.featuredImage.node.sourceUrl}
alt={post.title}
style={{ width: "150px" }}
fluid
/>}
</article>
)
})}
</Container>
)