Fix highlighting for GraphQL errors with multiple nodes (#2913)

graphql · Jan 22, 2023 · effc406 · effc406
1 parent bdc966c
commit effc406
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/packages/graphql-language-service/src/interface/__tests__/getDiagnostics-test.ts b/packages/graphql-language-service/src/interface/__tests__/getDiagnostics-test.ts
@@ -46,6 +46,39 @@ describe('getDiagnostics', () => {
     expect(error.source).toEqual('GraphQL: Validation');
   });
 
+  it('catches with multiple highlighted nodes', () => {
+    const errors = validateQuery(
+      parse('{ hero(episode: $ep) { name } }'),
+      schema,
+    );
+    expect(errors).toMatchObject([
+      {
+        range: {
+          end: {
+            character: 20,
+            line: 0,
+          },
+          start: {
+            character: 16,
+            line: 0,
+          },
+        },
+      },
+      {
+        range: {
+          end: {
+            character: 32,
+            line: 0,
+          },
+          start: {
+            character: 0,
+            line: 0,
+          },
+        },
+      },
+    ]);
+  });
+
   it('catches multi root validation errors without breaking (with a custom validation function that always throws errors)', () => {
     const error = validateQuery(parse('{ hero { name } } { seq }'), schema, [
       validationContext => {

diff --git a/packages/graphql-language-service/src/interface/getDiagnostics.ts b/packages/graphql-language-service/src/interface/getDiagnostics.ts
@@ -139,7 +139,7 @@ function annotations(
     return [];
   }
   const highlightedNodes: Diagnostic[] = [];
-  error.nodes.forEach(node => {
+  error.nodes.forEach((node, i) => {
     const highlightNode =
       node.kind !== 'Variable' && 'name' in node && node.name !== undefined
         ? node.name
@@ -154,7 +154,7 @@ function annotations(
 
       // @ts-ignore
       // https://github.com/microsoft/TypeScript/pull/32695
-      const loc = error.locations[0];
+      const loc = error.locations[i];
       const highlightLoc = getLocation(highlightNode);
       const end = loc.column + (highlightLoc.end - highlightLoc.start);
       highlightedNodes.push({