Grafana - get query name in TypeScript + React

I’m building a Grafana custom panel plugin with TypeScript + React.
I would like to get the name of every query but for some reason all I get is undefined.
The name is set in the Grafana GUI. The query name will be used to display it in the panel.
Is there something I’m doing wrong?

This example/snippet shows how I try to get the query name:

import React from 'react';
import { PanelProps } from '@grafana/data';
import _ from 'lodash';
import { css } from 'emotion';
import { SimpleOptions } from 'types';

interface Props extends PanelProps<SimpleOptions> {}
export class SimplePanel extends React.PureComponent<Props, State> {
  constructor(props: Props) {
  render() {     
    const { data, options } = this.props;
      _.forEach(data.series, (series, index) => {
       console.log('Series name: ' +;
  return <someHTML>

If you are talking about the Id you set in the Query Editor, then it’s series.refId property.

Ah, yes, that’s it. Thanks!