Request title from backend in MR popovers

app/assets/javascripts/mr_popover/components/mr_popover.vue

@@ -65,6 +65,9 @@ export default {
           return humanMRStates.open;
       }
     },
+    title() {
+      return this.mergeRequest?.title || this.mergeRequestTitle;
+    },
     showDetails() {
       return Object.keys(this.mergeRequest).length > 0;
     },
@@ -89,7 +92,7 @@ export default {
 <template>
   <gl-popover :target="target" boundary="viewport" placement="top" show>
     <div class="mr-popover">
-      <div v-if="$apollo.loading">
+      <div v-if="$apollo.queries.mergeRequest.loading">
         <gl-skeleton-loading :lines="1" class="animation-container-small mt-1" />
       </div>
       <div v-else-if="showDetails" class="d-flex align-items-center justify-content-between">
@@ -101,7 +104,7 @@ export default {
         </div>
         <ci-icon v-if="detailedStatus" :status="detailedStatus" />
       </div>
-      <h5 class="my-2">{{ mergeRequestTitle }}</h5>
+      <h5 v-if="!$apollo.queries.mergeRequest.loading" class="my-2">{{ title }}</h5>
       <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
       <div class="text-secondary">
         {{ `${projectPath}!${mergeRequestIID}` }}

app/assets/javascripts/mr_popover/queries/merge_request.query.graphql

 query mergeRequest($projectPath: ID!, $mergeRequestIID: String!) {
   project(fullPath: $projectPath) {
     mergeRequest(iid: $mergeRequestIID) {
+      title
       createdAt
       state
       headPipeline {

spec/frontend/mr_popover/__snapshots__/mr_popover_spec.js.snap

@@ -45,7 +45,7 @@ exports[`MR Popover loaded state matches the snapshot 1`] = `
     <h5
       class="my-2"
     >
-      MR Title
+      Updated Title
     </h5>
      
     <div
@@ -77,11 +77,7 @@ exports[`MR Popover shows skeleton-loader while apollo is loading 1`] = `
       />
     </div>
      
-    <h5
-      class="my-2"
-    >
-      MR Title
-    </h5>
+    <!---->
      
     <div
       class="text-secondary"

spec/frontend/mr_popover/mr_popover_spec.js

@@ -15,14 +15,18 @@ describe('MR Popover', () => {
       },
       mocks: {
         $apollo: {
+          queries: {
+            mergeRequest: {
               loading: false,
             },
           },
+        },
+      },
     });
   });
 
   it('shows skeleton-loader while apollo is loading', () => {
-    wrapper.vm.$apollo.loading = true;
+    wrapper.vm.$apollo.queries.mergeRequest.loading = true;
 
     return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
@@ -33,6 +37,7 @@ describe('MR Popover', () => {
     it('matches the snapshot', () => {
       wrapper.setData({
         mergeRequest: {
+          title: 'Updated Title',
           state: 'opened',
           createdAt: new Date(),
           headPipeline: {
@@ -64,5 +69,11 @@ describe('MR Popover', () => {
         expect(wrapper.find(CiIcon).exists()).toBe(false);
       });
     });
+
+    it('falls back to cached MR title when request fails', () => {
+      return wrapper.vm.$nextTick().then(() => {
+        expect(wrapper.text()).toContain('MR Title');
+      });
+    });
   });
 });