Query to Data source InfluxDB


I need some guidance on how to make a query in React component which would be equal on the shown screenshot below.

I’m developing these plugin now for almost 3 weeks. I really can’t really find anything in the docs… I mean this is the most basic thing and can’t find in docs how to make a simple query.

this is the code I’ve come up for now but i’m keep getting error Datasource.ts:49 Query failed TypeError: Cannot read properties of undefined (reading ‘from’)

import { DataSourceApi, DataQueryRequest, DataQueryResponse } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
import { dateTime } from '@grafana/data';

// Construct a complete DataQueryRequest object
const optionsQuery: DataQueryRequest<any> = {
  requestId: 'my_unique_request_id', // Should be a unique identifier for this request
  interval: '1m', // The sampling interval, eg. '1m' for 1 minute
  intervalMs: 60000, // The sampling interval in milliseconds
  maxDataPoints: 1000, // Max number of data points to return
  range: {
    // The time range for the query
    from: dateTime(new Date('2023-01-01T00:00:00Z')), // Convert to DateTime
    to: dateTime(new Date('2023-01-02T00:00:00Z')),
    raw: {
      from: new Date('2023-01-01T00:00:00Z').toLocaleTimeString(),
      to: new Date('2023-01-02T00:00:00Z').toLocaleTimeString(),
  scopedVars: {},
  targets: [
      refId: 'A',
      policy: 'autogen',
      measurement: 'DavidWindows_SineO3_AmplFFT_metadata',
      query: 'SELECT * FROM DavidWindows_SineO3_AmplFFT_metadata WHERE $timeFilter',
      rawQuery: true,
  timezone: 'browser',
  app: 'dashboard',
  startTime: Date.now(),

// Fetch data using the constructed DataQueryRequest object
async function fetchData(options: DataQueryRequest) {
  const dataSource = await getDataSourceSrv().get('InfluxDB-1');
  console.log(dataSource, 'dataSource');

  // Execute the query which returns an observable or a promise
  const result = await dataSource.query(optionsQuery);

  if ('subscribe' in result) {
      next: (response: DataQueryResponse) => {
        console.log(response, 'result of query');
      error: (error: any) => {
        console.error('Query failed', error);
      complete: () => {
        console.log('Query completed');
  } else {
    console.log(result, 'result of query');

export default fetchData;

Hi @davidkramer12!

There should be no need for you to manually construct the DataQueryRequest like that. If you define a QueryEditor component in your plugin’s module.ts and make sure to call props.onChange(newProps) whenever a user changes the query in the UI, Grafana will create the DataQueryRequest and execute the query whenever the dashboard is refreshed.

If you want, you can take a look at our tutorial on how to build data source plugins. We also have a bunch of data source plugin examples in this repo, and I think this plugin might be if particularly interesting.

Hope this was helpful.

1 Like

Yes I know I can make Custom Query Editor… But what I need to do is when user let’s say make on UI query for DavidWindows_Sine03_AmpIFFT I need to make a query under the hood in so in code query for DavidWindows_Sine03_AmpIFFT.metaData. So If you need to know the context. So DavidWindows_Sine03_AmpIFFT is actually data and in DavidWindows_Sine03_AmpIFFT.metaData are Metrics. Of Course one way is to make user do that but if it’s possible to make a query to DataSource without writing BE that would be great.
So I think there I have like 2-3 options:
1.Make user make this query
2.Write Be for this query
3. Find a way on FE to make this query
Bascilly in Influx this is the query:
Select * from DavidWindows_Sine03_AmpIFFT_metaData and that’s it. I really don’t want to write whole BE for this.

@mikhailvolkov or @marcusolsson Can please any one help at this? Basically what i really need to do is what is shown on screenshot. But really without any user interaction.

@davidkramer12 You can use /ds/query to execute the query: Data source HTTP API | Grafana documentation

Target configuration you can find in options.

p.s Marcus is not working on Grafana anymore.

Yes I tried to used /api/ds/query… But It’s so hard to debug because i’m getting 500 response. The logs from server deosn’t tell much as well… And I can’t really find what scenarioId means as well…

const makeQuery = async () => {
  const apiUrl = '/api/ds/query';

  const requestBody = {
    from: 'now-7d',
    to: 'now',
    queries: [
        refId: 'A',
        datasourceId: 1,
          'SELECT * FROM "autogen"."DavidWindows_Sine03_AmplFFT_metadata" WHERE time >= now() - 7d and time <= now()',
        format: 'table',
        maxDataPoints: 1848,
        intervalMs: 200,

  try {
    const response = await fetch(apiUrl, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      body: JSON.stringify(requestBody),
    console.log(response, 'response');

    // Log the response body
    console.log(await response.text());

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);

    const responseData = await response.json();
  } catch (error) {
    console.error('Error making query:', error);

the response that i’m getting

{"message":"An error occurred within the plugin","messageId":"plugin.downstreamError","statusCode":500,"traceID":""}