Performance Improvements for the Epic View: GraphQL startupjs

app/graphql/queries/epic/epic_children.query.graphql

+fragment PageInfo on PageInfo {
+  hasNextPage
+  hasPreviousPage
+  startCursor
+  endCursor
+}
+
+fragment RelatedTreeBaseEpic on Epic {
+  id
+  iid
+  title
+  webPath
+  relativePosition
+  userPermissions {
+    __typename
+    adminEpic
+    createEpic
+  }
+  descendantCounts {
+    __typename
+    openedEpics
+    closedEpics
+    openedIssues
+    closedIssues
+  }
+  healthStatus {
+    __typename
+    issuesAtRisk
+    issuesOnTrack
+    issuesNeedingAttention
+  }
+}
+
+fragment EpicNode on Epic {
+  ...RelatedTreeBaseEpic
+  state
+  reference(full: true)
+  relationPath
+  createdAt
+  closedAt
+  hasChildren
+  hasIssues
+  group {
+    __typename
+    fullPath
+  }
+}
+
+query childItems(
+  $fullPath: ID!
+  $iid: ID
+  $pageSize: Int = 100
+  $epicEndCursor: String = ""
+  $issueEndCursor: String = ""
+) {
+  group(fullPath: $fullPath) {
+    __typename
+    id
+    path
+    fullPath
+    epic(iid: $iid) {
+      __typename
+      ...RelatedTreeBaseEpic
+      children(first: $pageSize, after: $epicEndCursor) {
+        __typename
+        edges {
+          __typename
+          node {
+            __typename
+            ...EpicNode
+          }
+        }
+        pageInfo {
+          __typename
+          ...PageInfo
+        }
+      }
+      issues(first: $pageSize, after: $issueEndCursor) {
+        __typename
+        edges {
+          __typename
+          node {
+            __typename
+            iid
+            epicIssueId
+            title
+            closedAt
+            state
+            createdAt
+            confidential
+            dueDate
+            weight
+            webPath
+            reference(full: true)
+            relationPath
+            relativePosition
+            assignees {
+              __typename
+              edges {
+                __typename
+                node {
+                  __typename
+                  webUrl
+                  name
+                  username
+                  avatarUrl
+                }
+              }
+            }
+            milestone {
+              __typename
+              title
+              startDate
+              dueDate
+            }
+            healthStatus
+          }
+        }
+        pageInfo {
+          __typename
+          ...PageInfo
+        }
+      }
+    }
+  }
+}

ee/app/assets/javascripts/epic/queries/epicDetails.query.graphql → app/graphql/queries/epic/epic_details.query.graphql

 query epicDetails($fullPath: ID!, $iid: ID!) {
   group(fullPath: $fullPath) {
+    __typename
     epic(iid: $iid) {
+      __typename
       participants {
+        __typename
         edges {
+          __typename
           node {
+            __typename
             name
             avatarUrl
             webUrl

ee/app/assets/javascripts/epic/store/actions.js

+import epicDetailsQuery from 'shared_queries/epic/epic_details.query.graphql';
 import { deprecatedCreateFlash as flash } from '~/flash';
 
 import axios from '~/lib/utils/axios_utils';
@@ -6,7 +7,6 @@ import { __, s__, sprintf } from '~/locale';
 
 import { statusType, statusEvent, dateTypes } from '../constants';
 
-import epicDetailsQuery from '../queries/epicDetails.query.graphql';
 import epicSetSubscription from '../queries/epicSetSubscription.mutation.graphql';
 import updateEpic from '../queries/updateEpic.mutation.graphql';
 import epicUtils from '../utils/epic_utils';

ee/app/assets/javascripts/related_items_tree/queries/epic.fragment.graphql

-fragment RelatedTreeBaseEpic on Epic {
-  id
-  iid
-  title
-  webPath
-  relativePosition
-  userPermissions {
-    adminEpic
-    createEpic
-  }
-  descendantCounts {
-    openedEpics
-    closedEpics
-    openedIssues
-    closedIssues
-  }
-  healthStatus {
-    issuesAtRisk
-    issuesOnTrack
-    issuesNeedingAttention
-  }
-}
-
-fragment EpicNode on Epic {
-  ...RelatedTreeBaseEpic
-  state
-  reference(full: true)
-  relationPath
-  createdAt
-  closedAt
-  hasChildren
-  hasIssues
-  group {
-    fullPath
-  }
-}

ee/app/assets/javascripts/related_items_tree/queries/epicChildren.query.graphql

-#import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
-#import "./epic.fragment.graphql"
-#import "./issue.fragment.graphql"
-
-query childItems(
-  $fullPath: ID!
-  $iid: ID
-  $pageSize: Int = 100
-  $epicEndCursor: String = ""
-  $issueEndCursor: String = ""
-) {
-  group(fullPath: $fullPath) {
-    id
-    path
-    fullPath
-    epic(iid: $iid) {
-      ...RelatedTreeBaseEpic
-      children(first: $pageSize, after: $epicEndCursor) {
-        edges {
-          node {
-            ...EpicNode
-          }
-        }
-        pageInfo {
-          ...PageInfo
-        }
-      }
-
-      issues(first: $pageSize, after: $issueEndCursor) {
-        edges {
-          node {
-            ...IssueNode
-          }
-        }
-        pageInfo {
-          ...PageInfo
-        }
-      }
-    }
-  }
-}

ee/app/assets/javascripts/related_items_tree/queries/issue.fragment.graphql

-fragment IssueNode on EpicIssue {
-  iid
-  epicIssueId
-  title
-  closedAt
-  state
-  createdAt
-  confidential
-  dueDate
-  weight
-  webPath
-  reference(full: true)
-  relationPath
-  relativePosition
-  assignees {
-    edges {
-      node {
-        webUrl
-        name
-        username
-        avatarUrl
-      }
-    }
-  }
-  milestone {
-    title
-    startDate
-    dueDate
-  }
-  healthStatus
-}

ee/app/assets/javascripts/related_items_tree/store/actions.js

 import Api from 'ee/api';
+import epicChildren from 'shared_queries/epic/epic_children.query.graphql';
 import { deprecatedCreateFlash as flash } from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
@@ -13,7 +14,6 @@ import {
 
 import { ChildType, ChildState, idProp, relativePositions } from '../constants';
 
-import epicChildren from '../queries/epicChildren.query.graphql';
 import epicChildReorder from '../queries/epicChildReorder.mutation.graphql';
 import { processQueryResponse, formatChildItem, gqClient } from '../utils/epic_utils';
 

ee/app/views/groups/epics/show.html.haml

@@ -20,6 +20,8 @@
 - add_page_specific_style 'page_bundles/roadmap'
 
 - add_page_startup_api_call discussions_path(@epic)
+- add_page_startup_graphql_call('epic/epic_details', { fullPath: @group.full_path, iid: @epic.iid })
+- add_page_startup_graphql_call('epic/epic_children', { fullPath: @group.full_path, iid: @epic.iid, pageSize: 100, epicEndCursor: '', issueEndCursor: '' })
 
 #epic-app-root{ data: epic_show_app_data(@epic),
   'data-allow-sub-epics' => allow_sub_epics }