Override custom parameters for queries

Closes #8

Author: marcusolsson

src/DataSource.ts

@@ -26,7 +26,7 @@ export class DataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOpt
 
   async query(request: DataQueryRequest<JsonApiQuery>): Promise<DataQueryResponse> {
     const promises = request.targets.map(async query => {
-      const response = await this.api.cachedGet(query.cacheDurationSeconds);
+      const response = await this.api.cachedGet(query.cacheDurationSeconds, query.queryParams);
 
       const fields = query.fields
         .filter(field => field.jsonPath)
@@ -77,7 +77,7 @@ export class DataSource extends DataSourceApi<JsonApiQuery, JsonApiDataSourceOpt
       return [];
     }
 
-    const response = await this.api.get();
+    const response = await this.api.get(query.queryParams);
 
     return JSONPath({
       path: query.jsonPath,

src/QueryEditor.tsx

@@ -61,17 +61,32 @@ export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query }) =>
           <div className="gf-form-label gf-form-label--grow" />
         </div>
       </div>
+      <div className="gf-form">
+        <InlineFormLabel
+          width={12}
+          className="query-keyword"
+          tooltip="Add custom parameters to your queries. Any parameters you add here overrides the custom parameters that have been configured by the data source."
+        >
+          Custom query parameters
+        </InlineFormLabel>
+        <input
+          className="gf-form-input"
+          placeholder="page=1&limit=100"
+          value={query.queryParams}
+          onChange={e => onChange({ ...query, queryParams: e.currentTarget.value })}
+        ></input>
+      </div>
       {fields
         ? fields.map((field, index) => (
             <div key={index} className="gf-form">
               <InlineFormLabel
                 width={7}
                 className="query-keyword"
                 tooltip={
-                  <p>
+                  <div>
                     A <a href="https://goessner.net/articles/JsonPath/">JSON Path</a> query that selects one or more
                     values from a JSON object.
-                  </p>
+                  </div>
                 }
               >
                 Query

src/VariableQueryEditor.tsx

@@ -16,21 +16,39 @@ export const VariableQueryEditor: React.FC<VariableQueryProps> = ({ onChange, qu
   };
 
   const onChangePath = (jsonPath: string) => setState({ ...state, jsonPath });
+  const onQueryParams = (queryParams: string) => setState({ ...state, queryParams });
 
   return (
-    <div className="gf-form">
-      <InlineFormLabel
-        width={10}
-        tooltip={
-          <p>
-            A <a href="https://goessner.net/articles/JsonPath/">JSON Path</a> query that selects one or more values from
-            a JSON object.
-          </p>
-        }
-      >
-        Query
-      </InlineFormLabel>
-      <JsonPathQueryField onBlur={saveQuery} onChange={onChangePath} query={state.jsonPath} />
-    </div>
+    <>
+      <div className="gf-form">
+        <InlineFormLabel
+          width={12}
+          tooltip="Add custom parameters to your queries. Any parameters you add here overrides the custom parameters that have been configured by the data source."
+        >
+          Custom query parameters
+        </InlineFormLabel>
+        <input
+          className="gf-form-input"
+          placeholder="page=1&limit=100"
+          value={state.queryParams}
+          onChange={e => onQueryParams(e.currentTarget.value)}
+          onBlur={saveQuery}
+        ></input>
+      </div>
+      <div className="gf-form">
+        <InlineFormLabel
+          width={10}
+          tooltip={
+            <div>
+              A <a href="https://goessner.net/articles/JsonPath/">JSON Path</a> query that selects one or more values
+              from a JSON object.
+            </div>
+          }
+        >
+          Query
+        </InlineFormLabel>
+        <JsonPathQueryField onBlur={saveQuery} onChange={onChangePath} query={state.jsonPath} />
+      </div>
+    </>
   );
 };

src/api.ts

@@ -16,9 +16,14 @@ export default class Api {
   /**
    * Queries the API and returns the response data.
    */
-  async get() {
+  async get(params: string) {
+    const allParams = new URLSearchParams('?' + this.params);
+    new URLSearchParams('?' + params).forEach((value, key) => {
+      allParams.set(key, value);
+    });
+
     const req = {
-      url: `${this.baseUrl}${this.params.length ? `?${this.params}` : ''}`,
+      url: `${this.baseUrl}${allParams.toString().length ? `?${allParams.toString()}` : ''}`,
       method: 'GET',
     };
 
@@ -41,9 +46,9 @@ export default class Api {
   /**
    * Returns a cached API response if it exists, otherwise queries the API.
    */
-  async cachedGet(cacheDurationSeconds: number, params?: string) {
+  async cachedGet(cacheDurationSeconds: number, params: string) {
     if (cacheDurationSeconds === 0) {
-      return await this.get();
+      return await this.get(params);
     }
 
     const force = this.lastCacheDuration !== cacheDurationSeconds;
@@ -58,7 +63,7 @@ export default class Api {
     }
     this.lastCacheDuration = cacheDurationSeconds;
 
-    const result = await this.get();
+    const result = await this.get(params);
 
     this.cache.put(this.baseUrl, result, Math.max(cacheDurationSeconds * 1000, 1));
 

src/types.ts

@@ -8,15 +8,18 @@ interface JsonField {
 export interface JsonApiQuery extends DataQuery {
   fields: JsonField[];
   cacheDurationSeconds: number;
+  queryParams: string;
 }
 
 export interface JsonApiVariableQuery extends DataQuery {
   jsonPath: string;
+  queryParams: string;
 }
 
 export const defaultQuery: Partial<JsonApiQuery> = {
   fields: [{ name: '', jsonPath: '' }],
   cacheDurationSeconds: 300,
+  queryParams: '',
 };
 
 export interface JsonApiDataSourceOptions extends DataSourceJsonData {