improvement: completion for defined variables (#1627)

- completion support for defined variables
- monaco adjustment for variable completion insertText

Author: acao

packages/graphql-language-service-interface/src/autocompleteUtils.ts

@@ -115,19 +115,17 @@ function filterAndSortList<T extends CompletionItemBase>(
     entry,
   }));
 
-  const conciseMatches = filterNonEmpty(
+  return filterNonEmpty(
     filterNonEmpty(byProximity, pair => pair.proximity <= 2),
     pair => !pair.entry.isDeprecated,
-  );
-
-  const sortedMatches = conciseMatches.sort(
-    (a, b) =>
-      (a.entry.isDeprecated ? 1 : 0) - (b.entry.isDeprecated ? 1 : 0) ||
-      a.proximity - b.proximity ||
-      a.entry.label.length - b.entry.label.length,
-  );
-
-  return sortedMatches.map(pair => pair.entry);
+  )
+    .sort(
+      (a, b) =>
+        (a.entry.isDeprecated ? 1 : 0) - (b.entry.isDeprecated ? 1 : 0) ||
+        a.proximity - b.proximity ||
+        a.entry.label.length - b.entry.label.length,
+    )
+    .map(pair => pair.entry);
 }
 
 // Filters the array by the predicate, unless it results in an empty array,

packages/graphql-language-service-interface/src/getAutocompleteSuggestions.ts

@@ -17,6 +17,10 @@ import {
   GraphQLEnumValue,
   GraphQLField,
   GraphQLFieldMap,
+  parse,
+  visit,
+  VariableDefinitionNode,
+  GraphQLNamedType,
 } from 'graphql';
 
 import {
@@ -57,7 +61,6 @@ import {
   hintList,
   objectValues,
 } from './autocompleteUtils';
-
 /**
  * Given GraphQLSchema, queryText, and context of the current position within
  * the source text, provide a list of typeahead entries.
@@ -150,7 +153,38 @@ export function getAutocompleteSuggestions(
     (kind === RuleKinds.OBJECT_FIELD && step === 2) ||
     (kind === RuleKinds.ARGUMENT && step === 2)
   ) {
-    return getSuggestionsForInputValues(token, typeInfo, kind);
+    return getSuggestionsForInputValues(token, typeInfo, kind as string);
+  }
+
+  // complete for all variables available in the query
+  if (kind === RuleKinds.VARIABLE && step === 1) {
+    const queryVariables: VariableDefinitionNode[] = [];
+    visit(
+      parse(queryText, {
+        allowLegacySDLEmptyFields: true,
+        allowLegacySDLImplementsInterfaces: true,
+      }),
+      {
+        VariableDefinition(node) {
+          queryVariables.push(node);
+        },
+      },
+    );
+
+    return hintList(
+      token,
+      queryVariables.map(
+        variableDef =>
+          ({
+            label: `$${variableDef.variable.name.value}`,
+            kind: CompletionItemKind.Variable,
+            detail:
+              'name' in variableDef.type
+                ? variableDef.type.name.value
+                : 'Variable',
+          } as CompletionItem),
+      ),
+    );
   }
 
   // Fragment type conditions
@@ -417,9 +451,9 @@ function getSuggestionsForVariableDefinition(
   return hintList(
     token,
     // TODO: couldn't get Exclude<> working here
-    inputTypes.map((type: any) => ({
+    inputTypes.map((type: GraphQLNamedType) => ({
       label: type.name,
-      documentation: type.description,
+      documentation: type.description as string,
       kind: CompletionItemKind.Variable,
     })),
   );

packages/monaco-graphql/src/utils.ts

@@ -38,7 +38,11 @@ export function toCompletion(
 ): GraphQLCompletionItem & { range: monaco.IRange } {
   return {
     label: entry.label,
-    insertText: entry.insertText || (entry.label as string),
+    // TODO: when adding variables to getAutocompleteSuggestions, we appended the $.
+    // this appears to cause an issue in monaco, but not vscode
+    insertText:
+      entry.insertText ||
+      (!entry.label.startsWith('$') ? entry.label : entry.label.substring(1)),
     sortText: entry.sortText,
     filterText: entry.filterText,
     documentation: entry.documentation,