Custom Variable does not work.

[LouaiMaayah1]

I have this code for a custom variable:

  const vars = new CustomVariable({
    name: 'Var',
    query:  "Var1 , Var2",
  });

  const queryRunner = new SceneQueryRunner({
    datasource: {
      type: 'grafana-mqtt-datasource',
      uid: uid,
    },
    queries: [
      {
        refId: 'A',
        topic: 'device/measurements/${Var}',
      },
    ],
    maxDataPoints: 30,
    minInterval: '1s',
  });

  return new EmbeddedScene({
    $timeRange: timeRange,
    $data: transformedData,
    $variables: new SceneVariableSet({ variables: [vars] }),
    body: new SceneFlexLayout({
      children: [],
    }),
    controls: [new VariableValueSelectors({})],
  });

this code works fine on version: 3.6.0 but breaks on version: 5.6.2

Error

SceneQueryRunner.js:344 PanelQueryRunner Error 
TypeError: Cannot read properties of undefined (reading '$variables')
    at gn (lookupVariable.js:2:39)
    at sn (sceneInterpolator.js:29:20)
    at sceneInterpolator.js:17:22
    at String.replace (<anonymous>)
    at lt (sceneInterpolator.js:14:17)
    at Object.aa [as interpolate] (sceneGraph.js:29:10)
    at de.replace (template_srv.ts:252:25)
    at s.value (module.js?_cache=1.0.0-beta.3:2:2941)
    at DataSourceWithBackend.ts:180:49
    at Array.map (<anonymous>)

[torkelo]

@dprokop looks to be related to https://github.com/grafana/scenes/pull/844 and the scopedVars sceneObject.value thing

[torkelo]

@LouaiMaayah1 which data source are you using?

[LouaiMaayah1]

@torkelo I am using the mqtt data source. please keep in mind that i tried the exact same code on two different version, nothing was changed but the versions.

[LouaiMaayah1]

@torkelo, I dont know if this of use , but if i write the queries like this :

 const queryRunner = new SceneQueryRunner({
    datasource: {
      type: 'grafana-mqtt-datasource',
      uid: uid,
    },
    queries: [
      {
        refId: 'A',
        topic: 'device/measurements/var1',
      },
    ],
    maxDataPoints: 30,
    minInterval: '1s',
  });

no errors appear, but the functionality of the custom var is lost.

[LouaiMaayah1]

I have also tested with influxDB datasource and still get the same error. So it does not seem to be related to the MQTT datasource.

[dprokop]

@LouaiMaayah1 - what Grafana version is your app run with?

[LouaiMaayah1]

@dprokop Version 10.3.1

[dprokop]

Ah, that's the issue then. Any chance you could try this with Grafana 11.1.2? The problem was fixed in that version (ref https://github.com/grafana/grafana/pull/90833)

We will soon provide a patched version that will remove this issue. Sorry about the trouble.

[LouaiMaayah1]

@dprokop , it worked with grafana version 11 , i will be moving to grafana 11 so this is not an issue for me anymore, i appreciate the qiuck response.

[dprokop]

@LouaiMaayah1 - it will work with 11.1.2 onwards.