feat(browser): Add support for queries with operation name

Signed-off-by: Kaung Zin Hein <[email protected]>

Author: Zen-cronic

packages/browser/src/integrations/graphqlClient.ts

@@ -24,8 +24,8 @@ interface GraphQLRequestPayload {
 }
 
 interface GraphQLOperation {
-  operationType: string | undefined;
-  operationName: string | undefined;
+  operationType?: string;
+  operationName?: string;
 }
 
 const INTEGRATION_NAME = 'GraphQLClient';
@@ -144,14 +144,22 @@ export function getRequestPayloadXhrOrFetch(hint: XhrHint | FetchHint): string |
  * Exported for tests only.
  */
 export function parseGraphQLQuery(query: string): GraphQLOperation {
-  const queryRe = /^(?:\s*)(query|mutation|subscription)(?:\s*)(\w+)(?:\s*)[{(]/;
+  const namedQueryRe = /^(?:\s*)(query|mutation|subscription)(?:\s*)(\w+)(?:\s*)[{(]/;
+  const unnamedQueryRe = /^(?:\s*)(query|mutation|subscription)(?:\s*)[{(]/;
 
-  const matched = query.match(queryRe);
+  const namedMatch = query.match(namedQueryRe);
+  if (namedMatch) {
+    return {
+      operationType: namedMatch[1],
+      operationName: namedMatch[2],
+    };
+  }
 
-  if (matched) {
+  const unnamedMatch = query.match(unnamedQueryRe);
+  if (unnamedMatch) {
     return {
-      operationType: matched[1],
-      operationName: matched[2],
+      operationType: unnamedMatch[1],
+      operationName: undefined,
     };
   }
   return {

packages/browser/test/integrations/graphqlClient.test.ts

@@ -32,12 +32,11 @@ describe('GraphqlClient', () => {
           }
       }`;
 
-    // TODO: support name-less queries
-    //   const queryFour = `   query   {
-    //     items {
-    //         id
-    //         }
-    //     }`;
+    const queryFour = `query  {
+      items {
+          id
+          }
+      }`;
 
     test.each([
       ['should handle query type', queryOne, { operationName: 'Test', operationType: 'query' }],
@@ -47,7 +46,7 @@ describe('GraphqlClient', () => {
         queryThree,
         { operationName: 'OnTestItemAdded', operationType: 'subscription' },
       ],
-      // TODO: ['should handle query without name', queryFour, { operationName: undefined, operationType: 'query' }],
+      ['should handle query without name', queryFour, { operationName: undefined, operationType: 'query' }],
     ])('%s', (_, input, output) => {
       expect(parseGraphQLQuery(input)).toEqual(output);
     });
@@ -64,6 +63,7 @@ describe('GraphqlClient', () => {
         query: 'query Test {\r\n  items {\r\n    id\r\n   }\r\n }',
         operationName: 'Test',
         variables: {},
+        extensions: {},
       };
 
       expect(getGraphQLRequestPayload(JSON.stringify(requestBody))).toEqual(requestBody);