load comments from graphQL

js/customElements/commentsDisplay.js

 class commentsDisplay extends HTMLElement {
     constructor() {
         super();
-        let path = window.location.pathname;
-        let pageName = path.split("/").pop();
-
-        let xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = () => {
-            if (xhr.readyState === 4) {
-                if (xhr.status === 200) {
-                    let comments = JSON.parse(xhr.responseText);
-                    comments.forEach((element) => {
-                        const h3 = document.createElement("h3");
-                        h3.classList.add("commentTitle");
-                        h3.innerText = element["name"];
-                        this.appendChild(h3);
-
-                        const commentDiv = document.createElement("div");
-                        commentDiv.classList.add("comment");
-                        this.appendChild(commentDiv);
-
-                        const image = document.createElement("img");
-                        image.src = element["gravatarURL"];
-                        commentDiv.appendChild(image);
-
-                        const article = document.createElement("article");
-                        article.classList.add("commentArticle");
-                        commentDiv.appendChild(article);
-
-                        const commentText = document.createElement("p");
-                        commentText.classList.add("commentText");
-                        commentText.innerText = element["comment"];
-                        article.appendChild(commentText);
-
-                    });
-                } else {
-                    let p = document.createElement("p");
-                    p.innerText = "Leider konnte dieser Inhalt nicht geladen werden, bitte versuche die Seite neu zu laden oder komme später wieder zurück.";
-                    this.appendChild(p);
+        this.getComments()
+    }
 
-                }
-            }
+    async getComments() {
+        var graphql = JSON.stringify({
+        query: 'query($article: String!) { comments(article: $article) { name comment gravatarURL }}',
+        variables: {
+            "article": window.location.pathname
         }
-        xhr.open("GET", "/API/projectComments.php?article=" + pageName);
-        xhr.send();
+        })
+        var requestOptions = {
+        method: 'POST',
+        body: graphql,
+        };
+        let comments = (await (await fetch("http://localhost:1234/API/graphql.php", requestOptions)).json()).data.comments;
+        comments.forEach((element) => {
+            const h3 = document.createElement("h3");
+            h3.classList.add("commentTitle");
+            h3.innerText = element["name"];
+            this.appendChild(h3);
+
+            const commentDiv = document.createElement("div");
+            commentDiv.classList.add("comment");
+            this.appendChild(commentDiv);
+
+            const image = document.createElement("img");
+            image.src = element["gravatarURL"];
+            commentDiv.appendChild(image);
+
+            const article = document.createElement("article");
+            article.classList.add("commentArticle");
+            commentDiv.appendChild(article);
+
+            const commentText = document.createElement("p");
+            commentText.classList.add("commentText");
+            commentText.innerText = element["comment"];
+            article.appendChild(commentText);
+
+        });
     }
 }