QueryVariable isn’t executed and do not get values

[sergiochtf]

Currently, I’m developing a Grafana App Scenes, but I have a problem getting data from a QueryVariable, I guess that I have all well configured, but do not get data from this variable.

There are no errors in the console, the only thing is I haven’t got a request on the Network tab. So, no information about what is happening.

Also, I know the data source is well configured because I’m using it in another App using QueryRunner Object. The problem is only using QueryVariable. The app executes only the QueryRunner for the Panel data not the Variable Query.

This is the code that I have implemented right now.

`import { EmbeddedScene, SceneFlexLayout, SceneFlexItem, SceneTimeRange, SceneVariableSet, VariableValueSelectors, SceneControlsSpacer, SceneTimePicker, SceneRefreshPicker, QueryVariable } from '@grafana/scenes';
import { getPeakAudiencePanel } from './panels';
import { queryPeakAudience } from './queries';
import { accuracyVariable, apiKeyVariable, authKeyVariable, streamStateVariable, dataLayerVariable, isoPeriodVariable, customerIdVariable, espIdVariable, } from '../../variables';
import { DATASOURCE_INFINITY } from '../../constants';

export function getScene() {
const timeRange = new SceneTimeRange({
from: 'now-7d',
to: 'now',
});

const regionVariable = new QueryVariable({
datasource: DATASOURCE_INFINITY,
description: "Customer's region",
includeAll: false,
label: "Region",
name: "region",
options: [],
query: {
columns: [
{
selector: "name",
text: "name",
type: "string"
}
],
filters: [],
format: "table",
refId: "variable",
root_selector: "data.getActiveEIRegions",
source: "url",
type: "graphql",
url: "https://my-grafana-url/graphql",
url_options: {
body_content_type: "application/json",
body_graphql_query: "query MyQuery { getActiveEIRegions { name }}",
body_type: "graphql",
data: "",
headers: [
{
key: "x-api-key",
value: "${api_key}"
}
],
method: "POST"
}
},
refresh: 1,
regex: "",
type: "query",
})

const variables = new SceneVariableSet({
variables: [
apiKeyVariable, authKeyVariable, regionVariable, customerIdVariable, isoPeriodVariable, dataLayerVariable, accuracyVariable, streamStateVariable, espIdVariable
]
})

return new EmbeddedScene({
$timeRange: timeRange,
$variables: variables,
body: new SceneFlexLayout({
children: [
new SceneFlexItem({
width: '100%',
height: 300,
body: getPeakAudiencePanel(),
$data: queryPeakAudience,
}),
],
}),
controls: [
new VariableValueSelectors({ $variables: variables }),
new SceneControlsSpacer(),
new SceneTimePicker({ isOnCanvas: true }),
new SceneRefreshPicker({
isOnCanvas: true,
})]
});
}
`

Thanks in advance.

[torkelo]

Debug the infinity data source, check if the regionVariable calls it?

[sergiochtf]

Hi @torkelo,

The infinity datasource is working for the QueryRunners used in another Application. So, I guess the datasource isn't the issue. Currently, it looks like the regionVariable is called with value for a new object call, do not consider the values set up in my code. I see the request into the API in the browser Network tab with default values in the payload.

Also, if I used the datasource manually creating a new variable in a Dashboard using the Grafana UI, I get correctly the region values.