2914 graphql api documentation (#3065)

* Remove dead code

* Create playground component

* Remove useless call to action

* Fix graphiql theme

* Fix style

* Split components

* Move headers to headers form

* Fix nodes in open-api components

* Remove useless check

* Clean code

* Fix css differences

* Keep carret when fetching schema

packages/twenty-docs/src/pages/graphql.tsx

@@ -1,35 +1,69 @@
-import { createGraphiQLFetcher } from "@graphiql/toolkit";
-import { GraphiQL } from "graphiql";
-import React from "react";
-import Layout from "@theme/Layout";
-import BrowserOnly from "@docusaurus/BrowserOnly";
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import React, { useEffect, useState } from 'react';
+import Layout from '@theme/Layout';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { useTheme, Theme } from '@graphiql/react';
+import Playground from '../components/playground';
+import graphiqlCss from '!css-loader!graphiql/graphiql.css';
 
-import "graphiql/graphiql.css";
 
-// Docusaurus does SSR for custom pages but we need to load GraphiQL in the browser
-const GraphiQLComponent = () => {
-  if (
-    !window.localStorage.getItem("graphiql:theme") &&
-    window.localStorage.getItem("theme") != "dark"
-  ) {
-    window.localStorage.setItem("graphiql:theme", "light");
-  }
+// Docusaurus does SSR for custom pages, but we need to load GraphiQL in the browser
+const GraphQlComponent = ({token}) => {
+  const fetcher = createGraphiQLFetcher({ url: "https://api.twenty.com/graphql" });
+
+  // We load graphiql style using useEffect as it breaks remaining docs style
+  useEffect(()=> {
+    const styleElement = document.createElement('style')
+    styleElement.innerHTML = graphiqlCss.toString()
+    document.head.append(styleElement)
+
+    return ()=> styleElement.remove();
+  }, [])
 
-  const fetcher = createGraphiQLFetcher({url: "https://api.twenty.com/graphql"});
   return (
     <div className="fullHeightPlayground">
-      <GraphiQL fetcher={fetcher} />;
+      <GraphiQL
+        fetcher={fetcher}
+        defaultHeaders={JSON.stringify({Authorization: `Bearer ${token}`})}
+      />
     </div>
-  );
+  )
+}
+
+const graphQL = () => {
+  const [token , setToken] = useState()
+  const { setTheme } = useTheme();
+
+  useEffect(()=> {
+    window.localStorage.setItem("graphiql:theme", window.localStorage.getItem("theme") || 'light');
+
+    const handleThemeChange = (ev) => {
+      if(ev.key === 'theme') {
+        setTheme(ev.newValue as Theme);
+      }
+    }
+
+    window.addEventListener('storage', handleThemeChange)
+
+    return () => window.removeEventListener('storage', handleThemeChange)
+  }, [])
+
+  const children = <GraphQlComponent token={token} />
+
+  return (
+    <Layout
+      title="GraphQL Playground"
+      description="GraphQL Playground for Twenty"
+    >
+        <BrowserOnly>{
+          () => <Playground
+            children={children}
+            setToken={setToken}
+          />
+        }</BrowserOnly>
+    </Layout>
+  )
 };
 
-const graphQL = () => (
-  <Layout
-    title="GraphQL Playground"
-    description="GraphQL Playground for Twenty"
-  >
-    <BrowserOnly>{() => <GraphiQLComponent />}</BrowserOnly>
-  </Layout>
-);
-
 export default graphQL;