Add client schema support to vscode extension

CHANGELOG.md

@@ -21,9 +21,11 @@
 - `apollo-language-server`
   - Add debugging util classes for better error/warning handling [#1429](https://github.com/apollographql/apollo-tooling/pull/1429)
   - Add error for duplicate client operation names [#1466](https://github.com/apollographql/apollo-tooling/pull/1466)
+  - Add client schema support through autocomplete, hover information, validation rules, and code actions. [#1433](https://github.com/apollographql/apollo-tooling/pull/1433)
 - `apollo-tools`
   - <First `apollo-tools` related entry goes here>
 - `vscode-apollo`
+  - Improve the syntax highlighting of directives and their definitions. [#1433](https://github.com/apollographql/apollo-tooling/pull/1433)
   - Add debugging util class for better logging in vs code [#1429](https://github.com/apollographql/apollo-tooling/pull/1429)
 
 ## `apollo-language-server@1.14.3`

packages/apollo-language-server/src/diagnostics.ts

@@ -62,7 +62,7 @@ export function diagnosticsFromError(
   error: GraphQLError,
   severity: DiagnosticSeverity,
   type: string
-): Diagnostic[] {
+): GraphQLDiagnostic[] {
   if (!error.nodes) {
     return [];
   }
@@ -72,11 +72,25 @@ export function diagnosticsFromError(
       source: `GraphQL: ${type}`,
       message: error.message,
       severity,
-      range: rangeForASTNode(highlightNodeForNode(node) || node)
+      range: rangeForASTNode(highlightNodeForNode(node) || node),
+      error
     };
   });
 }
 
+export interface GraphQLDiagnostic extends Diagnostic {
+  /**
+   * The GraphQLError that produced this Diagnostic
+   */
+  error: GraphQLError;
+}
+
+export namespace GraphQLDiagnostic {
+  export function is(diagnostic: Diagnostic): diagnostic is GraphQLDiagnostic {
+    return "error" in diagnostic;
+  }
+}
+
 export class DiagnosticSet {
   private diagnosticsByFile = new Map<DocumentUri, Diagnostic[]>();
 

packages/apollo-language-server/src/errors/validation.ts

@@ -1,7 +1,6 @@
 import {
   specifiedRules,
   NoUnusedFragmentsRule,
-  KnownDirectivesRule,
   GraphQLError,
   FieldNode,
   ValidationContext,
@@ -12,17 +11,30 @@ import {
   FragmentDefinitionNode,
   visit,
   visitWithTypeInfo,
-  visitInParallel
+  visitInParallel,
+  getLocation
 } from "graphql";
 
+import { TextEdit } from "vscode-languageserver";
+
 import { ToolError, logError } from "./logger";
 import { ValidationRule } from "graphql/validation/ValidationContext";
+import {
+  positionFromSourceLocation,
+  isFieldResolvedLocally
+} from "../utilities/source";
+
+export interface CodeActionInfo {
+  message: string;
+  edits: TextEdit[];
+}
 
-const specifiedRulesToBeRemoved = [NoUnusedFragmentsRule, KnownDirectivesRule];
+const specifiedRulesToBeRemoved = [NoUnusedFragmentsRule];
 
 export const defaultValidationRules: ValidationRule[] = [
   NoAnonymousQueries,
   NoTypenameAlias,
+  NoMissingClientDirectives,
   ...specifiedRules.filter(rule => !specifiedRulesToBeRemoved.includes(rule))
 ];
 
@@ -93,3 +105,66 @@ export function NoTypenameAlias(context: ValidationContext) {
     }
   };
 }
+
+export function NoMissingClientDirectives(context: ValidationContext) {
+  const root = context.getDocument();
+  return {
+    Field(node: FieldNode) {
+      const parentType = context.getParentType();
+      const fieldDef = context.getFieldDef();
+
+      if (!parentType || !fieldDef) return;
+
+      const isClientType =
+        parentType.clientSchema &&
+        parentType.clientSchema.localFields &&
+        parentType.clientSchema.localFields.includes(fieldDef.name);
+
+      const isResolvedLocally = isFieldResolvedLocally(node, root);
+
+      if (isClientType && !isResolvedLocally) {
+        let extensions: { [key: string]: any } | null = null;
+        const nameLoc = node.name.loc;
+        if (nameLoc) {
+          let { source, end: locToInsertDirective } = nameLoc;
+          if (node.arguments && node.arguments.length !== 0) {
+            // must insert directive after field arguments
+            const endOfArgs = source.body.indexOf(")", locToInsertDirective);
+            locToInsertDirective = endOfArgs + 1;
+          }
+          const codeAction: CodeActionInfo = {
+            message: `Add @client directive to "${node.name.value}"`,
+            edits: [
+              TextEdit.insert(
+                positionFromSourceLocation(
+                  source,
+                  getLocation(source, locToInsertDirective)
+                ),
+                " @client"
+              )
+            ]
+          };
+          extensions = { codeAction };
+        }
+
+        context.reportError(
+          new GraphQLError(
+            `Local field "${node.name.value}" must have a @client directive`,
+            [node],
+            null,
+            null,
+            null,
+            null,
+            extensions
+          )
+        );
+      }
+
+      if (isClientType) {
+        return false;
+      }
+
+      return;
+    }
+  };
+}