Build a streaming data source plugin

This guide assumes that you’re already familiar with how to Build a data source plugin.

When monitoring critical applications, you want your dashboard to refresh as soon as your data does. In Grafana, you can set your dashboards to automatically refresh at a certain interval, no matter what data source you use. Unfortunately, this means that your queries are requesting all the data to be sent again, regardless of whether the data has actually changed.

By enabling streaming for your data source plugin, you can update your dashboard as soon as new data becomes available.

For example, a streaming data source plugin can connect to a websocket, or subscribe to a message bus, and update the visualization whenever a new message is available.

Grafana uses to continuously send data from a data source to a panel visualization. There’s a lot more to RxJS than what’s covered in this guide. If you want to learn more, check out the RxJS documentation.

Enable streaming for your data source in the file.

Change the signature of the query method to return an Observable from the rxjs package. Make sure you remove the async keyword.

import { Observable } from 'rxjs';

query(options: DataQueryRequest<MyQuery>): Observable<DataQueryResponse> {
  // ...
}

Create an Observable for each query, and then combine them all using the merge function from the rxjs package.
```
const observables = options.targets.map((target) => {
  });
});
return merge(...observables);
```
```
import { CircularDataFrame } from '@grafana/data';
```
Circular data frames have a limited capacity. When a circular data frame reaches its capacity, the oldest data point is removed.

Use subscriber.next() to send the updated data frame whenever you receive new updates.

import { LoadingState } from '@grafana/data';

const intervalId = setInterval(() => {
  subscriber.next({
    data: [frame],
    key: query.refId,
    state: LoadingState.Streaming,
  });
}, 500);
return () => {
};

Here’s the final query method.