one step at a time

web/package-lock.json

@@ -11,6 +11,8 @@
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@tsconfig/svelte": "^5.0.4",
         "autoprefixer": "^10.4.20",
+        "graphql": "^16.10.0",
+        "graphql-request": "^7.1.2",
         "postcss": "^8.4.49",
         "svelte": "^5.15.0",
         "svelte-check": "^4.1.1",
@@ -471,6 +473,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@graphql-typed-document-node/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1539,6 +1551,29 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/graphql": {
+      "version": "16.10.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.10.0.tgz",
+      "integrity": "sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
+    "node_modules/graphql-request": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/graphql-request/-/graphql-request-7.1.2.tgz",
+      "integrity": "sha512-+XE3iuC55C2di5ZUrB4pjgwe+nIQBuXVIK9J98wrVwojzDW3GMdSBZfxUk8l4j9TieIpjpggclxhNEU9ebGF8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.2.0"
+      },
+      "peerDependencies": {
+        "graphql": "14 - 16"
+      }
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",

web/package.json

@@ -13,6 +13,8 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.20",
+    "graphql": "^16.10.0",
+    "graphql-request": "^7.1.2",
     "postcss": "^8.4.49",
     "svelte": "^5.15.0",
     "svelte-check": "^4.1.1",

web/src/pages/Game.svelte

@@ -1,4 +1,18 @@
 <script lang="ts">
+    import { gql, request } from "graphql-request"
+
+    const doc = gql`
+    query{
+        game(id: "1") {
+            score
+        }
+    }
+    `
+    
+    request('http://localhost:5173/graphql', doc).then((e) => {
+        console.log(e)
+    })
+
     let game = {
         id: "myid",
         added: new Date(),