Function render

examples/monaco-graphql-webpack/src/index.ts:18–216

()

void render();

async function render() {
  if (!schemaFetcher.token) {
    renderGithubLoginButton();

    return;
  }
  monacoGraphQLAPI ||= initializeMode({
    formattingOptions: {
      prettierConfig: {
        printWidth: 120,
      },
    },
  });

  document.getElementById('github-login-wrapper')?.remove();
  document
    .getElementById('session-editor')
    ?.setAttribute('style', 'display: flex');
  document
    .getElementById('toolbar')
    ?.setAttribute('style', 'display: inline-flex');

  const toolbar = document.getElementById('toolbar');
  const editors = createEditors();
  const {
    operationModel,
    operationEditor,
    variablesEditor,
    schemaEditor,
    resultsEditor,
    variablesModel,
    schemaModel,
  } = editors;
  const { schemaReloadButton, executeOpButton, schemaPicker } =
    renderToolbar(toolbar);

  renderGithubLoginButton();

  const operationUri = operationModel.uri.toString();

  const schema = await schemaFetcher.loadSchema();
  if (schema) {
    console.log('loaded schema', schema);
    monacoGraphQLAPI.setSchemaConfig([
      { ...schema, fileMatch: [operationUri, schemaModel.uri.toString()] },
    ]);

    schemaEditor.setValue(schema.documentString || '');
  }

  monacoGraphQLAPI.setDiagnosticSettings({
    validateVariablesJSON: {
      [operationUri]: [variablesModel.uri.toString()],
    },
    jsonDiagnosticSettings: {
      // jsonc tip!
      allowComments: true,
      schemaValidation: 'error',