grafana/docs/sources/packages_api/ui/queryfield.md

+++

-----------------------------------------------------------------------

Do not edit this file. It is automatically generated by API Documenter.

-----------------------------------------------------------------------

title = "QueryField" keywords = ["grafana","documentation","sdk","@grafana/ui"] type = "docs" +++

QueryField class

Renders an editor field. Pass initial value as initialQuery and listen to changes in props.onValueChanged. This component can only process strings. Internally it uses Slate Value. Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.

Signature

export declare class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldState> 

Import

import { QueryField } from '@grafana/ui';

Constructors

Constructor	Modifiers	Description
constructor(props, context)		Constructs a new instance of the QueryField class

Properties

Property	Modifiers	Type	Description
editor		Editor | null
handleBlur		(event: Event, editor: CoreEditor, next: Function) => any	We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.
lastExecutedValue		Value | null
mounted		boolean
onChange		(value: Value, runQuery?: boolean | undefined) => void	Update local state, propagate change upstream and optionally run the query afterwards.
plugins		Plugin[]
runOnChange		() => void
runOnChangeAndRunQuery		() => void
runOnChangeDebounced		Function
runOnRunQuery		() => void

Methods

Method	Modifiers	Description
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()
render()

constructor(props, context)

Constructs a new instance of the QueryField class

Signature

constructor(props: QueryFieldProps, context: Context<any>);

Parameters

Parameter	Type	Description
props	QueryFieldProps
context	Context<any>

editor property

Signature

editor: Editor | null;

handleBlur property

We need to handle blur events here mainly because of dashboard panels which expect to have query executed on blur.

Signature

handleBlur: (event: Event, editor: CoreEditor, next: Function) => any;

lastExecutedValue property

Signature

lastExecutedValue: Value | null;

mounted property

Signature

mounted: boolean;

onChange property

Update local state, propagate change upstream and optionally run the query afterwards.

Signature

onChange: (value: Value, runQuery?: boolean | undefined) => void;

plugins property

Signature

plugins: Plugin[];

runOnChange property

Signature

runOnChange: () => void;

runOnChangeAndRunQuery property

Signature

runOnChangeAndRunQuery: () => void;

runOnChangeDebounced property

Signature

runOnChangeDebounced: Function;

runOnRunQuery property

Signature

runOnRunQuery: () => void;

componentDidMount method

Signature

componentDidMount(): void;

Returns:

void

componentDidUpdate method

Signature

componentDidUpdate(prevProps: QueryFieldProps, prevState: QueryFieldState): void;

Parameters

Parameter	Type	Description
prevProps	QueryFieldProps
prevState	QueryFieldState

Returns:

void

componentWillUnmount method

Signature

componentWillUnmount(): void;

Returns:

void

render method

Signature

render(): JSX.Element;

Returns:

JSX.Element