Added @graphiql/explorer-plugin in twenty docs package (#3244)

* Added plugin-explorer in twenty-docs gql page and updated graphiql version

* Cleaned up graphql file (#3087)

* Added plugin-explorer style and modified useEffect to adapt it (#3087)

* Updated the yarn lock file (#3087)

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

@@ -1,69 +1,87 @@
-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 { explorerPlugin } from '@graphiql/plugin-explorer';
+import { Theme, useTheme } from '@graphiql/react';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import Layout from '@theme/Layout';
+import { GraphiQL } from 'graphiql';
+
 import Playground from '../components/playground';
+
+import explorerCss from '!css-loader!@graphiql/plugin-explorer/dist/style.css';
 import graphiqlCss from '!css-loader!graphiql/graphiql.css';
 
-
 // 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" });
+const GraphQlComponent = ({ token }) => {
+  const explorer = explorerPlugin({
+    showAttribution: true,
+  });
+
+  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)
+  useEffect(() => {
+    const createAndAppendStyle = (css) => {
+      const styleElement = document.createElement('style');
+      styleElement.innerHTML = css.toString();
+      document.head.append(styleElement);
+      return styleElement;
+    };
 
-    return ()=> styleElement.remove();
-  }, [])
+    const styleElement1 = createAndAppendStyle(graphiqlCss);
+    const styleElement2 = createAndAppendStyle(explorerCss);
+
+    return () => {
+      styleElement1.remove();
+      styleElement2.remove();
+    };
+  }, []);
 
   return (
     <div className="fullHeightPlayground">
       <GraphiQL
+        plugins={[explorer]}
         fetcher={fetcher}
-        defaultHeaders={JSON.stringify({Authorization: `Bearer ${token}`})}
+        defaultHeaders={JSON.stringify({ Authorization: `Bearer ${token}` })}
       />
     </div>
-  )
-}
+  );
+};
 
 const graphQL = () => {
-  const [token , setToken] = useState()
+  const [token, setToken] = useState();
   const { setTheme } = useTheme();
 
-  useEffect(()=> {
-    window.localStorage.setItem("graphiql:theme", window.localStorage.getItem("theme") || 'light');
+  useEffect(() => {
+    window.localStorage.setItem(
+      'graphiql:theme',
+      window.localStorage.getItem('theme') || 'light',
+    );
 
     const handleThemeChange = (ev) => {
-      if(ev.key === 'theme') {
+      if (ev.key === 'theme') {
         setTheme(ev.newValue as Theme);
       }
-    }
+    };
 
-    window.addEventListener('storage', handleThemeChange)
+    window.addEventListener('storage', handleThemeChange);
 
-    return () => window.removeEventListener('storage', handleThemeChange)
-  }, [])
+    return () => window.removeEventListener('storage', handleThemeChange);
+  }, []);
 
-  const children = <GraphQlComponent token={token} />
+  const children = <GraphQlComponent token={token} />;
 
   return (
     <Layout
       title="GraphQL Playground"
       description="GraphQL Playground for Twenty"
     >
-        <BrowserOnly>{
-          () => <Playground
-            children={children}
-            setToken={setToken}
-          />
-        }</BrowserOnly>
+      <BrowserOnly>
+        {() => <Playground children={children} setToken={setToken} />}
+      </BrowserOnly>
     </Layout>
-  )
+  );
 };
-
 export default graphQL;