diff --git a/packages/graphiql-react/src/editor/__tests__/tabs.spec.ts b/packages/graphiql-react/src/editor/__tests__/tabs.spec.ts index a5fc7c3d452..08d2be34e68 100644 --- a/packages/graphiql-react/src/editor/__tests__/tabs.spec.ts +++ b/packages/graphiql-react/src/editor/__tests__/tabs.spec.ts @@ -78,10 +78,27 @@ describe('fuzzyExtractionOperationTitle', () => { it('should return null for anonymous queries', () => { expect(fuzzyExtractOperationName('{}')).toBeNull(); }); - it('should not extract query names with comments', () => { - expect( - fuzzyExtractOperationName('# query My_3ExampleQuery() {}'), - ).toBeNull(); + + describe('comment line handling', () => { + it('should not extract query names within commented out lines', () => { + expect( + fuzzyExtractOperationName('# query My_3ExampleQuery() {}'), + ).toBeNull(); + }); + it('should extract query names when there is a single leading comment line', () => { + expect( + fuzzyExtractOperationName( + '# comment line 1 \n query MyExampleQueryWithSingleCommentLine() {}', + ), + ).toEqual('MyExampleQueryWithSingleCommentLine'); + }); + it('should extract query names when there are more than one leading comment lines', () => { + expect( + fuzzyExtractOperationName( + '# comment line 1 \n # comment line 2 \n query MyExampleQueryWithMultipleCommentLines() {}', + ), + ).toEqual('MyExampleQueryWithMultipleCommentLines'); + }); }); }); diff --git a/packages/graphiql-react/src/editor/tabs.ts b/packages/graphiql-react/src/editor/tabs.ts index 6a2fce75ef1..090df7660e0 100644 --- a/packages/graphiql-react/src/editor/tabs.ts +++ b/packages/graphiql-react/src/editor/tabs.ts @@ -337,7 +337,8 @@ function hashFromTabContents(args: { } export function fuzzyExtractOperationName(str: string): string | null { - const regex = /^(?!.*#).*(query|subscription|mutation)\s+([a-zA-Z0-9_]+)/; + const regex = /^(?!#).*(query|subscription|mutation)\s+([a-zA-Z0-9_]+)/m; + const match = regex.exec(str); return match?.[2] ?? null;