• plugin.json

  "routes": [
    {
      "path": "myRoutePath",
      "url": "{{ .JsonData.apiUrl }}"
    }
  ]

• datasource.ts

  constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
    super(instanceSettings);
    this.baseUrl = instanceSettings.jsonData.apiUrl!;
    console.log(this.baseUrl);
  }

• ConfigEditor.tsx

export function ConfigEditor(props: Props) {
  const { onOptionsChange, options } = props;
  const { jsonData } = options;

  const onApiUrlChange = (event: ChangeEvent<HTMLInputElement>) => {
    onOptionsChange({
      ...options,
      jsonData: {
        ...jsonData,
        // notice we set the apiUrl value inside jsonData
        apiUrl: event.target.value,
      },
    });
  };

  return (
      <InlineField label="apiUrl" labelWidth={12}>
        <Input
            onChange={onApiUrlChange}
            value={jsonData.apiUrl || ''}
            placeholder="json field returned to frontend"
            width={40}
        />
      </InlineField>
    );
}

Hi @liubq919 and thanks for taking the time to report this issue 🙌

In your datasource.ts file can you try to change from url: ${this.baseUrl}/todos to url: ${this.baseUrl}/myRoutePath/todos and see if that works for you?

async query(options: DataQueryRequest): Promise<DataQueryResponse> {
    const response = getBackendSrv().fetch<TODO[]>({
      // You can see above that `this.baseUrl` is set in the constructor
      // in this example we assume the configured url is
      // https://jsonplaceholder.typicode.com
      /// if you inspect `this.baseUrl` you'll see the Grafana data proxy url
      url: `${this.baseUrl}/myRoutePath/todos`, // <==== need to use the route defined in plugin.json here
    });
    // backendSrv fetch returns an observable object
    // we should unwrap with rxjs
    const responseData = await lastValueFrom(response);
    const todos = responseData.data;

    // we'll return the same todos for all queries in this example
    // in a real data source each target should fetch the data
    // as necessary.
    const data: PartialDataFrame[] = options.targets.map((target) => {
      return {
        refId: target.refId,
        fields: [
          { name: 'Id', type: FieldType.number, values: todos.map((todo) => todo.id) },
          { name: 'Title', type: FieldType.string, values: todos.map((todo) => todo.title) },
        ],
      };
    });

    return { data };
  }

Hi @liubq919 and thanks for taking the time to report this issue 🙌

In your datasource.ts file can you try to change from url: ${this.baseUrl}/todos to url: ${this.baseUrl}/myRoutePath/todos and see if that works for you?

async query(options: DataQueryRequest): Promise {
const response = getBackendSrv().fetch<TODO[]>({
// You can see above that this.baseUrl is set in the constructor
// in this example we assume the configured url is
// https://jsonplaceholder.typicode.com
/// if you inspect this.baseUrl you'll see the Grafana data proxy url
url: ${this.baseUrl}/myRoutePath/todos, // <==== need to use the route defined in plugin.json here
});
// backendSrv fetch returns an observable object
// we should unwrap with rxjs
const responseData = await lastValueFrom(response);
const todos = responseData.data;

// we'll return the same todos for all queries in this example
// in a real data source each target should fetch the data
// as necessary.
const data: PartialDataFrame[] = options.targets.map((target) => {
  return {
    refId: target.refId,
    fields: [
      { name: 'Id', type: FieldType.number, values: todos.map((todo) => todo.id) },
      { name: 'Title', type: FieldType.string, values: todos.map((todo) => todo.title) },
    ],
  };
});

return { data };

}

@ hugohaggmark, thanks hugohaggmark, retried but it still does not work, myRoutePath is part of the url that i need to request, still not proxy request.

the request i need to request:

http://127.0.0.1:8848/all-spans/d3e10152e97f3de52df81e25d93122e0

after adding myRoutePath, it becames

http://127.0.0.1:8848/myRoutePath/all-spans/d3e10152e97f3de52df81e25d93122e0

Thank for the update @liubq919

Are you able to share your code and your grafana.ini file?
I just created a new plugin using the supplied documentation and it just works. Are you sure you restarted the grafana server after changing the plugin.json?

If I use the Query Inspector on my dashboard it looks like this

network tab in the browser

@hugohaggmark thanks hugohaggmark, rebuild my data source plugin and restart grafana server, it works now, thanks for your help.

Great to hear that @liubq919 👍