<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GraphQL</title>
</head>
<body>
<script>
const gql=(url,query, variables)=>fetch(url, {method:"POST",headers:{'content-type':'application/json'}, body: JSON.stringify({query,variables})}).then(res=>res.json());
(async ()=>{
let data=await gql("http://shop-roles.asmer.fs.a-level.com.ua/graphql", `query cats($q:String){
CategoryFind(query:$q){
name goods{
name images{
url
}
}
}
}`, {q: "[{}]"});
console.log(data);
console.log(data.data)
let div = document.createElement('div');
for (const key in data.data) {
for(let keys of data.data[key]){
let p = document.createElement('h3');
p.innerHTML=keys.name;
div.append(p);
if(Array.isArray(keys.goods)){
for(let i of keys.goods){
let p2=document.createElement('p');
p2.style.marginLeft=50+'px';
p2.innerHTML=' - '+i.name;
div.append(p2);
}
}else{
let p2=document.createElement('p');
p2.innerHTML=' - '+keys.goods;
}
}
}
document.body.append(div);
})();
</script>
</body>
</html>