load skills from graphql

js/customElements/skills.js

 class Skill extends HTMLElement {
     constructor() {
         super();
-        let xhr = new XMLHttpRequest();
-        xhr.onreadystatechange = () => {
-            if (xhr.readyState == 4 && xhr.status == 200) {
-                JSON.parse(xhr.responseText).forEach(skill => {
-                    const image = document.createElement("img");
-                    image.classList.add("skills");
-                    image.src = "/API/getFile.php?filename=" + skill;
-                    this.appendChild(image);
-                });
-            }
-        }
-        xhr.open("GET", "/API/skills.php");
-        xhr.send();
+        this.getSkills();
+    }
+
+    async getSkills(){
+        var graphql = JSON.stringify({
+            query: "query {\r\n  skills\r\n}"
+          })
+          var requestOptions = {
+            method: 'POST',
+            body: graphql,
+          };
+
+        let skills = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.skills;
+        skills.forEach(skill => {
+            const image = document.createElement("img");
+            image.classList.add("skills");
+            image.src = "/API/getFile.php?filename=" + skill;
+            this.appendChild(image);
+        });
+
     }
 }
 

public/API/queries/queries.php

@@ -2,6 +2,8 @@
 use GraphQL\Type\Definition\ObjectType;
 use GraphQL\Type\Definition\Type;
 
+require "./queries/skills.php";
+
 $queryType = new ObjectType([
     'name' => 'Query',
     'fields' => [
@@ -9,5 +11,9 @@ $queryType = new ObjectType([
             'type' => Type::string(),
             'resolve' => fn ($rootValue, $args) => $sitekey,
         ],
+        'skills' => [
+            'type' => Type::listOf(Type::string()),
+            'resolve' => fn ($rootValue, $args) => getSkills(),
+        ],
     ],
 ]);

public/API/queries/skills.php

+<?php
+
+function getSkills() {
+        include("./lib/config.php");
+        $s3Client = new Aws\S3\S3Client([
+                'version' => 'latest',
+                'region'  => 'us-east-1',
+                'endpoint' => $S3Server,
+                'use_path_style_endpoint' => true,
+                'credentials' => [
+                        'key'    => $S3AccessKey,
+                        'secret' => $S3SecretKey,
+                ],
+        ]);
+
+        $result = $s3Client->ListObjects(['Bucket' => $S3BucketName, 'Delimiter'=>'/', 'Prefix' => 'skills/']);
+
+        $response = [];
+        foreach ($result["Contents"] as $skill){
+                array_push($response, $skill["Key"]);
+        }
+        return $response;
+}
\ No newline at end of file

public/API/skills.php

-<?php
-include("./lib/config.php");
-require 'vendor/autoload.php';
-
-$s3Client = new Aws\S3\S3Client([
-        'version' => 'latest',
-        'region'  => 'us-east-1',
-        'endpoint' => $S3Server,
-        'use_path_style_endpoint' => true,
-        'credentials' => [
-                'key'    => $S3AccessKey,
-                'secret' => $S3SecretKey,
-            ],
-]);
-
-$result = $s3Client->ListObjects(['Bucket' => $S3BucketName, 'Delimiter'=>'/', 'Prefix' => 'skills/']);
-
-$response = [];
-foreach ($result["Contents"] as $skill){
-        array_push($response, $skill["Key"]);
-}
-
-header("Content-Type: application/json");
-echo json_encode($response);
\ No newline at end of file