fix "Unknown fragment" validation error (#3861)

* fix unknown fragment error
* use MessageProcessor._parser
* add changeset
* fix: fs import for mock-fs

`mock-fs` uses `process.binding('fs')`, so it cannot support mocking the `node:fs` import alias it seems. this should fix test failures in CI (for node 22 at least)

---------

Co-authored-by: Rikki Schulte <[email protected]>

Author: motemen

.changeset/warm-sheep-brake.md

@@ -0,0 +1,5 @@
+---
+'graphql-language-service-server': patch
+---
+
+fix parsing non-graphql documents

packages/graphql-language-service-server/src/MessageProcessor.ts

@@ -6,8 +6,8 @@
  *  LICENSE file in the root directory of this source tree.
  *
  */
-
-import { existsSync, mkdirSync } from 'node:fs';
+// do not change to node:fs import, or it will break mock-fs
+import { existsSync, mkdirSync } from 'fs';
 import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import * as path from 'node:path';
 import { URI } from 'vscode-uri';
@@ -1223,25 +1223,29 @@ export class MessageProcessor {
   private async _cacheDocumentFilesforProject(project: GraphQLProjectConfig) {
     try {
       const documents = await project.getDocuments();
-      return Promise.all(
-        documents.map(async document => {
-          if (!document.location || !document.rawSDL) {
-            return;
-          }
+      const documentLocations = new Set(
+        documents
+          .filter(doc => doc.location && doc.rawSDL)
+          .map(doc => doc.location!),
+      );
 
-          let filePath = document.location;
+      return Promise.all(
+        Array.from(documentLocations).map(async loc => {
+          let filePath = loc;
           if (!path.isAbsolute(filePath)) {
-            filePath = path.join(project.dirpath, document.location);
+            filePath = path.join(project.dirpath, loc);
           }
 
           // build full system URI path with protocol
           const uri = URI.file(filePath).toString();
 
+          const fileContent = await readFile(filePath, 'utf-8');
           // I would use the already existing graphql-config AST, but there are a few reasons we can't yet
-          const contents = await this._parser(document.rawSDL, uri);
+          const contents = await this._parser(fileContent, uri);
           if (!contents[0]?.query) {
             return;
           }
+
           await this._updateObjectTypeDefinition(uri, contents);
           await this._updateFragmentDefinition(uri, contents);
           await this._invalidateCache({ version: 1, uri }, uri, contents);

packages/graphql-language-service-server/src/__tests__/MessageProcessor.spec.ts

@@ -218,8 +218,8 @@ describe('MessageProcessor with config', () => {
         character: 0,
       },
       end: {
-        line: 2,
-        character: 1,
+        line: 0,
+        character: 25,
       },
     });
 
@@ -542,6 +542,9 @@ describe('MessageProcessor with config', () => {
 
     expect(project.lsp._logger.error).not.toHaveBeenCalled();
     expect(await project.lsp._graphQLCache.getSchema('a')).toBeDefined();
+    expect(project.lsp._logger.info).not.toHaveBeenCalledWith(
+      expect.stringMatching(/SyntaxError: Unexpected token/),
+    );
 
     fetchMock.restore();
     mockSchema(
@@ -636,4 +639,65 @@ describe('MessageProcessor with config', () => {
     expect(project.lsp._logger.error).not.toHaveBeenCalled();
     project.lsp.handleShutdownRequest();
   });
+
+  it('correctly handles a fragment inside a TypeScript file', async () => {
+    const project = new MockProject({
+      files: [
+        [
+          'schema.graphql',
+          `
+type Item {
+  foo: String
+  bar: Int
+}
+
+type Query {
+  items: [Item]
+}
+          `,
+        ],
+        [
+          'query.ts',
+          `
+import gql from 'graphql-tag'
+
+const query = gql\`
+  query {
+    items {
+      ...ItemFragment
+    }
+  }
+\`
+          `,
+        ],
+        [
+          'fragments.ts',
+          `
+import gql from 'graphql-tag'
+
+export const ItemFragment = gql\`
+  fragment ItemFragment on Item {
+    foo
+    bar
+  }
+\`
+          `,
+        ],
+        [
+          'graphql.config.json',
+          '{ "schema": "./schema.graphql", "documents": "./**.{graphql,ts}" }',
+        ],
+      ],
+    });
+
+    const initParams = await project.init('query.ts');
+    expect(initParams.diagnostics).toEqual([]);
+
+    const fragmentDefinition = await project.lsp.handleDefinitionRequest({
+      textDocument: { uri: project.uri('query.ts') },
+      position: { character: 10, line: 6 },
+    });
+
+    expect(fragmentDefinition[0]?.uri).toEqual(project.uri('fragments.ts'));
+  });
 });