diff --git a/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
index 59ddf4b19d8f462b30d86088e9049443cfb8d984..7d91e0f9550dd2f09cf91a518a89ac4da6366152 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_admin_variables.vue
@@ -1,5 +1,7 @@
 <script>
 import createFlash from '~/flash';
+import { __ } from '~/locale';
+import { reportMessageToSentry } from '../utils';
 import getAdminVariables from '../graphql/queries/variables.query.graphql';
 import {
   ADD_MUTATION_ACTION,
@@ -21,7 +23,11 @@ export default {
   data() {
     return {
       adminVariables: [],
+      hasNextPage: false,
       isInitialLoading: true,
+      isLoadingMoreItems: false,
+      loadingCounter: 0,
+      pageInfo: {},
     };
   },
   apollo: {
@@ -30,7 +36,28 @@ export default {
       update(data) {
         return data?.ciVariables?.nodes || [];
       },
+      result({ data }) {
+        this.pageInfo = data?.ciVariables?.pageInfo || this.pageInfo;
+        this.hasNextPage = this.pageInfo?.hasNextPage || false;
+
+        // Because graphQL has a limit of 100 items,
+        // we batch load all the variables by making successive queries
+        // to keep the same UX. As a safeguard, we make sure that we cannot go over
+        // 20 consecutive API calls, which means 2000 variables loaded maximum.
+        if (!this.hasNextPage) {
+          this.isLoadingMoreItems = false;
+        } else if (this.loadingCounter < 20) {
+          this.hasNextPage = false;
+          this.fetchMoreVariables();
+          this.loadingCounter += 1;
+        } else {
+          createFlash({ message: this.$options.tooManyCallsError });
+          reportMessageToSentry(this.$options.componentName, this.$options.tooManyCallsError, {});
+        }
+      },
       error() {
+        this.isLoadingMoreItems = false;
+        this.hasNextPage = false;
         createFlash({ message: variableFetchErrorText });
       },
       watchLoading(flag) {
@@ -42,7 +69,10 @@ export default {
   },
   computed: {
     isLoading() {
-      return this.$apollo.queries.adminVariables.loading && this.isInitialLoading;
+      return (
+        (this.$apollo.queries.adminVariables.loading && this.isInitialLoading) ||
+        this.isLoadingMoreItems
+      );
     },
   },
   methods: {
@@ -52,6 +82,15 @@ export default {
     deleteVariable(variable) {
       this.variableMutation(DELETE_MUTATION_ACTION, variable);
     },
+    fetchMoreVariables() {
+      this.isLoadingMoreItems = true;
+
+      this.$apollo.queries.adminVariables.fetchMore({
+        variables: {
+          after: this.pageInfo.endCursor,
+        },
+      });
+    },
     updateVariable(variable) {
       this.variableMutation(UPDATE_MUTATION_ACTION, variable);
     },
@@ -66,9 +105,8 @@ export default {
           },
         });
 
-        const { errors } = data[currentMutation.name];
-
-        if (errors.length > 0) {
+        if (data[currentMutation.name]?.errors?.length) {
+          const { errors } = data[currentMutation.name];
           createFlash({ message: errors[0] });
         } else {
           // The writing to cache for admin variable is not working
@@ -81,6 +119,10 @@ export default {
       }
     },
   },
+  componentName: 'InstanceVariables',
+  i18n: {
+    tooManyCallsError: __('Maximum number of variables loaded (2000)'),
+  },
   mutationData: {
     [ADD_MUTATION_ACTION]: { action: addAdminVariable, name: 'addAdminVariable' },
     [UPDATE_MUTATION_ACTION]: { action: updateAdminVariable, name: 'updateAdminVariable' },
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
index 3522243e3e72e088dc3faea605cd1c97efef22bb..0f549a596cf0fd24be71fb78f0853efa2ac53579 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_group_variables.vue
@@ -1,7 +1,9 @@
 <script>
 import createFlash from '~/flash';
+import { __ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { reportMessageToSentry } from '../utils';
 import getGroupVariables from '../graphql/queries/group_variables.query.graphql';
 import {
   ADD_MUTATION_ACTION,
@@ -25,6 +27,10 @@ export default {
   data() {
     return {
       groupVariables: [],
+      hasNextPage: false,
+      isLoadingMoreItems: false,
+      loadingCounter: 0,
+      pageInfo: {},
     };
   },
   apollo: {
@@ -38,7 +44,27 @@ export default {
       update(data) {
         return data?.group?.ciVariables?.nodes || [];
       },
+      result({ data }) {
+        this.pageInfo = data?.group?.ciVariables?.pageInfo || this.pageInfo;
+        this.hasNextPage = this.pageInfo?.hasNextPage || false;
+        // Because graphQL has a limit of 100 items,
+        // we batch load all the variables by making successive queries
+        // to keep the same UX. As a safeguard, we make sure that we cannot go over
+        // 20 consecutive API calls, which means 2000 variables loaded maximum.
+        if (!this.hasNextPage) {
+          this.isLoadingMoreItems = false;
+        } else if (this.loadingCounter < 20) {
+          this.hasNextPage = false;
+          this.fetchMoreVariables();
+          this.loadingCounter += 1;
+        } else {
+          createFlash({ message: this.$options.tooManyCallsError });
+          reportMessageToSentry(this.$options.componentName, this.$options.tooManyCallsError, {});
+        }
+      },
       error() {
+        this.isLoadingMoreItems = false;
+        this.hasNextPage = false;
         createFlash({ message: variableFetchErrorText });
       },
     },
@@ -48,7 +74,7 @@ export default {
       return this.glFeatures.groupScopedCiVariables;
     },
     isLoading() {
-      return this.$apollo.queries.groupVariables.loading;
+      return this.$apollo.queries.groupVariables.loading || this.isLoadingMoreItems;
     },
   },
   methods: {
@@ -58,6 +84,16 @@ export default {
     deleteVariable(variable) {
       this.variableMutation(DELETE_MUTATION_ACTION, variable);
     },
+    fetchMoreVariables() {
+      this.isLoadingMoreItems = true;
+
+      this.$apollo.queries.groupVariables.fetchMore({
+        variables: {
+          fullPath: this.groupPath,
+          after: this.pageInfo.endCursor,
+        },
+      });
+    },
     updateVariable(variable) {
       this.variableMutation(UPDATE_MUTATION_ACTION, variable);
     },
@@ -74,9 +110,8 @@ export default {
           },
         });
 
-        const { errors } = data[currentMutation.name];
-
-        if (errors.length > 0) {
+        if (data[currentMutation.name]?.errors?.length) {
+          const { errors } = data[currentMutation.name];
           createFlash({ message: errors[0] });
         }
       } catch {
@@ -84,6 +119,10 @@ export default {
       }
     },
   },
+  componentName: 'GroupVariables',
+  i18n: {
+    tooManyCallsError: __('Maximum number of variables loaded (2000)'),
+  },
   mutationData: {
     [ADD_MUTATION_ACTION]: { action: addGroupVariable, name: 'addGroupVariable' },
     [UPDATE_MUTATION_ACTION]: { action: updateGroupVariable, name: 'updateGroupVariable' },
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
index 29db02a3c59a9c6dab4b5d24dfb8fcd63c31cc89..d601f7a424ccec90feaccf897c4e98f48fd6af3b 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_project_variables.vue
@@ -1,9 +1,10 @@
 <script>
 import createFlash from '~/flash';
+import { __ } from '~/locale';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import getProjectEnvironments from '../graphql/queries/project_environments.query.graphql';
 import getProjectVariables from '../graphql/queries/project_variables.query.graphql';
-import { mapEnvironmentNames } from '../utils';
+import { mapEnvironmentNames, reportMessageToSentry } from '../utils';
 import {
   ADD_MUTATION_ACTION,
   DELETE_MUTATION_ACTION,
@@ -25,6 +26,10 @@ export default {
   inject: ['endpoint', 'projectFullPath', 'projectId'],
   data() {
     return {
+      hasNextPage: false,
+      isLoadingMoreItems: false,
+      loadingCounter: 0,
+      pageInfo: {},
       projectEnvironments: [],
       projectVariables: [],
     };
@@ -48,13 +53,34 @@ export default {
       query: getProjectVariables,
       variables() {
         return {
+          after: null,
           fullPath: this.projectFullPath,
         };
       },
       update(data) {
         return data?.project?.ciVariables?.nodes || [];
       },
+      result({ data }) {
+        this.pageInfo = data?.project?.ciVariables?.pageInfo || this.pageInfo;
+        this.hasNextPage = this.pageInfo?.hasNextPage || false;
+        // Because graphQL has a limit of 100 items,
+        // we batch load all the variables by making successive queries
+        // to keep the same UX. As a safeguard, we make sure that we cannot go over
+        // 20 consecutive API calls, which means 2000 variables loaded maximum.
+        if (!this.hasNextPage) {
+          this.isLoadingMoreItems = false;
+        } else if (this.loadingCounter < 20) {
+          this.hasNextPage = false;
+          this.fetchMoreVariables();
+          this.loadingCounter += 1;
+        } else {
+          createFlash({ message: this.$options.tooManyCallsError });
+          reportMessageToSentry(this.$options.componentName, this.$options.tooManyCallsError, {});
+        }
+      },
       error() {
+        this.isLoadingMoreItems = false;
+        this.hasNextPage = false;
         createFlash({ message: variableFetchErrorText });
       },
     },
@@ -63,7 +89,8 @@ export default {
     isLoading() {
       return (
         this.$apollo.queries.projectVariables.loading ||
-        this.$apollo.queries.projectEnvironments.loading
+        this.$apollo.queries.projectEnvironments.loading ||
+        this.isLoadingMoreItems
       );
     },
   },
@@ -74,6 +101,16 @@ export default {
     deleteVariable(variable) {
       this.variableMutation(DELETE_MUTATION_ACTION, variable);
     },
+    fetchMoreVariables() {
+      this.isLoadingMoreItems = true;
+
+      this.$apollo.queries.projectVariables.fetchMore({
+        variables: {
+          fullPath: this.projectFullPath,
+          after: this.pageInfo.endCursor,
+        },
+      });
+    },
     updateVariable(variable) {
       this.variableMutation(UPDATE_MUTATION_ACTION, variable);
     },
@@ -89,16 +126,19 @@ export default {
             variable,
           },
         });
-
-        const { errors } = data[currentMutation.name];
-        if (errors.length > 0) {
+        if (data[currentMutation.name]?.errors?.length) {
+          const { errors } = data[currentMutation.name];
           createFlash({ message: errors[0] });
         }
-      } catch (e) {
+      } catch {
         createFlash({ message: genericMutationErrorText });
       }
     },
   },
+  componentName: 'ProjectVariables',
+  i18n: {
+    tooManyCallsError: __('Maximum number of variables loaded (2000)'),
+  },
   mutationData: {
     [ADD_MUTATION_ACTION]: { action: addProjectVariable, name: 'addProjectVariable' },
     [UPDATE_MUTATION_ACTION]: { action: updateProjectVariable, name: 'updateProjectVariable' },
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
index 1bb940806947046105c9373fe95f0ccd5be8ea56..959ef6864fb0a5ee9991be5b590cd326470308a6 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -75,8 +75,7 @@ export default {
   props: {
     isLoading: {
       type: Boolean,
-      required: false,
-      default: false,
+      required: true,
     },
     variables: {
       type: Array,
diff --git a/app/assets/javascripts/ci_variable_list/constants.js b/app/assets/javascripts/ci_variable_list/constants.js
index e2dd28cdaa17fff5a6c3c459e6d9741a7d964234..ccad08ef8b6b038774f779d13f670076519a71ef 100644
--- a/app/assets/javascripts/ci_variable_list/constants.js
+++ b/app/assets/javascripts/ci_variable_list/constants.js
@@ -52,7 +52,7 @@ export const groupString = 'Group';
 // eslint-disable-next-line @gitlab/require-i18n-strings
 export const instanceString = 'Instance';
 // eslint-disable-next-line @gitlab/require-i18n-strings
-export const projectString = 'Instance';
+export const projectString = 'Project';
 
 export const AWS_TIP_DISMISSED_COOKIE_NAME = 'ci_variable_list_constants_aws_tip_dismissed';
 export const AWS_TIP_MESSAGE = __(
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
index c6dd6d4faafbad4c082a430ca6c6b6f2e314dd75..b5555fe44016af51cf54000fb84893aaebe6da1c 100644
--- a/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/group_variables.query.graphql
@@ -1,9 +1,13 @@
 #import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
-query getGroupVariables($fullPath: ID!) {
+query getGroupVariables($after: String, $first: Int = 100, $fullPath: ID!) {
   group(fullPath: $fullPath) {
     id
-    ciVariables {
+    ciVariables(after: $after, first: $first) {
+      pageInfo {
+        ...PageInfo
+      }
       nodes {
         ...BaseCiVariable
         ... on CiGroupVariable {
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql
index a60a50e4bc46814f7c3b1c6a69a278e5fc1a7bf6..08b5bf7af16432e9ce73bba5df08a3b1a1b3dc71 100644
--- a/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/project_variables.query.graphql
@@ -1,9 +1,13 @@
 #import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
-query getProjectVariables($fullPath: ID!) {
+query getProjectVariables($after: String, $first: Int = 100, $fullPath: ID!) {
   project(fullPath: $fullPath) {
     id
-    ciVariables {
+    ciVariables(after: $after, first: $first) {
+      pageInfo {
+        ...PageInfo
+      }
       nodes {
         ...BaseCiVariable
         environmentScope
diff --git a/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql b/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
index 95056842b4932a55b05496fb334c3641826bcc4e..2667d6606fe794f9bbaab41d35bf53bae448b482 100644
--- a/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
+++ b/app/assets/javascripts/ci_variable_list/graphql/queries/variables.query.graphql
@@ -1,7 +1,11 @@
 #import "~/ci_variable_list/graphql/fragments/ci_variable.fragment.graphql"
+#import "~/graphql_shared/fragments/page_info.fragment.graphql"
 
-query getVariables {
-  ciVariables {
+query getVariables($after: String, $first: Int = 100) {
+  ciVariables(after: $after, first: $first) {
+    pageInfo {
+      ...PageInfo
+    }
     nodes {
       ...BaseCiVariable
       ... on CiInstanceVariable {
diff --git a/app/assets/javascripts/ci_variable_list/graphql/resolvers.js b/app/assets/javascripts/ci_variable_list/graphql/settings.js
similarity index 66%
rename from app/assets/javascripts/ci_variable_list/graphql/resolvers.js
rename to app/assets/javascripts/ci_variable_list/graphql/settings.js
index c041531ae308ee88336e58d23733a488c789e8cc..ecdc4f220bd0853fb24c197db68b9b3c0c1deb35 100644
--- a/app/assets/javascripts/ci_variable_list/graphql/resolvers.js
+++ b/app/assets/javascripts/ci_variable_list/graphql/settings.js
@@ -3,7 +3,7 @@ import {
   convertObjectPropsToCamelCase,
   convertObjectPropsToSnakeCase,
 } from '../../lib/utils/common_utils';
-import { getIdFromGraphQLId } from '../../graphql_shared/utils';
+import { convertToGraphQLId, getIdFromGraphQLId } from '../../graphql_shared/utils';
 import {
   GRAPHQL_GROUP_TYPE,
   GRAPHQL_PROJECT_TYPE,
@@ -30,6 +30,7 @@ const mapVariableTypes = (variables = [], kind) => {
     return {
       __typename: `Ci${kind}Variable`,
       ...convertObjectPropsToCamelCase(ciVar),
+      id: convertToGraphQLId('Ci::Variable', ciVar.id),
       variableType: ciVar.variable_type ? ciVar.variable_type.toUpperCase() : ciVar.variableType,
     };
   });
@@ -40,9 +41,16 @@ const prepareProjectGraphQLResponse = ({ data, projectId, errors = [] }) => {
     errors,
     project: {
       __typename: GRAPHQL_PROJECT_TYPE,
-      id: projectId,
+      id: convertToGraphQLId(GRAPHQL_PROJECT_TYPE, projectId),
       ciVariables: {
-        __typename: 'CiVariableConnection',
+        __typename: `Ci${GRAPHQL_PROJECT_TYPE}VariableConnection`,
+        pageInfo: {
+          __typename: 'PageInfo',
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: '',
+          endCursor: '',
+        },
         nodes: mapVariableTypes(data.variables, projectString),
       },
     },
@@ -54,9 +62,16 @@ const prepareGroupGraphQLResponse = ({ data, groupId, errors = [] }) => {
     errors,
     group: {
       __typename: GRAPHQL_GROUP_TYPE,
-      id: groupId,
+      id: convertToGraphQLId(GRAPHQL_GROUP_TYPE, groupId),
       ciVariables: {
-        __typename: 'CiVariableConnection',
+        __typename: `Ci${GRAPHQL_GROUP_TYPE}VariableConnection`,
+        pageInfo: {
+          __typename: 'PageInfo',
+          hasNextPage: false,
+          hasPreviousPage: false,
+          startCursor: '',
+          endCursor: '',
+        },
         nodes: mapVariableTypes(data.variables, groupString),
       },
     },
@@ -68,24 +83,42 @@ const prepareAdminGraphQLResponse = ({ data, errors = [] }) => {
     errors,
     ciVariables: {
       __typename: `Ci${instanceString}VariableConnection`,
+      pageInfo: {
+        __typename: 'PageInfo',
+        hasNextPage: false,
+        hasPreviousPage: false,
+        startCursor: '',
+        endCursor: '',
+      },
       nodes: mapVariableTypes(data.variables, instanceString),
     },
   };
 };
 
-const callProjectEndpoint = async ({
+async function callProjectEndpoint({
   endpoint,
   fullPath,
   variable,
   projectId,
   cache,
   destroy = false,
-}) => {
+}) {
   try {
     const { data } = await axios.patch(endpoint, {
       variables_attributes: [prepareVariableForApi({ variable, destroy })],
     });
-    return prepareProjectGraphQLResponse({ data, projectId });
+
+    const graphqlData = prepareProjectGraphQLResponse({ data, projectId });
+
+    cache.writeQuery({
+      query: getProjectVariables,
+      variables: {
+        fullPath,
+        after: null,
+      },
+      data: graphqlData,
+    });
+    return graphqlData;
   } catch (e) {
     return prepareProjectGraphQLResponse({
       data: cache.readQuery({ query: getProjectVariables, variables: { fullPath } }),
@@ -93,7 +126,7 @@ const callProjectEndpoint = async ({
       errors: [...e.response.data],
     });
   }
-};
+}
 
 const callGroupEndpoint = async ({
   endpoint,
@@ -107,7 +140,15 @@ const callGroupEndpoint = async ({
     const { data } = await axios.patch(endpoint, {
       variables_attributes: [prepareVariableForApi({ variable, destroy })],
     });
-    return prepareGroupGraphQLResponse({ data, groupId });
+
+    const graphqlData = prepareGroupGraphQLResponse({ data, groupId });
+
+    cache.writeQuery({
+      query: getGroupVariables,
+      data: graphqlData,
+    });
+
+    return graphqlData;
   } catch (e) {
     return prepareGroupGraphQLResponse({
       data: cache.readQuery({ query: getGroupVariables, variables: { fullPath } }),
@@ -123,7 +164,14 @@ const callAdminEndpoint = async ({ endpoint, variable, cache, destroy = false })
       variables_attributes: [prepareVariableForApi({ variable, destroy })],
     });
 
-    return prepareAdminGraphQLResponse({ data });
+    const graphqlData = prepareAdminGraphQLResponse({ data });
+
+    cache.writeQuery({
+      query: getAdminVariables,
+      data: graphqlData,
+    });
+
+    return graphqlData;
   } catch (e) {
     return prepareAdminGraphQLResponse({
       data: cache.readQuery({ query: getAdminVariables }),
@@ -163,3 +211,46 @@ export const resolvers = {
     },
   },
 };
+
+export const mergeVariables = (existing, incoming, { args }) => {
+  if (!existing || !args?.after) {
+    return incoming;
+  }
+
+  const { nodes, ...rest } = incoming;
+  const result = rest;
+  result.nodes = [...existing.nodes, ...nodes];
+
+  return result;
+};
+
+export const cacheConfig = {
+  cacheConfig: {
+    typePolicies: {
+      Query: {
+        fields: {
+          ciVariables: {
+            keyArgs: false,
+            merge: mergeVariables,
+          },
+        },
+      },
+      Project: {
+        fields: {
+          ciVariables: {
+            keyArgs: ['fullPath', 'endpoint', 'projectId'],
+            merge: mergeVariables,
+          },
+        },
+      },
+      Group: {
+        fields: {
+          ciVariables: {
+            keyArgs: ['fullPath'],
+            merge: mergeVariables,
+          },
+        },
+      },
+    },
+  },
+};
diff --git a/app/assets/javascripts/ci_variable_list/index.js b/app/assets/javascripts/ci_variable_list/index.js
index f5bdd4c7b1e0262e5fab4f651d11cfa6ca48da71..a55052b650a69af7ce44c37583842ca520fcfae3 100644
--- a/app/assets/javascripts/ci_variable_list/index.js
+++ b/app/assets/javascripts/ci_variable_list/index.js
@@ -6,7 +6,7 @@ import CiAdminVariables from './components/ci_admin_variables.vue';
 import CiGroupVariables from './components/ci_group_variables.vue';
 import CiProjectVariables from './components/ci_project_variables.vue';
 import LegacyCiVariableSettings from './components/legacy_ci_variable_settings.vue';
-import { resolvers } from './graphql/resolvers';
+import { cacheConfig, resolvers } from './graphql/settings';
 import createStore from './store';
 
 const mountCiVariableListApp = (containerEl) => {
@@ -45,7 +45,7 @@ const mountCiVariableListApp = (containerEl) => {
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
-    defaultClient: createDefaultClient(resolvers),
+    defaultClient: createDefaultClient(resolvers, cacheConfig),
   });
 
   return new Vue({
diff --git a/app/assets/javascripts/ci_variable_list/utils.js b/app/assets/javascripts/ci_variable_list/utils.js
index 1faa97a5f73009bc45635665338e8721e03f91e9..eeca69274ce2cfd910e59ebe1b6a0447cc150d85 100644
--- a/app/assets/javascripts/ci_variable_list/utils.js
+++ b/app/assets/javascripts/ci_variable_list/utils.js
@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/browser';
 import { uniq } from 'lodash';
 import { allEnvironments } from './constants';
 
@@ -48,3 +49,12 @@ export const convertEnvironmentScope = (environmentScope = '') => {
 export const mapEnvironmentNames = (nodes = []) => {
   return nodes.map((env) => env.name);
 };
+
+export const reportMessageToSentry = (component, message, context) => {
+  Sentry.withScope((scope) => {
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    scope.setContext('Vue data', context);
+    scope.setTag('component', component);
+    Sentry.captureMessage(message);
+  });
+};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 0742b7bba2bdea7c0d88ce3293dc80bc591f96ba..1ae9f965d0e1b60014404b09701b6c9393d2c32f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -24425,6 +24425,9 @@ msgstr ""
 msgid "Maximum number of unique IP addresses per user."
 msgstr ""
 
+msgid "Maximum number of variables loaded (2000)"
+msgstr ""
+
 msgid "Maximum of 255 characters"
 msgstr ""
 
diff --git a/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
index 920ceaefb70b17474400aa5babda424cd6ec254d..0c28a3703c4dd64fd3b3e5d48f4ae87397c8b775 100644
--- a/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_admin_variables_spec.js
@@ -5,7 +5,7 @@ import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { resolvers } from '~/ci_variable_list/graphql/settings';
 
 import ciAdminVariables from '~/ci_variable_list/components/ci_admin_variables.vue';
 import ciVariableSettings from '~/ci_variable_list/components/ci_variable_settings.vue';
diff --git a/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
index e45656acfd8ae2b101efd0a326048a7e5e0f003c..7f65bd32f40230b9cfc770bc009b86808483fed8 100644
--- a/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_group_variables_spec.js
@@ -5,7 +5,7 @@ import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { resolvers } from '~/ci_variable_list/graphql/settings';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 
 import ciGroupVariables from '~/ci_variable_list/components/ci_group_variables.vue';
diff --git a/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js b/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
index 867f8e0cf8fddb2c6272eba00decf5140dc8db7c..aa6cb12271ace6c73aa44ae565cdcdb852240cf6 100644
--- a/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
+++ b/spec/frontend/ci_variable_list/components/ci_project_variables_spec.js
@@ -5,7 +5,7 @@ import { shallowMount } from '@vue/test-utils';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import createFlash from '~/flash';
-import { resolvers } from '~/ci_variable_list/graphql/resolvers';
+import { resolvers } from '~/ci_variable_list/graphql/settings';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 
 import ciProjectVariables from '~/ci_variable_list/components/ci_project_variables.vue';
diff --git a/spec/frontend/ci_variable_list/mocks.js b/spec/frontend/ci_variable_list/mocks.js
index 6d633c8b7400a41af318507afc2f92234fa14f14..6f3e73f8b83a2b2925d549902ec3cac671c93240 100644
--- a/spec/frontend/ci_variable_list/mocks.js
+++ b/spec/frontend/ci_variable_list/mocks.js
@@ -45,6 +45,12 @@ const createDefaultVars = ({ withScope = true, kind } = {}) => {
 
   return {
     __typename: `Ci${kind}VariableConnection`,
+    pageInfo: {
+      startCursor: 'adsjsd12kldpsa',
+      endCursor: 'adsjsd12kldpsa',
+      hasPreviousPage: false,
+      hasNextPage: true,
+    },
     nodes: base,
   };
 };