1 files changed, 17 insertions, 4 deletions

diff --git a/app/assets/javascripts/repository/components/tree_content.vue b/app/assets/javascripts/repository/components/tree_content.vue
index c861fb8dd06..5a8ead9ae8f 100644
--- a/app/assets/javascripts/repository/components/tree_content.vue
+++ b/app/assets/javascripts/repository/components/tree_content.vue
@@ -1,5 +1,6 @@
 <script>
 import filesQuery from 'shared_queries/repository/files.query.graphql';
+import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
 import createFlash from '~/flash';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import { __ } from '../../locale';
@@ -69,6 +70,9 @@ export default {
     hasShowMore() {
       return !this.clickedShowMore && this.pageLimitReached;
     },
+    paginatedTreeEnabled() {
+      return this.glFeatures.paginatedTreeGraphqlQuery;
+    },
   },
 
   watch: {
@@ -91,7 +95,7 @@ export default {
 
       return this.$apollo
         .query({
-          query: filesQuery,
+          query: this.paginatedTreeEnabled ? paginatedTreeQuery : filesQuery,
           variables: {
             projectPath: this.projectPath,
             ref: this.ref,
@@ -104,13 +108,20 @@ export default {
           if (data.errors) throw data.errors;
           if (!data?.project?.repository || originalPath !== (this.path || '/')) return;
 
-          const pageInfo = this.hasNextPage(data.project.repository.tree);
+          const pageInfo = this.paginatedTreeEnabled
+            ? data.project.repository.paginatedTree.pageInfo
+            : this.hasNextPage(data.project.repository.tree);
 
           this.isLoadingFiles = false;
           this.entries = Object.keys(this.entries).reduce(
             (acc, key) => ({
               ...acc,
-              [key]: this.normalizeData(key, data.project.repository.tree[key].edges),
+              [key]: this.normalizeData(
+                key,
+                this.paginatedTreeEnabled
+                  ? data.project.repository.paginatedTree.nodes[0][key]
+                  : data.project.repository.tree[key].edges,
+              ),
             }),
             {},
           );
@@ -132,7 +143,9 @@ export default {
         });
     },
     normalizeData(key, data) {
-      return this.entries[key].concat(data.map(({ node }) => node));
+      return this.entries[key].concat(
+        this.paginatedTreeEnabled ? data.nodes : data.map(({ node }) => node),
+      );
     },
     hasNextPage(data) {
       return []