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 wsClient = createClient({
  url: import.meta.env.VITE_GRAPHQL_WS_ENDPOINT,
  connectionParams: () => ({
    Authorization: "Bearer " + localStorage.getItem("access_token"),
  }),
});

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 (
    <GraphiQL
      fetcher={fetcher}
      defaultEditorToolsVisibility={true}
    />
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);