Datasource query editor not displaying

Grafana Plugin Development
1

I’m more or less following this example but my query editor is not displaying at all, and I’m not sure why. There’s nothing in the browser console. I do notice this in the above example and others:

onComponentDidMount() { ... }

and I’m wondering based on the react component documentation if that should instead be

componentDidMount()

but that didn’t fix the problem.

The component definitely gets instantiated (an instance of AlcQueryEditor) is created. componentDidMount() and render() never get called.

type Props = QueryEditorProps<MyDatasource, MyQuery, MyDataSourceJsonData>;

interface State {
}

export class MyQueryEditor extends React.PureComponent<Props, State> {
    state: State = {
    };

    componentDidMount() {
        this.setState( this.state);
    }

    render() {
        const {query} = this.props;

        return <div>
            <div>Query Editor {query.refId}</div>
            <div className="gf-form">
                <FormField label="Fields" value={query.metric || ''} />
            </div>
        </div>;
    }
}
2

Haha, because I wasn’t registering it properly. I was calling .setQueryCtrl() instead of .setQueryEditor().

I don’t even know what .setQueryCtrl() is supposed to do - but apparently it’s not for this.

I’m leaving this here so nobody else makes the same mistake.

And yes, it should be overriding .componentDidMount() not .onComponentDidMount()