Merge branch '11691-use-fragments-in-epic-fetch-query' into 'master'

Use fragments in Epic Tree query and include `__typename`

See merge request gitlab-org/gitlab-ee!14083

ee/app/assets/javascripts/related_items_tree/queries/child_items.graphql

-query childItems($fullPath: ID!, $iid: ID) {
-  group(fullPath: $fullPath) {
-    id
-    path
-    fullPath
-    epic(iid: $iid) {
-      id
-      iid
-      title
-      webPath
-      userPermissions {
-        adminEpic
-        createEpic
-      }
-      children {
-        edges {
-          node {
-            id
-            iid
-            title
-            state
-            webPath
-            reference(full: true)
-            relationPath
-            createdAt
-            closedAt
-            hasChildren
-            hasIssues
-            userPermissions {
-              adminEpic
-              createEpic
-            }
-            group {
-              fullPath
-            }
-          }
-        }
-      }
-      issues {
-        edges {
-          node {
-            iid
-            title
-            closedAt
-            state
-            createdAt
-            confidential
-            dueDate
-            weight
-            webPath
-            reference
-            relationPath
-            assignees {
-              edges {
-                node {
-                  webUrl
-                  name
-                  username
-                  avatarUrl
-                }
-              }
-            }
-            milestone {
-              title
-              startDate
-              dueDate
-            }
-          }
-        }
-      }
-    }
-  }
-}

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

+fragment BaseEpic on Epic {
+  id
+  iid
+  title
+  webPath
+  userPermissions {
+    adminEpic
+    createEpic
+  }
+}
+
+fragment EpicNode on Epic {
+  ...BaseEpic
+  state
+  reference(full: true)
+  relationPath
+  createdAt
+  closedAt
+  hasChildren
+  hasIssues
+  group {
+    fullPath
+  }
+}

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

+#import "./epic.fragment.graphql"
+#import "./issue.fragment.graphql"
+
+query childItems($fullPath: ID!, $iid: ID) {
+  group(fullPath: $fullPath) {
+    id
+    path
+    fullPath
+    epic(iid: $iid) {
+      ...BaseEpic
+      children {
+        edges {
+          node {
+            ...EpicNode
+          }
+        }
+      }
+      issues {
+        edges {
+          node {
+            ...IssueNode
+          }
+        }
+      }
+    }
+  }
+}

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

+fragment IssueNode on EpicIssue {
+  iid
+  title
+  closedAt
+  state
+  createdAt
+  confidential
+  dueDate
+  weight
+  webPath
+  reference
+  relationPath
+  assignees {
+    edges {
+      node {
+        webUrl
+        name
+        username
+        avatarUrl
+      }
+    }
+  }
+  milestone {
+    title
+    startDate
+    dueDate
+  }
+}

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

@@ -14,7 +14,7 @@ import {
 import { processQueryResponse, formatChildItem, gqClient } from '../utils/epic_utils';
 import { ActionType, ChildType, ChildState } from '../constants';
 
-import childItems from '../queries/child_items.graphql';
+import epicChildren from '../queries/epicChildren.query.graphql';
 
 import * as types from './mutation_types';
 
@@ -74,7 +74,7 @@ export const fetchItems = ({ dispatch }, { parentItem, isSubItem = false }) => {
 
   gqClient
     .query({
-      query: childItems,
+      query: epicChildren,
       variables: { iid: parentItem.iid, fullPath: parentItem.fullPath },
     })
     .then(({ data }) => {

ee/app/assets/javascripts/related_items_tree/utils/epic_utils.js

@@ -2,14 +2,7 @@ import createGqClient from '~/lib/graphql';
 
 import { ChildType, PathIdSeparator } from '../constants';
 
-export const gqClient = createGqClient(
-  {},
-  {
-    cacheConfig: {
-      addTypename: false,
-    },
-  },
-);
+export const gqClient = createGqClient();
 
 /**
  * Returns formatted child item to include additional