ui: update graphiql

packages/ui-default/pages/api.page.tsx

@@ -1,9 +1,4 @@
-import 'graphiql/src/css/doc-explorer.css';
-
-import type { GraphQLSchema } from 'graphql';
-import { load as loadYaml } from 'js-yaml';
-import type * as monaco from 'monaco-editor';
-import type { SchemaConfig } from 'monaco-graphql/src/typings';
+import { pick } from 'lodash';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { NamedPage } from 'vj/misc/Page';
@@ -18,154 +13,17 @@ query Example(
     uname
   }
 }`;
-const variablesString = 'name: Hydro';
-const resultsString = '{}';
-const schemaSdlString = `\
-"""
-Loading schema...
-"""`;
 
-const page = new NamedPage('api', async () => {
-  const [{ DocExplorer }, { buildClientSchema, getIntrospectionQuery, printSchema }, { load }] = await Promise.all([
-    import('graphiql/esm/components/DocExplorer'),
-    import('graphql/utilities'),
-    import('vj/components/monaco/loader'),
-  ]);
-  const { monaco } = await load(['graphql', 'json', 'yaml']);
-  const { initializeMode } = await import('monaco-graphql/esm/initializeMode');
-
-  const variablesModel = monaco.editor.createModel(
-    variablesString,
-    'yaml',
-    monaco.Uri.file('/1/variables.yaml'),
+export default new NamedPage('api', async () => {
+  const { GraphiQL } = await import('graphiql');
+  GraphiQL.Logo = function () {
+    return <p></p>;
+  } as any;
+  createRoot(document.getElementById('main')!).render(
+    <GraphiQL
+      fetcher={(body, opts = {}) => request.post('/api', body, pick(opts, 'headers'))}
+      defaultQuery={defaultQuery}
+      variables='{"name": "Hydro"}'
+    />,
   );
-  const variablesEditor = monaco.editor.create(
-    document.getElementById('variables') as HTMLElement,
-    {
-      model: variablesModel,
-      language: 'yaml',
-      formatOnPaste: true,
-      formatOnType: true,
-      comments: {
-        insertSpace: true,
-        ignoreEmptyLines: true,
-      },
-    },
-  );
-
-  const operationModel = monaco.editor.createModel(
-    defaultQuery,
-    'graphql',
-    monaco.Uri.file('/1/operation.graphql'),
-  );
-  const operationEditor = monaco.editor.create(
-    document.getElementById('operation') as HTMLElement,
-    {
-      model: operationModel,
-      formatOnPaste: true,
-      formatOnType: true,
-      folding: true,
-      language: 'graphql',
-    },
-  );
-
-  const schemaModel = monaco.editor.createModel(
-    schemaSdlString,
-    'graphql',
-    monaco.Uri.file('/1/schema.graphqls'),
-  );
-  const schemaEditor = monaco.editor.create(
-    document.getElementById('schema-sdl') as HTMLElement,
-    {
-      model: schemaModel,
-      formatOnPaste: true,
-      formatOnType: true,
-      folding: true,
-      readOnly: true,
-      language: 'graphql',
-    },
-  );
-
-  const resultsModel = monaco.editor.createModel(
-    resultsString,
-    'json',
-    monaco.Uri.file('/1/results.json'),
-  );
-  const resultsEditor = monaco.editor.create(
-    document.getElementById('results') as HTMLElement,
-    {
-      model: resultsModel,
-      language: 'json',
-      wordWrap: 'on',
-      readOnly: true,
-      showFoldingControls: 'always',
-    },
-  );
-
-  const monacoGraphQLAPI = initializeMode({
-    formattingOptions: {
-      prettierConfig: {
-        printWidth: 120,
-      },
-    },
-  });
-
-  const toolbar = $('#toolbar')!;
-  toolbar.html();
-  const executeOpButton = $('<button id="execute-op">Run Operation ➤</button>');
-  toolbar.append(executeOpButton);
-
-  const operationUri = operationModel.uri.toString();
-  let schema: SchemaConfig;
-  let clientSchema: GraphQLSchema;
-  try {
-    const { data } = await request.post('/api?schema', {
-      query: getIntrospectionQuery(),
-      operationName: 'IntrospectionQuery',
-    });
-    clientSchema = buildClientSchema(data);
-    schema = {
-      introspectionJSON: data,
-      documentString: printSchema(clientSchema),
-      uri: monaco.Uri.parse('/api?schema').toString(),
-    };
-  } catch {
-    schemaModel.setValue('"""\nFailed to load schema.\n"""');
-  }
-  monacoGraphQLAPI.setSchemaConfig([
-    { ...schema, fileMatch: [operationUri, schemaModel.uri.toString()] },
-  ]);
-  schemaEditor.setValue(schema.documentString || '');
-
-  const operationHandler = async () => {
-    try {
-      resultsEditor.setValue(JSON.stringify({ message: 'Executing...' }, null, 2));
-      const result = await request.post('/api?schema', {
-        query: operationEditor.getValue(),
-        variables: loadYaml(variablesEditor.getValue()),
-      });
-      resultsEditor.setValue(JSON.stringify(result, null, 2));
-    } catch (err) {
-      if (err instanceof Error) {
-        resultsEditor.setValue(err.toString());
-      }
-    }
-  };
-  executeOpButton.on('click', operationHandler);
-  executeOpButton.on('touchend', operationHandler);
-  const opAction: monaco.editor.IActionDescriptor = {
-    id: 'graphql-run',
-    label: 'Run Operation',
-    contextMenuOrder: 0,
-    contextMenuGroupId: 'graphql',
-    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-    run: operationHandler,
-  };
-  operationEditor.addAction(opAction);
-  variablesEditor.addAction(opAction);
-  resultsEditor.addAction(opAction);
-
-  createRoot(document.getElementById('docs')).render(<DocExplorer schema={clientSchema} />);
 });
-
-export default page;