Component doesn't re-render with `replaceVariables`

[jackieli]

I have searched previous posts like this one: How to listen for when a variable changes? - #6 by simones

There is also documentation here: Add support for variables in plugins | Grafana documentation

The simplest example in the grafana docs works on first render, but not after the variable has changed, but the data did not.

E.g. use the example in docs:

export function SimplePanel({ options, data, width, height, replaceVariables }: Props) {
  const query = replaceVariables('Now displaying $service');

  return <div>{query}</div>;
}

Note that my data source doesn’t change when the variable changes. E.g. use a simple static postgres query select 1

I create a service TextBox variable and type in some random chars. The panel just doesn’t refresh.

On work around I have is to add the variable in the query for that the data prop is a new one, hence re-render is triggered.

[jackieli]

Answer my own question… I forgot how to use React: Just subscribe to window location change events… But grafana already has the history package in the @grafana/runtime

Here is the solution:

import React, { useEffect, useState } from 'react'
import { PanelProps } from '@grafana/data'
import { getTemplateSrv, locationService } from '@grafana/runtime'

export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {

  const [_, setLocation] = useState(locationService.getLocation())

  useEffect(() => {
    const history = locationService.getHistory()
    const unlisten = history.listen((location: any) => {
      setLocation(location)
    })
    return unlisten
  }, [])

...
})