ws support for gql subscriptions

.env.example

@@ -1 +1,2 @@
 VITE_GRAPHQL_ENDPOINT=http://localhost:8080/query
+VITE_GRAPHQL_WS_ENDPOINT=ws://localhost:8080/query

main.jsx

@@ -1,21 +1,33 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { GraphiQL } from "graphiql";
+import { createGraphiQLFetcher } from "@graphiql/toolkit";
+import { createClient } from "graphql-ws";
 
 import "graphiql/graphiql.css";
 
-const fetcher = async (params) => {
-  const res = await fetch(import.meta.env.VITE_GRAPHQL_ENDPOINT, {
-    method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(params),
+const wsClient = createClient({
+  url: import.meta.env.VITE_GRAPHQL_WS_ENDPOINT,
+  connectionParams: () => ({
+    Authorization: "Bearer " + localStorage.getItem("access_token"),
+  }),
 });
 
-  return res.json();
-};
+const fetcher = createGraphiQLFetcher({
+  url: import.meta.env.VITE_GRAPHQL_ENDPOINT,
+  wsClient,
+
+  fetch: (url, opts) =>
+    fetch(url, {
+      ...opts,
+      credentials: "include",
+    }),
+
+  websocketClientOptions: {
+    retryAttempts: 3,
+    lazy: true,
+  },
+});
 
 function App() {
   return (

package-lock.json

@@ -9,7 +9,10 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@graphiql/toolkit": "^0.11.3",
         "graphiql": "^4.1.2",
+        "graphql": "^16.13.2",
+        "graphql-ws": "^6.0.8",
         "react": "^19.2.4",
         "react-dom": "^19.2.4"
       },
@@ -1735,6 +1738,33 @@
         "graphql": "^15.5.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/graphql-ws": {
+      "version": "6.0.8",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/graphql-ws/-/graphql-ws-6.0.8.tgz",
+      "integrity": "sha512-m3EOaNsUBXwAnkBWbzPfe0Nq8pXUfxsWnolC54sru3FzHvhTZL0Ouf/BoQsaGAXqM+YPerXOJ47BUnmgmoupCw==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@fastify/websocket": "^10 || ^11",
+        "crossws": "~0.3",
+        "graphql": "^15.10.1 || ^16",
+        "ws": "^8"
+      },
+      "peerDependenciesMeta": {
+        "@fastify/websocket": {
+          "optional": true
+        },
+        "crossws": {
+          "optional": true
+        },
+        "ws": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "2.0.4",
       "resolved": "https://package-mirror.liara.ir/repository/npm/is-plain-object/-/is-plain-object-2.0.4.tgz",

package.json

@@ -11,7 +11,10 @@
   "license": "ISC",
   "type": "module",
   "dependencies": {
+    "@graphiql/toolkit": "^0.11.3",
     "graphiql": "^4.1.2",
+    "graphql": "^16.13.2",
+    "graphql-ws": "^6.0.8",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },