Feat: API Playground (#10376)

/claim #10283

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-front/src/modules/settings/playground/components/GraphQLPlayground.tsx

@@ -0,0 +1,55 @@
+import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState';
+import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
+import { explorerPlugin } from '@graphiql/plugin-explorer';
+import '@graphiql/plugin-explorer/dist/style.css';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+import { GraphiQL } from 'graphiql';
+import 'graphiql/graphiql.css';
+import { useContext } from 'react';
+import { useRecoilValue } from 'recoil';
+import { ThemeContext } from 'twenty-ui';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+
+type GraphQLPlaygroundProps = {
+  onError(): void;
+  schema: PlaygroundSchemas;
+};
+
+export const schemaToPath = {
+  [PlaygroundSchemas.CORE]: 'graphql',
+  [PlaygroundSchemas.METADATA]: 'metadata',
+};
+
+export const GraphQLPlayground = ({
+  onError,
+  schema,
+}: GraphQLPlaygroundProps) => {
+  const playgroundApiKey = useRecoilValue(playgroundApiKeyState);
+  const baseUrl = REACT_APP_SERVER_BASE_URL + '/' + schemaToPath[schema];
+
+  const { theme } = useContext(ThemeContext);
+
+  if (!playgroundApiKey) {
+    onError();
+    return null;
+  }
+
+  const explorer = explorerPlugin({
+    showAttribution: true,
+  });
+
+  const fetcher = createGraphiQLFetcher({
+    url: baseUrl,
+  });
+
+  return (
+    <GraphiQL
+      forcedTheme={theme.name as 'light' | 'dark'}
+      plugins={[explorer]}
+      fetcher={fetcher}
+      defaultHeaders={JSON.stringify({
+        Authorization: `Bearer ${playgroundApiKey}`,
+      })}
+    />
+  );
+};