diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js
index ef4f47f226ab38d7553db4d88265f70d59263d8d..fd2b064160bfbc1af135eec244161da9f2167037 100644
--- a/app/assets/javascripts/ide/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -4,6 +4,7 @@ import dismissUserCallout from '~/graphql_shared/mutations/dismiss_user_callout.
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
 import ciConfig from '~/pipeline_editor/graphql/queries/ci_config.graphql';
+import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { query, mutate } from './gql';
 
 const fetchApiProjectData = (projectPath) => Api.project(projectPath).then(({ data }) => data);
@@ -12,7 +13,10 @@ const fetchGqlProjectData = (projectPath) =>
   query({
     query: getIdeProject,
     variables: { projectPath },
-  }).then(({ data }) => data.project);
+  }).then(({ data }) => ({
+    ...data.project,
+    id: getIdFromGraphQLId(data.project.id),
+  }));
 
 export default {
   getFileData(endpoint) {
diff --git a/spec/frontend/ide/services/index_spec.js b/spec/frontend/ide/services/index_spec.js
index eacf1244d5560171298f6bd30a7a4cabe850ef40..d250eb7f6add12a6f82041046623c0b89199b3a5 100644
--- a/spec/frontend/ide/services/index_spec.js
+++ b/spec/frontend/ide/services/index_spec.js
@@ -219,15 +219,21 @@ describe('IDE services', () => {
   describe('getProjectData', () => {
     it('combines gql and API requests', () => {
       const gqlProjectData = {
+        id: 'gid://gitlab/Project/1',
         userPermissions: {
           bogus: true,
         },
       };
+      const expectedResponse = {
+        ...projectData,
+        ...gqlProjectData,
+        id: 1,
+      };
       Api.project.mockReturnValue(Promise.resolve({ data: { ...projectData } }));
       query.mockReturnValue(Promise.resolve({ data: { project: gqlProjectData } }));
 
       return services.getProjectData(TEST_NAMESPACE, TEST_PROJECT).then((response) => {
-        expect(response).toEqual({ data: { ...projectData, ...gqlProjectData } });
+        expect(response).toEqual({ data: expectedResponse });
         expect(Api.project).toHaveBeenCalledWith(TEST_PROJECT_ID);
         expect(query).toHaveBeenCalledWith({
           query: getIdeProject,