Sitecore GraphQL from the frontend - reactjs

Question

I am looking for an article/example taht can help me do the following:
Run a graphql query (which runs perfectly in the Playground) through my react code
This is the code I am referring to:
export const getStaticProps : GetStaticProps = async(context)=> {
const endPoint = process.env.PREVIEW_URL as string;
const graphQLClient = new GraphQLClient(endPoint);
graphQLClient.setHeader('X-GQL-Token', process.env.PREVIEW_API as string);
const query = gql`{
item(path: "/sitecore/content/sug-containers/home/Item" language: "en"){
field(name: "imageSrc") {
... on ImageField {
id(format: "B")
name
src
}
}
}
}
}`
const data = await graphQLClient.request(query);
console.log(JSON.stringify(data, undefined, 2))
return{
props:{data}
};
}
However, no data is every returned. Props is always null.
I think my query definition is incorrect. I copied the query that runs successfully in the playground. Does anyone know what the problem could be or point me to a working example somewhere please? I have referred to this article:
https://thetombomb.com/posts/do-you-need-graphql-client
In the GraphQL playground, this is the query I use:
query {
item(path: "/sitecore/content/sug-containers/home/AvistaLogo" language: "en"){
field(name: "imageSrc") {
... on ImageField {
id(format: "B")
name
src
}
}
}
}
And here is the output:
{
"data": {
"item": {
"field": {
"id": "{94B0DA6A-D944-489B-B6B0-39094114F244}",
"name": "imageSrc",
"src": "/sitecore/shell/-/media/Images/Logos/logo.svg"
}
}
}
}