Variables are saved from GraphiQL editor

Author: retrodaredevil

src/components/QueryEditor.tsx

@@ -2,14 +2,14 @@ import React, {ChangeEvent, useEffect, useMemo} from 'react';
 import {InlineField, Input} from '@grafana/ui';
 import {QueryEditorProps} from '@grafana/data';
 import {DataSource} from '../datasource';
-import {WildGraphQLDataSourceOptions, WildGraphQLMainQuery} from '../types';
+import {getQueryVariablesAsJsonString, WildGraphQLDataSourceOptions, WildGraphQLMainQuery} from '../types';
 import {GraphiQLInterface} from 'graphiql';
 import {
   EditorContextProvider,
+  ExecutionContextProvider,
   ExplorerContextProvider,
   PluginContextProvider,
   SchemaContextProvider,
-  ExecutionContextProvider,
   useEditorContext
 } from '@graphiql/react';
 import {Fetcher} from '@graphiql/toolkit';
@@ -87,20 +87,24 @@ export function QueryEditor(props: Props) {
 
   const fetcher = useMemo(() => {
     return createFetcher(
-      datasource.options.url!,
-      datasource.options.withCredentials ?? false,
-      datasource.options.basicAuth
+      datasource.settings.url!,
+      datasource.settings.withCredentials ?? false,
+      datasource.settings.basicAuth
     );
-  }, [datasource.options.url, datasource.options.withCredentials, datasource.options.basicAuth]);
-
+  }, [datasource.settings.url, datasource.settings.withCredentials, datasource.settings.basicAuth]);
 
   return (
     <>
       {/*By not providing storage, history contexts, they won't be used*/}
       {/*<StorageContextProvider storage={DummyStorage}>*/}
       {/*  <HistoryContextProvider maxHistoryLength={0}>*/}
       <EditorContextProvider
-        defaultQuery={query.queryText}
+        // defaultQuery is the query that is used for new tabs, but we already define the open tabs here
+        defaultTabs={[{
+          query: query.queryText,
+          // NOTE: For some reason if you specify variable here, it just doesn't work...
+        }]}
+        variables={getQueryVariablesAsJsonString(query)}
         // we don't need to pass onEditOperationName here because we have a callback that handles it ourselves
       >
         <SchemaContextProvider fetcher={fetcher}>
@@ -162,7 +166,11 @@ function InnerQueryEditor({ query, onChange, onRunQuery, datasource }: Props) {
               onChange({...query, queryText: value});
             }}
             onEditVariables={(variablesJsonString) => {
-              // TODO
+              if (variablesJsonString) {
+                onChange({...query, variables: variablesJsonString});
+              } else {
+                onChange({...query, variables: undefined});
+              }
             }}
           />
         </div>

src/datasource.ts

@@ -1,17 +1,41 @@
-import {CoreApp, DataSourceInstanceSettings} from '@grafana/data';
-import {DataSourceWithBackend} from '@grafana/runtime';
+import {CoreApp, DataQueryRequest, DataQueryResponse, DataSourceInstanceSettings} from '@grafana/data';
+import {DataSourceWithBackend, getTemplateSrv} from '@grafana/runtime';
+import {Observable} from 'rxjs';
 
-import {DEFAULT_QUERY, WildGraphQLDataSourceOptions, WildGraphQLMainQuery} from './types';
+import {DEFAULT_QUERY, getQueryVariablesAsJson, WildGraphQLDataSourceOptions, WildGraphQLMainQuery} from './types';
 
 export class DataSource extends DataSourceWithBackend<WildGraphQLMainQuery, WildGraphQLDataSourceOptions> {
-  options: DataSourceInstanceSettings<WildGraphQLDataSourceOptions>;
+  settings: DataSourceInstanceSettings<WildGraphQLDataSourceOptions>;
 
   constructor(instanceSettings: DataSourceInstanceSettings<WildGraphQLDataSourceOptions>) {
     super(instanceSettings);
-    this.options = instanceSettings;
+    this.settings = instanceSettings;
   }
 
   getDefaultQuery(_: CoreApp): Partial<WildGraphQLMainQuery> {
     return DEFAULT_QUERY;
   }
+  query(request: DataQueryRequest<WildGraphQLMainQuery>): Observable<DataQueryResponse> {
+
+    // Everything you see going on here is to do variable substitution for the values of the provided variables.
+    const templateSrv = getTemplateSrv();
+    const newTargets: WildGraphQLMainQuery[] = request.targets.map((target) => {
+      const variables = getQueryVariablesAsJson(target);
+      const newVariables: any = { };
+      for (const variableName in variables) {
+        newVariables[variableName] = templateSrv.replace(variables[variableName]);
+      }
+      return {
+        ...target,
+        variables: newVariables,
+      }
+    })
+    const newRequest = {
+      ...request,
+      targets: newTargets
+    };
+
+    // we aren't really supposed to change this method, but we do it anyway :)
+    return super.query(newRequest);
+  }
 }

src/types.ts

@@ -1,10 +1,44 @@
 import { DataSourceJsonData } from '@grafana/data';
 import { DataQuery } from '@grafana/schema';
 
+type VariablesType = string | Record<string, any>;
+
+
 interface WildGraphQLCommonQuery extends DataQuery {
   queryText: string;
   /** The operation name if explicitly set. Note that an empty string should be treated the same way as an undefined value, although storing an undefined value is preferred.*/
   operationName?: string;
+  variables?: VariablesType;
+}
+
+export function getQueryVariablesAsJsonString(query: WildGraphQLCommonQuery): string {
+  const variables = query.variables;
+  if (variables === undefined) {
+    return "";
+  }
+  if (typeof variables === 'string') {
+    return variables;
+  }
+  return JSON.stringify(variables); // TODO consider if we want to prettify this JSON
+}
+export function getQueryVariablesAsJson(query: WildGraphQLCommonQuery): Record<string, any> {
+  const variables = query.variables;
+  if (variables === undefined) {
+    return {};
+  }
+  if (typeof variables === 'string') {
+    try {
+      return JSON.parse(variables);
+    } catch (e) {
+      if (e instanceof SyntaxError) {
+        return {}; // in the case of a syntax error, let's just make it so variables are not included
+        // TODO consider logging an error here or something
+      } else {
+        throw e; // unexpected exception
+      }
+    }
+  }
+  return variables;
 }
 
 /**