diff --git a/app/assets/javascripts/lib/graphql.js b/app/assets/javascripts/lib/graphql.js
index 4ad979be6e6..cfcce234bfb 100644
--- a/app/assets/javascripts/lib/graphql.js
+++ b/app/assets/javascripts/lib/graphql.js
@@ -166,6 +166,7 @@ export default (resolvers = {}, config = {}) => {
         PerformanceBarService.interceptor({
           config: {
             url: httpResponse.url,
+            operationName: operation.operationName,
           },
           headers: {
             'x-request-id': httpResponse.headers.get('x-request-id'),
diff --git a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
index cce0976f66f..1da4a8fea73 100644
--- a/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
+++ b/app/assets/javascripts/performance_bar/components/performance_bar_app.vue
@@ -121,7 +121,7 @@ export default {
       return window.URL.createObjectURL(blob);
     },
     downloadName() {
-      const fileName = this.requests[0].truncatedUrl;
+      const fileName = this.requests[0].displayName;
       return `${fileName}_perf_bar_${Date.now()}.json`;
     },
     memoryReportPath() {
diff --git a/app/assets/javascripts/performance_bar/components/request_selector.vue b/app/assets/javascripts/performance_bar/components/request_selector.vue
index ffc22c2113d..f2177e102ec 100644
--- a/app/assets/javascripts/performance_bar/components/request_selector.vue
+++ b/app/assets/javascripts/performance_bar/components/request_selector.vue
@@ -31,7 +31,7 @@ export default {
         :value="request.id"
         data-qa-selector="request_dropdown_option"
       >
-        {{ request.truncatedUrl }}
+        {{ request.displayName }}
       </option>
     </select>
   </div>
diff --git a/app/assets/javascripts/performance_bar/index.js b/app/assets/javascripts/performance_bar/index.js
index e7f84eacdca..84fe14fe056 100644
--- a/app/assets/javascripts/performance_bar/index.js
+++ b/app/assets/javascripts/performance_bar/index.js
@@ -56,12 +56,12 @@ const initPerformanceBar = (el) => {
           this.addRequest(urlOrRequestId, urlOrRequestId);
         }
       },
-      addRequest(requestId, requestUrl) {
+      addRequest(requestId, requestUrl, operationName) {
         if (!this.store.canTrackRequest(requestUrl)) {
           return;
         }
 
-        this.store.addRequest(requestId, requestUrl);
+        this.store.addRequest(requestId, requestUrl, operationName);
       },
       loadRequestDetails(requestId) {
         const request = this.store.findRequest(requestId);
diff --git a/app/assets/javascripts/performance_bar/services/performance_bar_service.js b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
index 4c0293f5b78..e67143f3ede 100644
--- a/app/assets/javascripts/performance_bar/services/performance_bar_service.js
+++ b/app/assets/javascripts/performance_bar/services/performance_bar_service.js
@@ -10,13 +10,15 @@ export default class PerformanceBarService {
 
   static registerInterceptor(peekUrl, callback) {
     PerformanceBarService.interceptor = (response) => {
-      const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
-        response,
-        peekUrl,
-      );
+      const [
+        fireCallback,
+        requestId,
+        requestUrl,
+        operationName,
+      ] = PerformanceBarService.callbackParams(response, peekUrl);
 
       if (fireCallback) {
-        callback(requestId, requestUrl);
+        callback(requestId, requestUrl, operationName);
       }
 
       return response;
@@ -36,7 +38,8 @@ export default class PerformanceBarService {
     const cachedResponse =
       response.headers && parseBoolean(response.headers['x-gitlab-from-cache']);
     const fireCallback = requestUrl !== peekUrl && Boolean(requestId) && !cachedResponse;
+    const operationName = response.config?.operationName;
 
-    return [fireCallback, requestId, requestUrl];
+    return [fireCallback, requestId, requestUrl, operationName];
   }
 }
diff --git a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
index 5a69960e4d9..2011604534c 100644
--- a/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
+++ b/app/assets/javascripts/performance_bar/stores/performance_bar_store.js
@@ -3,15 +3,19 @@ export default class PerformanceBarStore {
     this.requests = [];
   }
 
-  addRequest(requestId, requestUrl) {
+  addRequest(requestId, requestUrl, operationName) {
     if (!this.findRequest(requestId)) {
-      const shortUrl = PerformanceBarStore.truncateUrl(requestUrl);
+      let displayName = PerformanceBarStore.truncateUrl(requestUrl);
+
+      if (operationName) {
+        displayName += ` (${operationName})`;
+      }
 
       this.requests.push({
         id: requestId,
         url: requestUrl,
-        truncatedUrl: shortUrl,
         details: {},
+        displayName,
       });
     }
 
diff --git a/spec/frontend/performance_bar/index_spec.js b/spec/frontend/performance_bar/index_spec.js
index 6c1cbfa70a1..008961bf709 100644
--- a/spec/frontend/performance_bar/index_spec.js
+++ b/spec/frontend/performance_bar/index_spec.js
@@ -69,7 +69,7 @@ describe('performance bar wrapper', () => {
     it('adds the request immediately', () => {
       vm.addRequest('123', 'https://gitlab.com/');
 
-      expect(vm.store.addRequest).toHaveBeenCalledWith('123', 'https://gitlab.com/');
+      expect(vm.store.addRequest).toHaveBeenCalledWith('123', 'https://gitlab.com/', undefined);
     });
   });
 
diff --git a/spec/frontend/performance_bar/services/performance_bar_service_spec.js b/spec/frontend/performance_bar/services/performance_bar_service_spec.js
index 36bfd575c12..1bb70a43a1b 100644
--- a/spec/frontend/performance_bar/services/performance_bar_service_spec.js
+++ b/spec/frontend/performance_bar/services/performance_bar_service_spec.js
@@ -63,5 +63,17 @@ describe('PerformanceBarService', () => {
         );
       });
     });
+
+    describe('operationName', () => {
+      function requestUrl(response, peekUrl) {
+        return PerformanceBarService.callbackParams(response, peekUrl)[3];
+      }
+
+      it('gets the operation name from response.config', () => {
+        expect(
+          requestUrl({ headers: {}, config: { operationName: 'someOperation' } }, '/peek'),
+        ).toBe('someOperation');
+      });
+    });
   });
 });
diff --git a/spec/frontend/performance_bar/stores/performance_bar_store_spec.js b/spec/frontend/performance_bar/stores/performance_bar_store_spec.js
index b7324ba2f6e..7d5c5031792 100644
--- a/spec/frontend/performance_bar/stores/performance_bar_store_spec.js
+++ b/spec/frontend/performance_bar/stores/performance_bar_store_spec.js
@@ -1,9 +1,9 @@
 import PerformanceBarStore from '~/performance_bar/stores/performance_bar_store';
 
 describe('PerformanceBarStore', () => {
-  describe('truncateUrl', () => {
+  describe('displayName', () => {
     let store;
-    const findUrl = (id) => store.findRequest(id).truncatedUrl;
+    const findUrl = (id) => store.findRequest(id).displayName;
 
     beforeEach(() => {
       store = new PerformanceBarStore();
@@ -41,6 +41,11 @@ describe('PerformanceBarStore', () => {
       store.addRequest('id', 'http://localhost:3001/h5bp/html5-boilerplate/#frag/ment');
       expect(findUrl('id')).toEqual('html5-boilerplate');
     });
+
+    it('appends the GraphQL operation name', () => {
+      store.addRequest('id', 'http://localhost:3001/api/graphql', 'someOperation');
+      expect(findUrl('id')).toBe('graphql (someOperation)');
+    });
   });
 
   describe('setRequestDetailsData', () => {