vscode-apollo 1.19.3 → 2.0.0

package/src/language-server/document.ts

@@ -0,0 +1,277 @@
+import { parse, Source, DocumentNode } from "graphql";
+import { SourceLocation, getLocation } from "graphql/language/location";
+
+import {
+  TextDocument,
+  Position,
+  Diagnostic,
+  DiagnosticSeverity,
+} from "vscode-languageserver/node";
+
+import { getRange as rangeOfTokenAtLocation } from "graphql-language-service";
+
+import {
+  positionFromSourceLocation,
+  rangeInContainingDocument,
+} from "./utilities/source";
+
+export class GraphQLDocument {
+  ast?: DocumentNode;
+  syntaxErrors: Diagnostic[] = [];
+
+  constructor(public source: Source) {
+    try {
+      this.ast = parse(source);
+    } catch (error: any) {
+      // Don't add syntax errors when GraphQL has been commented out
+      if (maybeCommentedOut(source.body)) return;
+
+      // A GraphQL syntax error only has a location and no node, because we don't have an AST
+      // So we use the online parser to get the range of the token at that location
+      const range = rangeInContainingDocument(
+        source,
+        rangeOfTokenAtLocation(error.locations[0], source.body),
+      );
+      this.syntaxErrors.push({
+        severity: DiagnosticSeverity.Error,
+        message: error.message,
+        source: "GraphQL: Syntax",
+        range,
+      });
+    }
+  }
+
+  containsPosition(position: Position): boolean {
+    if (position.line < this.source.locationOffset.line - 1) return false;
+    const end = positionFromSourceLocation(
+      this.source,
+      getLocation(this.source, this.source.body.length),
+    );
+    return position.line <= end.line;
+  }
+}
+
+export function extractGraphQLDocuments(
+  document: TextDocument,
+  tagName: string = "gql",
+): GraphQLDocument[] | null {
+  switch (document.languageId) {
+    case "graphql":
+      return [
+        new GraphQLDocument(new Source(document.getText(), document.uri)),
+      ];
+    case "javascript":
+    case "javascriptreact":
+    case "typescript":
+    case "typescriptreact":
+    case "vue":
+    case "svelte":
+      return extractGraphQLDocumentsFromJSTemplateLiterals(document, tagName);
+    case "python":
+      return extractGraphQLDocumentsFromPythonStrings(document, tagName);
+    case "ruby":
+      return extractGraphQLDocumentsFromRubyStrings(document, tagName);
+    case "dart":
+      return extractGraphQLDocumentsFromDartStrings(document, tagName);
+    case "reason":
+      return extractGraphQLDocumentsFromReasonStrings(document, tagName);
+    case "elixir":
+      return extractGraphQLDocumentsFromElixirStrings(document, tagName);
+    default:
+      return null;
+  }
+}
+
+function extractGraphQLDocumentsFromJSTemplateLiterals(
+  document: TextDocument,
+  tagName: string,
+): GraphQLDocument[] | null {
+  const text = document.getText();
+
+  const documents: GraphQLDocument[] = [];
+
+  const regExp = new RegExp(
+    `(?:${tagName}(?:\\s|\\()*\`|\`#graphql)([\\s\\S]+?)\`\\)?`,
+    "gm",
+  );
+
+  let result;
+  while ((result = regExp.exec(text)) !== null) {
+    const contents = replacePlaceholdersWithWhiteSpace(result[1]);
+    const position = document.positionAt(result.index + (tagName.length + 1));
+    const locationOffset: SourceLocation = {
+      line: position.line + 1,
+      column: position.character + 1,
+    };
+    const source = new Source(contents, document.uri, locationOffset);
+    documents.push(new GraphQLDocument(source));
+  }
+
+  if (documents.length < 1) return null;
+
+  return documents;
+}
+
+function extractGraphQLDocumentsFromPythonStrings(
+  document: TextDocument,
+  tagName: string,
+): GraphQLDocument[] | null {
+  const text = document.getText();
+
+  const documents: GraphQLDocument[] = [];
+
+  const regExp = new RegExp(
+    `\\b(${tagName}\\s*\\(\\s*[bfru]*("(?:"")?|'(?:'')?))([\\s\\S]+?)\\2\\s*\\)`,
+    "gm",
+  );
+
+  let result;
+  while ((result = regExp.exec(text)) !== null) {
+    const contents = replacePlaceholdersWithWhiteSpace(result[3]);
+    const position = document.positionAt(result.index + result[1].length);
+    const locationOffset: SourceLocation = {
+      line: position.line + 1,
+      column: position.character + 1,
+    };
+    const source = new Source(contents, document.uri, locationOffset);
+    documents.push(new GraphQLDocument(source));
+  }
+
+  if (documents.length < 1) return null;
+
+  return documents;
+}
+
+function extractGraphQLDocumentsFromRubyStrings(
+  document: TextDocument,
+  tagName: string,
+): GraphQLDocument[] | null {
+  const text = document.getText();
+
+  const documents: GraphQLDocument[] = [];
+
+  const regExp = new RegExp(`(<<-${tagName})([\\s\\S]+?)${tagName}`, "gm");
+
+  let result;
+  while ((result = regExp.exec(text)) !== null) {
+    const contents = replacePlaceholdersWithWhiteSpace(result[2]);
+    const position = document.positionAt(result.index + result[1].length);
+    const locationOffset: SourceLocation = {
+      line: position.line + 1,
+      column: position.character + 1,
+    };
+    const source = new Source(contents, document.uri, locationOffset);
+    documents.push(new GraphQLDocument(source));
+  }
+
+  if (documents.length < 1) return null;
+
+  return documents;
+}
+
+function extractGraphQLDocumentsFromDartStrings(
+  document: TextDocument,
+  tagName: string,
+): GraphQLDocument[] | null {
+  const text = document.getText();
+
+  const documents: GraphQLDocument[] = [];
+
+  const regExp = new RegExp(
+    `\\b(${tagName}\\(\\s*r?("""|'''))([\\s\\S]+?)\\2\\s*\\)`,
+    "gm",
+  );
+
+  let result;
+  while ((result = regExp.exec(text)) !== null) {
+    const contents = replacePlaceholdersWithWhiteSpace(result[3]);
+    const position = document.positionAt(result.index + result[1].length);
+    const locationOffset: SourceLocation = {
+      line: position.line + 1,
+      column: position.character + 1,
+    };
+    const source = new Source(contents, document.uri, locationOffset);
+    documents.push(new GraphQLDocument(source));
+  }
+
+  if (documents.length < 1) return null;
+
+  return documents;
+}
+
+function extractGraphQLDocumentsFromReasonStrings(
+  document: TextDocument,
+  tagName: string,
+): GraphQLDocument[] | null {
+  const text = document.getText();
+
+  const documents: GraphQLDocument[] = [];
+
+  const reasonFileFilter = new RegExp(/(\[%(graphql|relay\.))/g);
+
+  if (!reasonFileFilter.test(text)) {
+    return documents;
+  }
+
+  const reasonRegexp = new RegExp(
+    /(?<=\[%(graphql|relay\.\w*)[\s\S]*{\|)[.\s\S]+?(?=\|})/gm,
+  );
+
+  let result;
+  while ((result = reasonRegexp.exec(text)) !== null) {
+    const contents = result[0];
+    const position = document.positionAt(result.index);
+    const locationOffset: SourceLocation = {
+      line: position.line + 1,
+      column: position.character + 1,
+    };
+    const source = new Source(contents, document.uri, locationOffset);
+    documents.push(new GraphQLDocument(source));
+  }
+
+  if (documents.length < 1) return null;
+
+  return documents;
+}
+
+function extractGraphQLDocumentsFromElixirStrings(
+  document: TextDocument,
+  tagName: string,
+): GraphQLDocument[] | null {
+  const text = document.getText();
+  const documents: GraphQLDocument[] = [];
+
+  const regExp = new RegExp(
+    `\\b(${tagName}\\(\\s*r?("""))([\\s\\S]+?)\\2\\s*\\)`,
+    "gm",
+  );
+
+  let result;
+  while ((result = regExp.exec(text)) !== null) {
+    const contents = replacePlaceholdersWithWhiteSpace(result[3]);
+    const position = document.positionAt(result.index + result[1].length);
+    const locationOffset: SourceLocation = {
+      line: position.line + 1,
+      column: position.character + 1,
+    };
+    const source = new Source(contents, document.uri, locationOffset);
+    documents.push(new GraphQLDocument(source));
+  }
+
+  if (documents.length < 1) return null;
+
+  return documents;
+}
+
+function replacePlaceholdersWithWhiteSpace(content: string) {
+  return content.replace(/\$\{([\s\S]+?)\}/gm, (match) => {
+    return Array(match.length).join(" ");
+  });
+}
+
+function maybeCommentedOut(content: string) {
+  return (
+    (content.indexOf("/*") > -1 && content.indexOf("*/") > -1) ||
+    content.split("//").length > 1
+  );
+}

package/src/language-server/engine/index.ts

@@ -0,0 +1,123 @@
+import { SCHEMA_TAGS_AND_FIELD_STATS } from "./operations/schemaTagsAndFieldStats";
+import { FRONTEND_URL_ROOT } from "./operations/frontendUrlRoot";
+import {
+  ApolloClient,
+  ApolloLink,
+  createHttpLink,
+  InMemoryCache,
+} from "@apollo/client/core";
+import { setContext } from "@apollo/client/link/context";
+import { onError } from "@apollo/client/link/error";
+
+export interface ClientIdentity {
+  name: string;
+  version: string;
+  referenceID: string;
+}
+
+export type ServiceID = string;
+export type ClientID = string;
+export type SchemaTag = string;
+export type ServiceIDAndTag = [ServiceID, SchemaTag?];
+export type ServiceSpecifier = string;
+// Map from parent type name to field name to latency in ms.
+export type FieldLatenciesMS = Map<string, Map<string, number | null>>;
+
+export function noServiceError(service: string | undefined, endpoint?: string) {
+  return `Could not find graph ${
+    service ? service : ""
+  } from Apollo at ${endpoint}. Please check your API key and graph ID`;
+}
+
+export class ApolloEngineClient {
+  public readonly client: ApolloClient<any>;
+  public readonly query: ApolloClient<any>["query"];
+
+  constructor(
+    private readonly engineKey: string,
+    baseURL: string,
+    private readonly clientIdentity: ClientIdentity,
+  ) {
+    const link = ApolloLink.from([
+      onError(({ graphQLErrors, networkError, operation }) => {
+        const { result, response } = operation.getContext();
+        if (graphQLErrors) {
+          graphQLErrors.map((graphqlError) =>
+            console.error(`[GraphQL error]: ${graphqlError.message}`),
+          );
+        }
+
+        if (networkError) {
+          console.log(`[Network Error]: ${networkError}`);
+        }
+
+        if (response && response.status >= 400) {
+          console.log(`[Network Error] ${response.bodyText}`);
+        }
+      }),
+      createHttpLink({
+        uri: baseURL,
+        headers: {
+          ["x-api-key"]: this.engineKey,
+          ["apollo-client-name"]: this.clientIdentity.name,
+          ["apollo-client-reference-id"]: this.clientIdentity.referenceID,
+          ["apollo-client-version"]: this.clientIdentity.version,
+        },
+      }),
+    ]);
+
+    this.client = new ApolloClient({
+      link,
+      cache: new InMemoryCache(),
+    });
+    this.query = this.client.query.bind(this.client);
+  }
+
+  async loadSchemaTagsAndFieldLatencies(serviceID: string) {
+    const { data, errors } = await this.client.query({
+      query: SCHEMA_TAGS_AND_FIELD_STATS,
+      variables: {
+        id: serviceID,
+      },
+      fetchPolicy: "no-cache",
+    });
+
+    if (!(data && data.service && data.service.schemaTags) || errors) {
+      throw new Error(
+        errors
+          ? errors.map((error) => error.message).join("\n")
+          : "No service returned. Make sure your service name and API key match",
+      );
+    }
+
+    const schemaTags: string[] = data.service.schemaTags.map(
+      ({ tag }: { tag: string }) => tag,
+    );
+
+    const fieldLatenciesMS: FieldLatenciesMS = new Map();
+
+    data.service.stats.fieldLatencies.forEach((fieldLatency) => {
+      const { parentType, fieldName } = fieldLatency.groupBy;
+
+      if (!parentType || !fieldName) {
+        return;
+      }
+      const fieldsMap =
+        fieldLatenciesMS.get(parentType) ||
+        fieldLatenciesMS.set(parentType, new Map()).get(parentType)!;
+
+      fieldsMap.set(fieldName, fieldLatency.metrics.fieldHistogram.durationMs);
+    });
+
+    return { schemaTags, fieldLatenciesMS };
+  }
+
+  async loadFrontendUrlRoot() {
+    const { data } = await this.client.query({
+      query: FRONTEND_URL_ROOT,
+      fetchPolicy: "cache-first",
+    });
+
+    return data?.frontendUrlRoot;
+  }
+}

package/src/language-server/engine/operations/frontendUrlRoot.ts

@@ -0,0 +1,15 @@
+import { TypedDocumentNode } from "@apollo/client/core";
+import gql from "graphql-tag";
+import type {
+  FrontendUrlRootQuery,
+  FrontendUrlRootQueryVariables,
+} from "src/language-server/graphqlTypes";
+
+export const FRONTEND_URL_ROOT: TypedDocumentNode<
+  FrontendUrlRootQuery,
+  FrontendUrlRootQueryVariables
+> = gql`
+  query FrontendUrlRoot {
+    frontendUrlRoot
+  }
+`;

package/src/language-server/engine/operations/schemaTagsAndFieldStats.ts

@@ -0,0 +1,32 @@
+import { TypedDocumentNode } from "@apollo/client/core";
+import gql from "graphql-tag";
+import type {
+  SchemaTagsAndFieldStatsQuery,
+  SchemaTagsAndFieldStatsQueryVariables,
+} from "src/language-server/graphqlTypes";
+
+export const SCHEMA_TAGS_AND_FIELD_STATS: TypedDocumentNode<
+  SchemaTagsAndFieldStatsQuery,
+  SchemaTagsAndFieldStatsQueryVariables
+> = gql`
+  query SchemaTagsAndFieldStats($id: ID!) {
+    service(id: $id) {
+      schemaTags {
+        tag
+      }
+      stats(from: "-86400", to: "-0") {
+        fieldLatencies {
+          groupBy {
+            parentType
+            fieldName
+          }
+          metrics {
+            fieldHistogram {
+              durationMs(percentile: 0.95)
+            }
+          }
+        }
+      }
+    }
+  }
+`;

package/src/language-server/errors/__tests__/NoMissingClientDirectives.test.ts

@@ -0,0 +1,225 @@
+import { NoMissingClientDirectives } from "../validation";
+import { GraphQLClientProject } from "../../project/client";
+import { basename } from "path";
+
+import { vol } from "memfs";
+import { LoadingHandler } from "../../loadingHandler";
+import { ClientConfig, parseApolloConfig } from "../../config";
+import { URI } from "vscode-uri";
+
+const serviceSchema = /* GraphQL */ `
+  type Query {
+    me: User
+  }
+
+  type User {
+    name: String
+    friends: [User]
+  }
+`;
+const clientSchema = /* GraphQL */ `
+  extend type Query {
+    isOnline: Boolean
+  }
+  extend type User {
+    isLiked: Boolean
+    localUser: User
+  }
+`;
+const a = /* GraphQL */ `
+  query a {
+    isOnline
+    me {
+      name
+      foo # added field missing in service schema to ensure it doesn't throw, see https://github.com/apollographql/vscode-graphql/pull/73
+      localUser @client {
+        friends {
+          isLiked
+        }
+      }
+      friends {
+        name
+        isLiked
+      }
+    }
+  }
+`;
+
+const b = /* GraphQL */ `
+  query b {
+    me {
+      ... {
+        isLiked
+      }
+      ... @client {
+        localUser {
+          name
+        }
+      }
+    }
+  }
+`;
+
+const c = /* GraphQL */ `
+  query c {
+    me {
+      ...isLiked
+    }
+  }
+  fragment localUser on User @client {
+    localUser {
+      name
+    }
+  }
+  fragment isLiked on User {
+    isLiked
+    ...localUser
+  }
+`;
+
+const d = /* GraphQL */ `
+  fragment isLiked on User {
+    isLiked
+  }
+  query d {
+    me {
+      ...isLiked
+      ...locaUser
+    }
+  }
+  fragment localUser on User @client {
+    localUser {
+      name
+    }
+  }
+`;
+
+const e = /* GraphQL */ `
+  fragment friends on User {
+    friends {
+      ...isLiked
+      ... on User @client {
+        localUser {
+          name
+        }
+      }
+    }
+  }
+  query e {
+    isOnline @client
+    me {
+      ...friends
+    }
+  }
+  fragment isLiked on User {
+    isLiked
+  }
+`;
+
+// TODO support inline fragment spreads
+const f = /* GraphQL */ `
+  query f {
+    me {
+      ...isLiked @client
+    }
+  }
+  fragment isLiked on User {
+    isLiked
+  }
+`;
+
+const rootURI = URI.file(process.cwd());
+
+const config = parseApolloConfig({
+  client: {
+    service: {
+      name: "server",
+      localSchemaFile: "./schema.graphql",
+    },
+    includes: ["./src/**.graphql"],
+    excludes: ["./__tests__"],
+    validationRules: [NoMissingClientDirectives],
+  },
+  engine: {},
+});
+
+class MockLoadingHandler implements LoadingHandler {
+  handle<T>(_message: string, value: Promise<T>): Promise<T> {
+    return value;
+  }
+  handleSync<T>(_message: string, value: () => T): T {
+    return value();
+  }
+  showError(_message: string): void {}
+}
+
+jest.mock("fs");
+
+describe("client state", () => {
+  beforeEach(() => {
+    vol.fromJSON({
+      "apollo.config.js": `module.exports = {
+            client: {
+                service: {
+                    localSchemaFile: './schema.graphql'
+                }
+            }
+        }`,
+      "schema.graphql": serviceSchema,
+      "src/client-schema.graphql": clientSchema,
+      "src/a.graphql": a,
+      "src/b.graphql": b,
+      "src/c.graphql": c,
+      "src/d.graphql": d,
+      "src/e.graphql": e,
+      // "src/f.graphql": f,
+    });
+  });
+  afterEach(jest.restoreAllMocks);
+
+  it("should report validation errors for missing @client directives", async () => {
+    const project = new GraphQLClientProject({
+      config: config as ClientConfig,
+      loadingHandler: new MockLoadingHandler(),
+      configFolderURI: rootURI,
+      clientIdentity: {
+        name: "",
+        version: "",
+        referenceID: "",
+      },
+    });
+
+    const errors = Object.create(null);
+    project.onDiagnostics(({ diagnostics, uri }) => {
+      const path = basename(URI.parse(uri).path);
+      diagnostics.forEach(({ error }: any) => {
+        if (!errors[path]) errors[path] = [];
+        errors[path].push(error);
+      });
+    });
+
+    await project.whenReady;
+    await project.validate();
+
+    expect(errors).toMatchInlineSnapshot(`
+      Object {
+        "a.graphql": Array [
+          [GraphQLError: @client directive is missing on local field "isOnline"],
+          [GraphQLError: @client directive is missing on local field "isLiked"],
+        ],
+        "b.graphql": Array [
+          [GraphQLError: @client directive is missing on fragment around local fields "isLiked"],
+        ],
+        "c.graphql": Array [
+          [GraphQLError: @client directive is missing on fragment "isLiked" around local fields "isLiked,localUser"],
+        ],
+        "d.graphql": Array [
+          [GraphQLError: @client directive is missing on fragment "isLiked" around local fields "isLiked"],
+        ],
+        "e.graphql": Array [
+          [GraphQLError: @client directive is missing on fragment "isLiked" around local fields "isLiked"],
+        ],
+      }
+    `);
+  });
+});