Example: query editor with some options

queryEditor.tsx

import React, { ReactElement } from 'react';
import { css } from '@emotion/css';
import { useStyles2, Segment } from '@grafana/ui';
import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import type { EditorProps } from './types';
import { useAsync } from 'react-use';

export function QueryEditor(props: EditorProps): ReactElement {
  const { query } = props;
  const { dimensions } = query;
  const styles = useStyles2(getStyles);
  // You can use regions here and pass it to the QueryModel
  // in the constructor instead of passing it via the query.
  const { value: regions } = useAsync(async () => {
    // fetch options from API
    const response = await fetchSomethingFromApi(dimensions);

    // map to selectable values
    return response.data.map((d) => {
      return {
        label: d.value,
        value: d.value,
      };
    });
  }, [dimensions]); // add any dependencies you have on the API call.

  return (
    <div className={styles.editor}>
      <Segment
        options={regions}
        onChange={(region) =>
          props.onChange({
            ...query,
            region: region,
          })
        }
      />
    </div>
  );
}

function getStyles(theme: GrafanaTheme2) {
  return {
    editor: css`
      margin: ${theme.spacing(0, 0.5, 0.5, 0)};
    `,
  };
}