Is this possible to build a backend plugin that send front and back HTTP requests?

Hi @maximedousselaere. There are generally two ways you can do about this.

If your plugin defines your endpoint in settings.url[1] then you can directly call instanceSettings.url in the same fashion you are showing me in your code.

The second way you can do this is via routes:

in your plugin.json you can define a route as this:

  "routes": [
    {
      "path": "api",
      "url": "{{ .JsonData.elasticUrl }}"
    }
  ],

this will require that JsonData.elasticUrl to be populated with the correct url via your ConfigEditor.

then in your datasource code you can query this like this:

...
    const endpoint = "/someElasticEndpoint"
    const response = getBackendSrv().fetch({
      // baseUrl is instanceSettings.url
      // notice how I am using `api` which is the path 
      // I defined in routes.
      url: `${this.baseUrl}/api/${endpoint}`, 
    });
    const responseData = await lastValueFrom(response);
    console.log(responseData); // just for example
...

[1] what is settings.url? settings is the place where all the plugin settings live. jsonData is an object inside those settings. somewhere in your plugin config editor you do something like this:

    onOptionsChange({ ...options, jsonData:{
      ...options.jsonData,
      myField: event.target.value
    } });

that is modifying settings. you can set settings.url like this in your Configuration component:

    onOptionsChange({ ...options, 
      url: newUrlValueMaybeFromInput
    });

To ease this work and avoid confusions you can use the DataSourceHttpSettings to set this field easily for you with a lot of different options regarding the http request your user can setup.

It is important you don’t confuse settings.url with for example, settings.jsonData.url. the later is a custom field just as any other you can create inside jsonData.

1 Like