Query a Datasource Directly from Panel Plugin React Code

[ivanvalentini]

Hello,
I’m developing a Panel Plugin and I need to make some real-time generated queries directly from the code. Is there a way to accomplish that?
I know there is a way in Angular but I can’t figure out how to do that in React.
Thanks.

[marcusolsson]

This answer suggests that you can access the data source instance using the getDatasourceSrv:

Accessing Datasource from Panel

This is the way I am doing things with function components in v6 - there may a better way though. import React, { useState, useEffect } from 'react'; import { PanelProps } from '@grafana/data'; import { getDataSourceSrv } from '@grafana/runtime'; import { Datasource } from './types'; ... const MyPanel: React.FC<PanelProps> = props => { const [datasource, setDatasource] = useState<Datasource>(); ... // Setting the datasource in state - will pass down to child components in props if nee…

Would that work for your use case?

[giacomosegala]

Hello Marcus,
I’m interested in this question. It’s clear how to get the Datasource but not how to execute a query on a datasource in React, which I think was the key point of the question. More in detail, I have the need to execute a SELECT query on a MySql datasource but it’s no so clear how to do it. I found there’s a query method given by DataSource Api, but, as I said, it’s not so clear how to use it and I was not able to find any example about it.
Thanks a lot.

[davidkramer12]

Did you found solution? How to make a query ?