@spotify-confidence/csr-recorder 0.17.11 → 0.17.13

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## [0.17.13](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.12...csr-recorder-v0.17.13) (2026-08-18)
+
+
+### ✨ New Features
+
+* **csr-recorder:** capture click modifier keys ([#435](https://github.com/spotify/confidence-sdk-js/issues/435)) ([a1e7a96](https://github.com/spotify/confidence-sdk-js/commit/a1e7a96996cd2f361f3b44cc924d6b4d5ff0b003))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.7
+
+## [0.17.12](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.11...csr-recorder-v0.17.12) (2026-08-18)
+
+
+### ✨ New Features
+
+* **csr-recorder:** capture GraphQL operation names ([#434](https://github.com/spotify/confidence-sdk-js/issues/434)) ([c4610ef](https://github.com/spotify/confidence-sdk-js/commit/c4610ef2945cecf632a3027b58ec373bc8b562e7))
+
+
+### Dependencies
+
+* The following workspace dependencies were updated
+  * dependencies
+    * @spotify-confidence/csr-common bumped to 0.18.6
+
 ## [0.17.11](https://github.com/spotify/confidence-sdk-js/compare/csr-recorder-v0.17.10...csr-recorder-v0.17.11) (2026-08-12)
 
 

package/dist/index.cjs

@@ -37,6 +37,33 @@ function defaultParameterizeRoute(route) {
 	}).join("/");
 }
 //#endregion
+//#region src/graphql-request.ts
+function operationNameFromDocument(document) {
+	return document.match(/\b(?:query|mutation|subscription)\s+([_A-Za-z][_0-9A-Za-z]*)/)?.[1];
+}
+function operationNameFromBody(body) {
+	if (typeof body !== "string") return void 0;
+	try {
+		const request = JSON.parse(body);
+		if (typeof request.operationName === "string" && request.operationName) return request.operationName;
+		return typeof request.query === "string" ? operationNameFromDocument(request.query) : void 0;
+	} catch (_error) {
+		return operationNameFromDocument(body);
+	}
+}
+function isGraphQLRequestUrl(url) {
+	try {
+		return new URL(url, globalThis.location?.href).pathname.endsWith("/graphql");
+	} catch (_error) {
+		return url.split(/[?#]/, 1)[0].endsWith("/graphql");
+	}
+}
+function extractGraphQLRequestMetadata(url, body) {
+	if (!isGraphQLRequestUrl(url)) return void 0;
+	const operationName = operationNameFromBody(body);
+	return operationName ? { operationName } : void 0;
+}
+//#endregion
 //#region src/recorder.ts
 var Recorder = class Recorder {
 	engine;
@@ -118,6 +145,7 @@ var Recorder = class Recorder {
 			else if (input instanceof URL) url = input.href;
 			else url = String(input);
 			const requestSize = init?.body ? new Blob([init.body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, init?.body);
 			const start = Date.now();
 			return originalFetch.call(globalThis, input, init).then((response) => {
 				const contentLength = response.headers.get("content-length");
@@ -128,7 +156,8 @@ var Recorder = class Recorder {
 					status: response.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 				return response;
 			}, (error) => {
@@ -138,7 +167,8 @@ var Recorder = class Recorder {
 					url,
 					status: 0,
 					durationMs: Date.now() - start,
-					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {}
+					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
+					...graphql ? { graphql } : {}
 				});
 				throw error;
 			});
@@ -165,6 +195,7 @@ var Recorder = class Recorder {
 			const method = meta.__csr_method ?? "GET";
 			const url = meta.__csr_url ?? "";
 			const requestSize = body !== null && body !== void 0 ? new Blob([body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, body);
 			const start = Date.now();
 			this.addEventListener("loadend", function csrLoadend() {
 				const contentLength = this.getResponseHeader("content-length");
@@ -175,7 +206,8 @@ var Recorder = class Recorder {
 					status: this.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 			});
 			return originalSend.call(this, body);
@@ -11083,6 +11115,49 @@ const ALL_CONSOLE_LEVELS = [
 	"info"
 ];
 /**
+* rrweb does not include modifier keys in mouse-interaction events. Capture
+* the native click first, then add its safe, non-text metadata to the rrweb
+* event emitted during the same browser event dispatch.
+*/
+function clickModifiersPlugin() {
+	let pendingClick = null;
+	return {
+		name: "csr/click-modifiers@1",
+		options: {},
+		observer: (_callback, win) => {
+			const onClick = (event) => {
+				const click = event;
+				pendingClick = {
+					button: click.button,
+					altKey: click.altKey,
+					ctrlKey: click.ctrlKey,
+					metaKey: click.metaKey,
+					shiftKey: click.shiftKey
+				};
+				queueMicrotask(() => {
+					pendingClick = null;
+				});
+			};
+			win.addEventListener("click", onClick, true);
+			return () => win.removeEventListener("click", onClick, true);
+		},
+		eventProcessor: (event) => {
+			if (pendingClick && event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.MouseInteraction && event.data.type === MouseInteractions.Click) {
+				const click = pendingClick;
+				pendingClick = null;
+				return {
+					...event,
+					data: {
+						...event.data,
+						...click
+					}
+				};
+			}
+			return event;
+		}
+	};
+}
+/**
 * rrweb adapter — bundles rrweb so consumers don't take a peer-dep on it.
 */
 var RrwebEngine = class {
@@ -11090,7 +11165,7 @@ var RrwebEngine = class {
 	start(config, onEvent) {
 		const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
 		const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
-		const plugins = [];
+		const plugins = [clickModifiersPlugin()];
 		const { captureConsoleLogs } = config;
 		if (captureConsoleLogs) {
 			const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;

package/dist/index.js

@@ -36,6 +36,33 @@ function defaultParameterizeRoute(route) {
 	}).join("/");
 }
 //#endregion
+//#region src/graphql-request.ts
+function operationNameFromDocument(document) {
+	return document.match(/\b(?:query|mutation|subscription)\s+([_A-Za-z][_0-9A-Za-z]*)/)?.[1];
+}
+function operationNameFromBody(body) {
+	if (typeof body !== "string") return void 0;
+	try {
+		const request = JSON.parse(body);
+		if (typeof request.operationName === "string" && request.operationName) return request.operationName;
+		return typeof request.query === "string" ? operationNameFromDocument(request.query) : void 0;
+	} catch (_error) {
+		return operationNameFromDocument(body);
+	}
+}
+function isGraphQLRequestUrl(url) {
+	try {
+		return new URL(url, globalThis.location?.href).pathname.endsWith("/graphql");
+	} catch (_error) {
+		return url.split(/[?#]/, 1)[0].endsWith("/graphql");
+	}
+}
+function extractGraphQLRequestMetadata(url, body) {
+	if (!isGraphQLRequestUrl(url)) return void 0;
+	const operationName = operationNameFromBody(body);
+	return operationName ? { operationName } : void 0;
+}
+//#endregion
 //#region src/recorder.ts
 var Recorder = class Recorder {
 	engine;
@@ -117,6 +144,7 @@ var Recorder = class Recorder {
 			else if (input instanceof URL) url = input.href;
 			else url = String(input);
 			const requestSize = init?.body ? new Blob([init.body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, init?.body);
 			const start = Date.now();
 			return originalFetch.call(globalThis, input, init).then((response) => {
 				const contentLength = response.headers.get("content-length");
@@ -127,7 +155,8 @@ var Recorder = class Recorder {
 					status: response.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 				return response;
 			}, (error) => {
@@ -137,7 +166,8 @@ var Recorder = class Recorder {
 					url,
 					status: 0,
 					durationMs: Date.now() - start,
-					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {}
+					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
+					...graphql ? { graphql } : {}
 				});
 				throw error;
 			});
@@ -164,6 +194,7 @@ var Recorder = class Recorder {
 			const method = meta.__csr_method ?? "GET";
 			const url = meta.__csr_url ?? "";
 			const requestSize = body !== null && body !== void 0 ? new Blob([body]).size : void 0;
+			const graphql = extractGraphQLRequestMetadata(url, body);
 			const start = Date.now();
 			this.addEventListener("loadend", function csrLoadend() {
 				const contentLength = this.getResponseHeader("content-length");
@@ -174,7 +205,8 @@ var Recorder = class Recorder {
 					status: this.status,
 					durationMs: Date.now() - start,
 					...requestSize !== null && requestSize !== void 0 ? { requestSize } : {},
-					...contentLength ? { responseSize: Number(contentLength) } : {}
+					...contentLength ? { responseSize: Number(contentLength) } : {},
+					...graphql ? { graphql } : {}
 				});
 			});
 			return originalSend.call(this, body);
@@ -11082,6 +11114,49 @@ const ALL_CONSOLE_LEVELS = [
 	"info"
 ];
 /**
+* rrweb does not include modifier keys in mouse-interaction events. Capture
+* the native click first, then add its safe, non-text metadata to the rrweb
+* event emitted during the same browser event dispatch.
+*/
+function clickModifiersPlugin() {
+	let pendingClick = null;
+	return {
+		name: "csr/click-modifiers@1",
+		options: {},
+		observer: (_callback, win) => {
+			const onClick = (event) => {
+				const click = event;
+				pendingClick = {
+					button: click.button,
+					altKey: click.altKey,
+					ctrlKey: click.ctrlKey,
+					metaKey: click.metaKey,
+					shiftKey: click.shiftKey
+				};
+				queueMicrotask(() => {
+					pendingClick = null;
+				});
+			};
+			win.addEventListener("click", onClick, true);
+			return () => win.removeEventListener("click", onClick, true);
+		},
+		eventProcessor: (event) => {
+			if (pendingClick && event.type === EventType.IncrementalSnapshot && event.data.source === IncrementalSource.MouseInteraction && event.data.type === MouseInteractions.Click) {
+				const click = pendingClick;
+				pendingClick = null;
+				return {
+					...event,
+					data: {
+						...event.data,
+						...click
+					}
+				};
+			}
+			return event;
+		}
+	};
+}
+/**
 * rrweb adapter — bundles rrweb so consumers don't take a peer-dep on it.
 */
 var RrwebEngine = class {
@@ -11089,7 +11164,7 @@ var RrwebEngine = class {
 	start(config, onEvent) {
 		const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
 		const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
-		const plugins = [];
+		const plugins = [clickModifiersPlugin()];
 		const { captureConsoleLogs } = config;
 		if (captureConsoleLogs) {
 			const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spotify-confidence/csr-recorder",
   "license": "Apache-2.0",
-  "version": "0.17.11",
+  "version": "0.17.13",
   "repository": {
     "type": "git",
     "url": "https://github.com/spotify/confidence-sdk-js.git",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@rrweb/rrweb-plugin-console-record": "^2.0.1",
-    "@spotify-confidence/csr-common": "0.18.5",
+    "@spotify-confidence/csr-common": "0.18.7",
     "rrweb": "^2.0.1"
   },
   "module": "./dist/index.js",

package/src/engine/rrweb-engine.test.ts

@@ -1,9 +1,12 @@
+// @vitest-environment happy-dom
+
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { RrwebEngine } from './rrweb-engine';
 
 const recordSpy = vi.fn().mockReturnValue(() => {});
 
-vi.mock('rrweb', () => ({
+vi.mock('rrweb', async importOriginal => ({
+  ...(await importOriginal<typeof import('rrweb')>()),
   record: (opts: unknown) => recordSpy(opts),
 }));
 
@@ -60,4 +63,66 @@ describe('RrwebEngine', () => {
     new RrwebEngine().start({}, () => {});
     expect(recordSpy.mock.calls[0][0].slimDOMOptions).toBe('all');
   });
+
+  it('adds native click modifier keys to the rrweb click event', () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === 'csr/click-modifiers@1',
+    );
+    const removeObserver = plugin.observer(() => {}, window);
+
+    document.dispatchEvent(
+      new MouseEvent('click', {
+        button: 0,
+        altKey: true,
+        ctrlKey: true,
+        metaKey: true,
+        shiftKey: true,
+      }),
+    );
+
+    expect(
+      plugin.eventProcessor({
+        type: 3,
+        timestamp: 1,
+        data: { source: 2, type: 2, id: 7, x: 10, y: 20 },
+      }),
+    ).toEqual({
+      type: 3,
+      timestamp: 1,
+      data: {
+        source: 2,
+        type: 2,
+        id: 7,
+        x: 10,
+        y: 20,
+        button: 0,
+        altKey: true,
+        ctrlKey: true,
+        metaKey: true,
+        shiftKey: true,
+      },
+    });
+
+    removeObserver();
+  });
+
+  it('does not add stale modifiers to a later click', async () => {
+    new RrwebEngine().start({}, () => {});
+    const plugin = recordSpy.mock.calls[0][0].plugins.find(
+      ({ name }: { name: string }) => name === 'csr/click-modifiers@1',
+    );
+    const removeObserver = plugin.observer(() => {}, window);
+    document.dispatchEvent(new MouseEvent('click', { metaKey: true }));
+    await Promise.resolve();
+
+    const event = {
+      type: 3,
+      timestamp: 1,
+      data: { source: 2, type: 2, id: 7 },
+    };
+    expect(plugin.eventProcessor(event)).toBe(event);
+
+    removeObserver();
+  });
 });

package/src/engine/rrweb-engine.ts

@@ -1,11 +1,63 @@
-import { RecordingEvent, type ConsoleLogLevel } from '@spotify-confidence/csr-common';
+import { type ConsoleLogLevel, type RecordingEvent } from '@spotify-confidence/csr-common';
 import { RecordingConfig, DEFAULT_MASK_SELECTORS, DEFAULT_BLOCK_SELECTORS } from '../types';
 import { RecordingEngine } from './index';
-import { record } from 'rrweb';
+import { EventType, IncrementalSource, MouseInteractions, record, type recordOptions } from 'rrweb';
 import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
 
 const ALL_CONSOLE_LEVELS: ConsoleLogLevel[] = ['log', 'warn', 'error', 'debug', 'info'];
 
+type RrwebPlugin = NonNullable<recordOptions<RecordingEvent>['plugins']>[number];
+
+type ClickModifiers = Pick<MouseEvent, 'button' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'>;
+
+/**
+ * rrweb does not include modifier keys in mouse-interaction events. Capture
+ * the native click first, then add its safe, non-text metadata to the rrweb
+ * event emitted during the same browser event dispatch.
+ */
+function clickModifiersPlugin(): RrwebPlugin {
+  let pendingClick: ClickModifiers | null = null;
+
+  return {
+    name: 'csr/click-modifiers@1',
+    options: {},
+    observer: (_callback, win) => {
+      const onClick = (event: Event) => {
+        const click = event as MouseEvent;
+        pendingClick = {
+          button: click.button,
+          altKey: click.altKey,
+          ctrlKey: click.ctrlKey,
+          metaKey: click.metaKey,
+          shiftKey: click.shiftKey,
+        };
+        queueMicrotask(() => {
+          pendingClick = null;
+        });
+      };
+
+      win.addEventListener('click', onClick, true);
+      return () => win.removeEventListener('click', onClick, true);
+    },
+    eventProcessor: event => {
+      if (
+        pendingClick &&
+        event.type === EventType.IncrementalSnapshot &&
+        event.data.source === IncrementalSource.MouseInteraction &&
+        event.data.type === MouseInteractions.Click
+      ) {
+        const click = pendingClick;
+        pendingClick = null;
+        return {
+          ...event,
+          data: { ...event.data, ...click },
+        };
+      }
+      return event;
+    },
+  };
+}
+
 /**
  * rrweb adapter — bundles rrweb so consumers don't take a peer-dep on it.
  */
@@ -16,7 +68,7 @@ export class RrwebEngine implements RecordingEngine {
     const maskSelectors = config.maskSelectors ?? DEFAULT_MASK_SELECTORS;
     const blockSelectors = config.blockSelectors ?? DEFAULT_BLOCK_SELECTORS;
 
-    const plugins = [];
+    const plugins: RrwebPlugin[] = [clickModifiersPlugin()];
     const { captureConsoleLogs } = config;
     if (captureConsoleLogs) {
       const levels = captureConsoleLogs === true ? ALL_CONSOLE_LEVELS : captureConsoleLogs.levels;

package/src/graphql-request.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { extractGraphQLRequestMetadata } from './graphql-request';
+
+describe('extractGraphQLRequestMetadata', () => {
+  it('uses the explicit operation name', () => {
+    const body = JSON.stringify({
+      operationName: 'UpdateProfile',
+      query: 'mutation UpdateProfile($input: ProfileInput!) { updateProfile(input: $input) { id } }',
+      variables: { input: { displayName: 'Private value' } },
+    });
+
+    expect(extractGraphQLRequestMetadata('/graphql', body)).toEqual({ operationName: 'UpdateProfile' });
+  });
+
+  it('gets the operation name from the document when it is not explicit', () => {
+    const body = JSON.stringify({ query: 'query Viewer { viewer { id email } }' });
+
+    expect(extractGraphQLRequestMetadata('/graphql', body)).toEqual({ operationName: 'Viewer' });
+  });
+
+  it('does not record anonymous query fields', () => {
+    expect(extractGraphQLRequestMetadata('/graphql', '{ viewer { id email } }')).toBeUndefined();
+  });
+
+  it('ignores requests to other paths', () => {
+    expect(extractGraphQLRequestMetadata('/api/query', 'query Viewer { viewer { id } }')).toBeUndefined();
+  });
+});

package/src/graphql-request.ts

@@ -0,0 +1,32 @@
+import type { GraphQLRequestMetadata } from '@spotify-confidence/csr-common';
+
+function operationNameFromDocument(document: string): string | undefined {
+  const match = document.match(/\b(?:query|mutation|subscription)\s+([_A-Za-z][_0-9A-Za-z]*)/);
+  return match?.[1];
+}
+
+function operationNameFromBody(body: unknown): string | undefined {
+  if (typeof body !== 'string') return undefined;
+  try {
+    const request = JSON.parse(body) as { operationName?: unknown; query?: unknown };
+    if (typeof request.operationName === 'string' && request.operationName) return request.operationName;
+    return typeof request.query === 'string' ? operationNameFromDocument(request.query) : undefined;
+  } catch (_error) {
+    return operationNameFromDocument(body);
+  }
+}
+
+function isGraphQLRequestUrl(url: string): boolean {
+  try {
+    return new URL(url, globalThis.location?.href).pathname.endsWith('/graphql');
+  } catch (_error) {
+    return url.split(/[?#]/, 1)[0].endsWith('/graphql');
+  }
+}
+
+export function extractGraphQLRequestMetadata(url: string, body: unknown): GraphQLRequestMetadata | undefined {
+  if (!isGraphQLRequestUrl(url)) return undefined;
+
+  const operationName = operationNameFromBody(body);
+  return operationName ? { operationName } : undefined;
+}

package/src/recorder.test.ts

@@ -204,4 +204,32 @@ describe('Recorder network request capture', () => {
 
     recorder.stop();
   });
+
+  it('captures only the GraphQL operation name', async () => {
+    globalThis.fetch = vi.fn().mockResolvedValue(new Response('{}', { status: 500 }));
+
+    const engine = new MockEngine();
+    const onEvent = vi.fn();
+    const recorder = new Recorder({ engine, onEvent });
+    recorder.start({ captureNetworkRequests: true });
+
+    await globalThis.fetch('https://api.example.com/graphql', {
+      method: 'POST',
+      body: JSON.stringify({
+        operationName: 'GetUser',
+        query: `query GetUser($id: ID!) {
+          viewer { id }
+          selectedUser: user(id: $id) { ...UserDetails }
+        }
+        fragment UserDetails on User { name email }`,
+        variables: { id: 'private-user-id' },
+      }),
+    });
+
+    const data = onEvent.mock.calls[0][0].data as NetworkRequestPluginData;
+    expect(data.payload.graphql).toEqual({ operationName: 'GetUser' });
+    expect(JSON.stringify(data.payload)).not.toContain('private-user-id');
+
+    recorder.stop();
+  });
 });

package/src/recorder.ts

@@ -9,6 +9,7 @@ import {
 import { RecorderOptions, RecorderState, RecordingConfig } from './types';
 import { RecordingEngine } from './engine';
 import { defaultParameterizeRoute } from './route-parameterizer';
+import { extractGraphQLRequestMetadata } from './graphql-request';
 
 export class Recorder {
   private readonly engine: RecordingEngine;
@@ -107,6 +108,7 @@ export class Recorder {
         url = String(input);
       }
       const requestSize = init?.body ? new Blob([init.body as BlobPart]).size : undefined;
+      const graphql = extractGraphQLRequestMetadata(url, init?.body);
       const start = Date.now();
 
       return originalFetch.call(globalThis, input, init).then(
@@ -120,6 +122,7 @@ export class Recorder {
             durationMs: Date.now() - start,
             ...(requestSize !== null && requestSize !== undefined ? { requestSize } : {}),
             ...(contentLength ? { responseSize: Number(contentLength) } : {}),
+            ...(graphql ? { graphql } : {}),
           });
           return response;
         },
@@ -131,6 +134,7 @@ export class Recorder {
             status: 0,
             durationMs: Date.now() - start,
             ...(requestSize !== null && requestSize !== undefined ? { requestSize } : {}),
+            ...(graphql ? { graphql } : {}),
           });
           throw error;
         },
@@ -165,6 +169,7 @@ export class Recorder {
       const method = (meta.__csr_method as string) ?? 'GET';
       const url = (meta.__csr_url as string) ?? '';
       const requestSize = body !== null && body !== undefined ? new Blob([body as BlobPart]).size : undefined;
+      const graphql = extractGraphQLRequestMetadata(url, body);
       const start = Date.now();
 
       this.addEventListener('loadend', function csrLoadend(this: XMLHttpRequest) {
@@ -177,6 +182,7 @@ export class Recorder {
           durationMs: Date.now() - start,
           ...(requestSize !== null && requestSize !== undefined ? { requestSize } : {}),
           ...(contentLength ? { responseSize: Number(contentLength) } : {}),
+          ...(graphql ? { graphql } : {}),
         });
       });