FetchAPI GraphQL / Gatsby throw error on frontend if null data - reactjs

Question

I have set up a band site using Gatsby which utilises the Bandsintown API to get events whether they are upcoming or past events.
Displaying past events is fine, but I would like to display a message on the frontend if there are no upcoming events / no events i.e no data comes back from the fetch API call. I am not really sure how to go about this?
Currently I cannot even build the solution and get error in my console:
Cannot query field "allBandsInTownEvent" on type "Query"
Can anybody point me in the right direction?
gatsby-node.js (local plugin)
const fetch = require("node-fetch")
const queryString = require("query-string")
exports.sourceNodes = (
{ actions, createNodeId, createContentDigest },
configOptions
) => {
const { createNode } = actions
delete configOptions.plugins
const processEvent = event => {
const nodeId = createNodeId(`bandsintown-event-${event.id}`)
const nodeContent = JSON.stringify(event)
const nodeData = Object.assign({}, event, {
id: nodeId,
parent: null,
children: [],
internal: {
type: `BandsInTownEvent`,
content: nodeContent,
contentDigest: createContentDigest(event),
},
})
return nodeData
}
const artist = configOptions.artist
const app_id = configOptions.app_id
const apiUrl = `https://rest.bandsintown.com/artists/${artist}/events?app_id=${app_id}&date=upcoming` //upcoming or past
return fetch(apiUrl).then(response =>
response.json().then(data => {
if (Object.entries(data).length === 0) {
return some kind of error? i.e document.querySelector(".no-shows").innerHTML = "No Shows on at the moment"
}
data.forEach(event => {
const nodeData = processEvent(event)
createNode(nodeData)
})
})
)
}
events.js
import React from "react"
import { graphql, StaticQuery } from "gatsby"
import "./index.scss"
export default () => (
<StaticQuery
query={graphql`
query EventsQuery {
allBandsInTownEvent(
limit: 8
sort: { fields: [datetime], order: DESC }
) {
nodes {
id
venue {
city
country
name
}
artist {
id
facebook_page_url
image_url
name
}
datetime(formatString: "ddd, MMM DD YYYY")
url
}
}
}
`}
render={data => (
<div className="Events">
<div className="event-header">Tour Dates</div>
<div className="event-content">
{data.allBandsInTownEvent.nodes.map(node => (
<div className="event-item" key={node.id}>
<div className="event-details">
<div className="event-datetime">{node.datetime}</div>
<div className="event-name">{node.venue.name}</div>
<div className="event-venue">
<div className="city">{node.venue.city}</div>
<div className="region">{node.venue.region}</div>
<div className="country">{node.venue.country}</div>
</div>
</div>
<div className="event-cta">
<a
href={node.url}
rel="noreferrer"
target="_blank"
title={node.title}
>
Tickets
</a>
</div>
</div>
)
)}
</div>
</div>
)}
/>
)