diff --git a/app/assets/javascripts/graphql_shared/utils.js b/app/assets/javascripts/graphql_shared/utils.js
index 198d9f980f01bb038baac9f04cc4197c80379ca2..6a64e8a2fa8fd45e5e3ad1409d131674e102e826 100644
--- a/app/assets/javascripts/graphql_shared/utils.js
+++ b/app/assets/javascripts/graphql_shared/utils.js
@@ -16,7 +16,10 @@ export const isGid = (id) => {
   return false;
 };
 
-const parseGid = (gid) => parseInt(`${gid}`.replace(/gid:\/\/gitlab\/.*\//g, ''), 10);
+const parseGid = (gid) => {
+  const [type, id] = `${gid}`.replace(/gid:\/\/gitlab\//g, '').split('/');
+  return { type, id };
+};
 
 /**
  * Ids generated by GraphQL endpoints are usually in the format
@@ -27,8 +30,24 @@ const parseGid = (gid) => parseInt(`${gid}`.replace(/gid:\/\/gitlab\/.*\//g, '')
  * @returns {Number}
  */
 export const getIdFromGraphQLId = (gid = '') => {
-  const parsedGid = parseGid(gid);
-  return Number.isInteger(parsedGid) ? parsedGid : null;
+  const rawId = isGid(gid) ? parseGid(gid).id : gid;
+  const id = parseInt(rawId, 10);
+  return Number.isInteger(id) ? id : null;
+};
+
+/**
+ * Ids generated by GraphQL endpoints are usually in the format
+ * gid://gitlab/Environments/123. This method extracts Type string
+ * from the Id path
+ *
+ * @param {String} gid GraphQL global ID
+ * @returns {String}
+ */
+export const getTypeFromGraphQLId = (gid = '') => {
+  if (!isGid(gid)) return null;
+
+  const { type } = parseGid(gid);
+  return type || null;
 };
 
 export const MutationOperationMode = {
diff --git a/spec/frontend/graphql_shared/utils_spec.js b/spec/frontend/graphql_shared/utils_spec.js
index 35ae8de1b1fd478693766e076d7be4a982935f45..f03856e5f7511943f43a999a592e5a6bd968256f 100644
--- a/spec/frontend/graphql_shared/utils_spec.js
+++ b/spec/frontend/graphql_shared/utils_spec.js
@@ -3,6 +3,7 @@ import Visibility from 'visibilityjs';
 import {
   isGid,
   getIdFromGraphQLId,
+  getTypeFromGraphQLId,
   convertToGraphQLId,
   convertToGraphQLIds,
   convertFromGraphQLIds,
@@ -26,52 +27,30 @@ describe('isGid', () => {
   });
 });
 
-describe('getIdFromGraphQLId', () => {
-  [
-    {
-      input: '',
-      output: null,
-    },
-    {
-      input: null,
-      output: null,
-    },
-    {
-      input: 2,
-      output: 2,
-    },
-    {
-      input: 'gid://',
-      output: null,
-    },
-    {
-      input: 'gid://gitlab/',
-      output: null,
-    },
-    {
-      input: 'gid://gitlab/Environments',
-      output: null,
-    },
-    {
-      input: 'gid://gitlab/Environments/',
-      output: null,
-    },
-    {
-      input: 'gid://gitlab/Environments/0',
-      output: 0,
-    },
-    {
-      input: 'gid://gitlab/Environments/123',
-      output: 123,
-    },
-    {
-      input: 'gid://gitlab/DesignManagement::Version/2',
-      output: 2,
-    },
-  ].forEach(({ input, output }) => {
-    it(`getIdFromGraphQLId returns ${output} when passed ${input}`, () => {
-      expect(getIdFromGraphQLId(input)).toBe(output);
-    });
+describe.each`
+  input                                           | id      | type
+  ${''}                                           | ${null} | ${null}
+  ${null}                                         | ${null} | ${null}
+  ${0}                                            | ${0}    | ${null}
+  ${'0'}                                          | ${0}    | ${null}
+  ${2}                                            | ${2}    | ${null}
+  ${'2'}                                          | ${2}    | ${null}
+  ${'gid://'}                                     | ${null} | ${null}
+  ${'gid://gitlab'}                               | ${null} | ${null}
+  ${'gid://gitlab/'}                              | ${null} | ${null}
+  ${'gid://gitlab/Environments'}                  | ${null} | ${'Environments'}
+  ${'gid://gitlab/Environments/'}                 | ${null} | ${'Environments'}
+  ${'gid://gitlab/Environments/0'}                | ${0}    | ${'Environments'}
+  ${'gid://gitlab/Environments/123'}              | ${123}  | ${'Environments'}
+  ${'gid://gitlab/Environments/123/test'}         | ${123}  | ${'Environments'}
+  ${'gid://gitlab/DesignManagement::Version/123'} | ${123}  | ${'DesignManagement::Version'}
+`('parses GraphQL ID `$input`', ({ input, id, type }) => {
+  it(`getIdFromGraphQLId returns ${id}`, () => {
+    expect(getIdFromGraphQLId(input)).toBe(id);
+  });
+
+  it(`getTypeFromGraphQLId returns ${type}`, () => {
+    expect(getTypeFromGraphQLId(input)).toBe(type);
   });
 });