Geo Package Files - Set up GraphQL and pagination

This splits off from:
https://gitlab.com/gitlab-org/gitlab/-/merge_requests/32872

This is an attempt at MVC to avoid a
massive MR.

This commit hooks up the GraphQL actions
and updates the approach to pagination.

There will be future commits/MRs to implement the rest of the above
listed MR.

ee/app/assets/javascripts/geo_replicable/components/app.vue

@@ -24,9 +24,9 @@ export default {
     },
   },
   computed: {
-    ...mapState(['isLoading', 'totalReplicableItems']),
+    ...mapState(['isLoading', 'paginationData']),
     hasReplicableItems() {
-      return this.totalReplicableItems > 0;
+      return this.paginationData.total > 0;
     },
   },
   created() {

ee/app/assets/javascripts/geo_replicable/components/geo_replicable.vue

@@ -10,10 +10,10 @@ export default {
     GeoReplicableItem,
   },
   computed: {
-    ...mapState(['replicableItems', 'currentPage', 'pageSize', 'totalReplicableItems']),
+    ...mapState(['replicableItems', 'paginationData']),
     page: {
       get() {
-        return this.currentPage;
+        return this.paginationData.page;
       },
       set(newVal) {
         this.setPage(newVal);
@@ -21,7 +21,7 @@ export default {
       },
     },
     hasReplicableItems() {
-      return this.totalReplicableItems > 0;
+      return this.paginationData.total > 0;
     },
   },
   methods: {
@@ -45,8 +45,8 @@ export default {
     <gl-pagination
       v-if="hasReplicableItems"
       v-model="page"
-      :per-page="pageSize"
-      :total-items="totalReplicableItems"
+      :per-page="paginationData.perPage"
+      :total-items="paginationData.total"
       align="center"
     />
   </section>

ee/app/assets/javascripts/geo_replicable/components/geo_replicable_filter_bar.vue

@@ -3,7 +3,7 @@ import { mapActions, mapState, mapGetters } from 'vuex';
 import { debounce } from 'lodash';
 import { GlSearchBoxByType, GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
-import { DEFAULT_SEARCH_DELAY, ACTION_TYPES, FILTER_STATES } from '../store/constants';
+import { DEFAULT_SEARCH_DELAY, ACTION_TYPES, FILTER_STATES } from '../constants';
 
 export default {
   name: 'GeoReplicableFilterBar',

ee/app/assets/javascripts/geo_replicable/components/geo_replicable_item.vue

@@ -2,7 +2,7 @@
 import { mapActions } from 'vuex';
 import { GlLink, GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { ACTION_TYPES } from '../store/constants';
+import { ACTION_TYPES } from '../constants';
 import GeoReplicableStatus from './geo_replicable_status.vue';
 import GeoReplicableTimeAgo from './geo_replicable_time_ago.vue';
 

ee/app/assets/javascripts/geo_replicable/components/geo_replicable_status.vue

 <script>
-import { STATUS_ICON_NAMES, STATUS_ICON_CLASS, DEFAULT_STATUS } from '../store/constants';
+import { STATUS_ICON_NAMES, STATUS_ICON_CLASS, DEFAULT_STATUS } from '../constants';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {

ee/app/assets/javascripts/geo_replicable/store/constants.js → ee/app/assets/javascripts/geo_replicable/constants.js

@@ -43,3 +43,7 @@ export const ACTION_TYPES = {
   REVERIFY: 'reverify',
   FORCE_REDOWNLOAD: 'force_redownload',
 };
+
+export const PREV = 'prev';
+
+export const NEXT = 'next';

ee/app/assets/javascripts/geo_replicable/index.js

 import Vue from 'vue';
 import Translate from '~/vue_shared/translate';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import createStore from './store';
 import GeoReplicableApp from './components/app.vue';
 
@@ -7,30 +8,21 @@ Vue.use(Translate);
 
 export default () => {
   const el = document.getElementById('js-geo-replicable');
-  const { replicableType } = el.dataset;
+  const { replicableType, geoTroubleshootingLink, geoReplicableEmptySvgPath } = el.dataset;
+  const useGraphQl = parseBoolean(el.dataset.graphql);
 
   return new Vue({
     el,
-    store: createStore(replicableType),
+    store: createStore({ replicableType, useGraphQl }),
     components: {
       GeoReplicableApp,
     },
-    data() {
-      const {
-        dataset: { geoTroubleshootingLink, geoReplicableEmptySvgPath },
-      } = this.$options.el;
-
-      return {
-        geoTroubleshootingLink,
-        geoReplicableEmptySvgPath,
-      };
-    },
 
     render(createElement) {
       return createElement('geo-replicable-app', {
         props: {
-          geoTroubleshootingLink: this.geoTroubleshootingLink,
-          geoReplicableEmptySvgPath: this.geoReplicableEmptySvgPath,
+          geoTroubleshootingLink,
+          geoReplicableEmptySvgPath,
         },
       });
     },

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

@@ -10,7 +10,7 @@ import {
 import packageFilesQuery from '../graphql/package_files.query.graphql';
 import { gqClient } from '../utils';
 import * as types from './mutation_types';
-import { FILTER_STATES } from './constants';
+import { FILTER_STATES, PREV, NEXT } from '../constants';
 
 // Fetch Replicable Items
 export const requestReplicableItems = ({ commit }) => commit(types.REQUEST_REPLICABLE_ITEMS);
@@ -25,24 +25,35 @@ export const receiveReplicableItemsError = ({ state, commit }) => {
   commit(types.RECEIVE_REPLICABLE_ITEMS_ERROR);
 };
 
-export const fetchReplicableItems = ({ state, dispatch }) => {
+export const fetchReplicableItems = ({ state, dispatch }, direction) => {
   dispatch('requestReplicableItems');
 
   return state.useGraphQl
-    ? dispatch('fetchReplicableItemsGraphQl')
+    ? dispatch('fetchReplicableItemsGraphQl', direction)
     : dispatch('fetchReplicableItemsRestful');
 };
 
-export const fetchReplicableItemsGraphQl = ({ dispatch }) => {
+export const fetchReplicableItemsGraphQl = ({ state, dispatch }, direction) => {
+  let before = '';
+  let after = '';
+
+  if (direction === PREV) {
+    before = state.paginationData.startCursor;
+  } else if (direction === NEXT) {
+    after = state.paginationData.endCursor;
+  }
+
   gqClient
     .query({
       query: packageFilesQuery,
+      variables: { before, after },
     })
     .then(res => {
       const registries = res.data.geoNode.packageFileRegistries;
       const data = registries.edges.map(e => e.node);
+      const pagination = registries.pageInfo;
 
-      dispatch('receiveReplicableItemsSuccess', { data });
+      dispatch('receiveReplicableItemsSuccess', { data, pagination });
     })
     .catch(() => {
       dispatch('receiveReplicableItemsError');
@@ -50,12 +61,12 @@ export const fetchReplicableItemsGraphQl = ({ dispatch }) => {
 };
 
 export const fetchReplicableItemsRestful = ({ state, dispatch }) => {
-  const { filterOptions, currentFilterIndex, currentPage, searchFilter } = state;
+  const { filterOptions, currentFilterIndex, searchFilter, paginationData } = state;
 
   const statusFilter = currentFilterIndex ? filterOptions[currentFilterIndex] : filterOptions[0];
 
   const query = {
-    page: currentPage,
+    page: paginationData.page,
     search: searchFilter || null,
     sync_status: statusFilter.value === FILTER_STATES.ALL.value ? null : statusFilter.value,
   };
@@ -63,14 +74,10 @@ export const fetchReplicableItemsRestful = ({ state, dispatch }) => {
   Api.getGeoReplicableItems(state.replicableType, query)
     .then(res => {
       const normalizedHeaders = normalizeHeaders(res.headers);
-      const paginationInformation = parseIntPagination(normalizedHeaders);
-      const camelCaseData = convertObjectPropsToCamelCase(res.data, { deep: true });
-
-      dispatch('receiveReplicableItemsSuccess', {
-        data: camelCaseData,
-        perPage: paginationInformation.perPage,
-        total: paginationInformation.total,
-      });
+      const pagination = parseIntPagination(normalizedHeaders);
+      const data = convertObjectPropsToCamelCase(res.data, { deep: true });
+
+      dispatch('receiveReplicableItemsSuccess', { data, pagination });
     })
     .catch(() => {
       dispatch('receiveReplicableItemsError');

ee/app/assets/javascripts/geo_replicable/store/index.js

@@ -7,11 +7,11 @@ import createState from './state';
 
 Vue.use(Vuex);
 
-const createStore = replicableType =>
+const createStore = ({ replicableType, useGraphQl }) =>
   new Vuex.Store({
     actions,
     getters,
     mutations,
-    state: createState(replicableType),
+    state: createState({ replicableType, useGraphQl }),
   });
 export default createStore;

ee/app/assets/javascripts/geo_replicable/store/mutations.js

@@ -2,30 +2,28 @@ import * as types from './mutation_types';
 
 export default {
   [types.SET_FILTER](state, filterIndex) {
-    state.currentPage = 1;
+    state.paginationData.page = 1;
     state.currentFilterIndex = filterIndex;
   },
   [types.SET_SEARCH](state, search) {
-    state.currentPage = 1;
+    state.paginationData.page = 1;
     state.searchFilter = search;
   },
   [types.SET_PAGE](state, page) {
-    state.currentPage = page;
+    state.paginationData.page = page;
   },
   [types.REQUEST_REPLICABLE_ITEMS](state) {
     state.isLoading = true;
   },
-  [types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, { data, perPage, total }) {
+  [types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, { data, pagination }) {
     state.isLoading = false;
     state.replicableItems = data;
-    state.pageSize = perPage;
-    state.totalReplicableItems = total;
+    state.paginationData = pagination;
   },
   [types.RECEIVE_REPLICABLE_ITEMS_ERROR](state) {
     state.isLoading = false;
     state.replicableItems = [];
-    state.pageSize = 0;
-    state.totalReplicableItems = 0;
+    state.paginationData = {};
   },
   [types.REQUEST_INITIATE_ALL_REPLICABLE_SYNCS](state) {
     state.isLoading = true;

ee/app/assets/javascripts/geo_replicable/store/state.js

-import { FILTER_STATES } from './constants';
+import { FILTER_STATES } from '../constants';
 
-const createState = replicableType => ({
+const createState = ({ replicableType, useGraphQl }) => ({
   replicableType,
-  useGraphQl: false,
+  useGraphQl,
   isLoading: false,
 
   replicableItems: [],
-  totalReplicableItems: 0,
-  pageSize: 0,
-  currentPage: 1,
+  paginationData: {
+    // GraphQL
+    hasNextPage: false,
+    hasPreviousPage: false,
+    startCursor: '',
+    endCursor: '',
+    // RESTful
+    total: 0,
+    perPage: 0,
+    page: 1,
+  },
 
   searchFilter: '',
   currentFilterIndex: 0,

ee/spec/frontend/geo_replicable/components/app_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
 import GeoReplicableApp from 'ee/geo_replicable/components/app.vue';
-import store from 'ee/geo_replicable/store';
+import createStore from 'ee/geo_replicable/store';
 import GeoReplicable from 'ee/geo_replicable/components/geo_replicable.vue';
 import GeoReplicableEmptyState from 'ee/geo_replicable/components/geo_replicable_empty_state.vue';
 import GeoReplicableFilterBar from 'ee/geo_replicable/components/geo_replicable_filter_bar.vue';
@@ -10,6 +10,7 @@ import {
   MOCK_GEO_REPLICATION_SVG_PATH,
   MOCK_GEO_TROUBLESHOOTING_LINK,
   MOCK_BASIC_FETCH_DATA_MAP,
+  MOCK_REPLICABLE_TYPE,
 } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -31,7 +32,7 @@ describe('GeoReplicableApp', () => {
   const createComponent = () => {
     wrapper = shallowMount(GeoReplicableApp, {
       localVue,
-      store,
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       propsData,
       methods: {
         ...actionSpies,
@@ -90,7 +91,7 @@ describe('GeoReplicableApp', () => {
       describe('with replicableItems', () => {
         beforeEach(() => {
           wrapper.vm.$store.state.replicableItems = MOCK_BASIC_FETCH_DATA_MAP;
-          wrapper.vm.$store.state.totalReplicableItems =
+          wrapper.vm.$store.state.paginationData.total =
             wrapper.vm.$store.state.replicableItems.length;
         });
 
@@ -110,7 +111,7 @@ describe('GeoReplicableApp', () => {
       describe('with no replicableItems', () => {
         beforeEach(() => {
           wrapper.vm.$store.state.replicableItems = [];
-          wrapper.vm.$store.state.totalReplicableItems = 0;
+          wrapper.vm.$store.state.paginationData.total = 0;
         });
 
         it('hides replicable items', () => {

ee/spec/frontend/geo_replicable/components/geo_replicable_empty_state_spec.js

@@ -23,7 +23,7 @@ describe('GeoReplicableEmptyState', () => {
   const createComponent = () => {
     wrapper = shallowMount(GeoReplicableEmptyState, {
       localVue,
-      store: createStore(MOCK_REPLICABLE_TYPE),
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       propsData,
     });
   };

ee/spec/frontend/geo_replicable/components/geo_replicable_filter_bar_spec.js

@@ -3,7 +3,7 @@ import { createLocalVue, mount } from '@vue/test-utils';
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlButton } from '@gitlab/ui';
 import GeoReplicableFilterBar from 'ee/geo_replicable/components/geo_replicable_filter_bar.vue';
 import createStore from 'ee/geo_replicable/store';
-import { DEFAULT_SEARCH_DELAY } from 'ee/geo_replicable/store/constants';
+import { DEFAULT_SEARCH_DELAY } from 'ee/geo_replicable/constants';
 import { MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 const localVue = createLocalVue();
@@ -22,7 +22,7 @@ describe('GeoReplicableFilterBar', () => {
   const createComponent = () => {
     wrapper = mount(GeoReplicableFilterBar, {
       localVue,
-      store: createStore(MOCK_REPLICABLE_TYPE),
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       methods: {
         ...actionSpies,
       },

ee/spec/frontend/geo_replicable/components/geo_replicable_item_spec.js

@@ -2,9 +2,9 @@ import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
 import { GlLink, GlButton } from '@gitlab/ui';
 import GeoReplicableItem from 'ee/geo_replicable/components/geo_replicable_item.vue';
-import store from 'ee/geo_replicable/store';
-import { ACTION_TYPES } from 'ee/geo_replicable/store/constants';
-import { MOCK_BASIC_FETCH_DATA_MAP } from '../mock_data';
+import createStore from 'ee/geo_replicable/store';
+import { ACTION_TYPES } from 'ee/geo_replicable/constants';
+import { MOCK_BASIC_FETCH_DATA_MAP, MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -29,7 +29,7 @@ describe('GeoReplicableItem', () => {
   const createComponent = () => {
     wrapper = mount(GeoReplicableItem, {
       localVue,
-      store,
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       propsData,
       methods: {
         ...actionSpies,

ee/spec/frontend/geo_replicable/components/geo_replicable_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
 import { GlPagination } from '@gitlab/ui';
-import store from 'ee/geo_replicable/store';
+import createStore from 'ee/geo_replicable/store';
 import GeoReplicable from 'ee/geo_replicable/components/geo_replicable.vue';
 import GeoReplicableItem from 'ee/geo_replicable/components/geo_replicable_item.vue';
-import { MOCK_BASIC_FETCH_DATA_MAP } from '../mock_data';
+import { MOCK_BASIC_FETCH_DATA_MAP, MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -20,7 +20,7 @@ describe('GeoReplicable', () => {
   const createComponent = () => {
     wrapper = mount(GeoReplicable, {
       localVue,
-      store,
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       methods: {
         ...actionSpies,
       },
@@ -45,10 +45,10 @@ describe('GeoReplicable', () => {
     });
 
     describe('GlPagination', () => {
-      describe('when pageSize >= totalReplicableItems', () => {
+      describe('when perPage >= total', () => {
         beforeEach(() => {
-          wrapper.vm.$store.state.pageSize = 2;
-          wrapper.vm.$store.state.totalReplicableItems = 1;
+          wrapper.vm.$store.state.paginationData.perPage = 2;
+          wrapper.vm.$store.state.paginationData.total = 1;
         });
 
         it('is hidden', () => {
@@ -56,10 +56,10 @@ describe('GeoReplicable', () => {
         });
       });
 
-      describe('when pageSize < totalReplicableItems', () => {
+      describe('when perPage < total', () => {
         beforeEach(() => {
-          wrapper.vm.$store.state.pageSize = 1;
-          wrapper.vm.$store.state.totalReplicableItems = 2;
+          wrapper.vm.$store.state.paginationData.perPage = 1;
+          wrapper.vm.$store.state.paginationData.total = 2;
         });
 
         it('renders', () => {

ee/spec/frontend/geo_replicable/components/geo_replicable_status_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
-import store from 'ee/geo_replicable/store';
+import createStore from 'ee/geo_replicable/store';
 import GeoReplicableStatus from 'ee/geo_replicable/components/geo_replicable_status.vue';
 import {
   FILTER_STATES,
   STATUS_ICON_NAMES,
   STATUS_ICON_CLASS,
   DEFAULT_STATUS,
-} from 'ee/geo_replicable/store/constants';
+} from 'ee/geo_replicable/constants';
 import Icon from '~/vue_shared/components/icon.vue';
+import { MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -23,7 +24,7 @@ describe('GeoReplicableStatus', () => {
   const createComponent = () => {
     wrapper = mount(GeoReplicableStatus, {
       localVue,
-      store,
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       propsData,
     });
   };

ee/spec/frontend/geo_replicable/components/geo_replicable_time_ago_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, mount } from '@vue/test-utils';
-import store from 'ee/geo_replicable/store';
+import createStore from 'ee/geo_replicable/store';
 import GeoReplicableTimeAgo from 'ee/geo_replicable/components/geo_replicable_time_ago.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
+import { MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -19,7 +20,7 @@ describe('GeoReplicableTimeAgo', () => {
   const createComponent = () => {
     wrapper = mount(GeoReplicableTimeAgo, {
       localVue,
-      store,
+      store: createStore({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false }),
       propsData,
     });
   };

ee/spec/frontend/geo_replicable/store/actions_spec.js

@@ -6,7 +6,7 @@ import Api from 'ee/api';
 import * as actions from 'ee/geo_replicable/store/actions';
 import * as types from 'ee/geo_replicable/store/mutation_types';
 import createState from 'ee/geo_replicable/store/state';
-import { ACTION_TYPES } from 'ee/geo_replicable/store/constants';
+import { ACTION_TYPES, PREV, NEXT } from 'ee/geo_replicable/constants';
 import { gqClient } from 'ee/geo_replicable/utils';
 import packageFilesQuery from 'ee/geo_replicable/graphql/package_files.query.graphql';
 import {
@@ -16,6 +16,7 @@ import {
   MOCK_REPLICABLE_TYPE,
   MOCK_RESTFUL_PAGINATION_DATA,
   MOCK_BASIC_GRAPHQL_QUERY_RESPONSE,
+  MOCK_GRAPHQL_PAGINATION_DATA,
 } from '../mock_data';
 
 jest.mock('~/flash');
@@ -25,7 +26,7 @@ describe('GeoReplicable Store Actions', () => {
   let state;
 
   beforeEach(() => {
-    state = createState(MOCK_REPLICABLE_TYPE);
+    state = createState({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false });
   });
 
   describe('requestReplicableItems', () => {
@@ -86,7 +87,10 @@ describe('GeoReplicable Store Actions', () => {
           null,
           state,
           [],
-          [{ type: 'requestReplicableItems' }, { type: 'fetchReplicableItemsGraphQl' }],
+          [
+            { type: 'requestReplicableItems' },
+            { type: 'fetchReplicableItemsGraphQl', payload: null },
+          ],
           done,
         );
       });
@@ -112,33 +116,92 @@ describe('GeoReplicable Store Actions', () => {
 
   describe('fetchReplicableItemsGraphQl', () => {
     describe('on success', () => {
-      const registries = MOCK_BASIC_GRAPHQL_QUERY_RESPONSE.geoNode?.packageFileRegistries;
-      const data = registries.edges.map(e => e.node);
-
       beforeEach(() => {
         jest.spyOn(gqClient, 'query').mockResolvedValue({
           data: MOCK_BASIC_GRAPHQL_QUERY_RESPONSE,
         });
+        state.paginationData = MOCK_GRAPHQL_PAGINATION_DATA;
       });
 
-      it('should call gqClient with no before/after variables', () => {
-        testAction(
-          actions.fetchReplicableItemsGraphQl,
-          null,
-          state,
-          [],
-          [
-            {
-              type: 'receiveReplicableItemsSuccess',
-              payload: { data },
+      describe('with no direction set', () => {
+        const direction = null;
+        const registries = MOCK_BASIC_GRAPHQL_QUERY_RESPONSE.geoNode?.packageFileRegistries;
+        const data = registries.edges.map(e => e.node);
+
+        it('should call gqClient with no before/after variables', () => {
+          testAction(
+            actions.fetchReplicableItemsGraphQl,
+            direction,
+            state,
+            [],
+            [
+              {
+                type: 'receiveReplicableItemsSuccess',
+                payload: { data, pagination: registries.pageInfo },
+              },
+            ],
+            () => {
+              expect(gqClient.query).toHaveBeenCalledWith({
+                query: packageFilesQuery,
+                variables: { before: '', after: '' },
+              });
             },
-          ],
-          () => {
-            expect(gqClient.query).toHaveBeenCalledWith({
-              query: packageFilesQuery,
-            });
-          },
-        );
+          );
+        });
+      });
+
+      describe('with direction set to "next"', () => {
+        const direction = NEXT;
+        const registries = MOCK_BASIC_GRAPHQL_QUERY_RESPONSE.geoNode?.packageFileRegistries;
+        const data = registries.edges.map(e => e.node);
+
+        it('should call gqClient with after variable but no before variable', () => {
+          testAction(
+            actions.fetchReplicableItemsGraphQl,
+            direction,
+            state,
+            [],
+            [
+              {
+                type: 'receiveReplicableItemsSuccess',
+                payload: { data, pagination: registries.pageInfo },
+              },
+            ],
+            () => {
+              expect(gqClient.query).toHaveBeenCalledWith({
+                query: packageFilesQuery,
+                variables: { before: '', after: MOCK_GRAPHQL_PAGINATION_DATA.endCursor },
+              });
+            },
+          );
+        });
+      });
+
+      describe('with direction set to "prev"', () => {
+        const direction = PREV;
+        const registries = MOCK_BASIC_GRAPHQL_QUERY_RESPONSE.geoNode?.packageFileRegistries;
+        const data = registries.edges.map(e => e.node);
+
+        it('should call gqClient with before variable but no after variable', () => {
+          testAction(
+            actions.fetchReplicableItemsGraphQl,
+            direction,
+            state,
+            [],
+            [
+              {
+                type: 'receiveReplicableItemsSuccess',
+                payload: { data, pagination: registries.pageInfo },
+              },
+            ],
+            () => {
+              expect(gqClient.query).toHaveBeenCalledWith({
+                query: packageFilesQuery,
+                variables: { before: MOCK_GRAPHQL_PAGINATION_DATA.startCursor, after: '' },
+              });
+            },
+          );
+        });
       });
     });
 
@@ -185,11 +248,7 @@ describe('GeoReplicable Store Actions', () => {
             [
               {
                 type: 'receiveReplicableItemsSuccess',
-                payload: {
-                  data: MOCK_BASIC_FETCH_DATA_MAP,
-                  perPage: pagination.perPage,
-                  total: pagination.total,
-                },
+                payload: { data: MOCK_BASIC_FETCH_DATA_MAP, pagination },
               },
             ],
             () => {
@@ -204,7 +263,7 @@ describe('GeoReplicable Store Actions', () => {
 
       describe('with params set', () => {
         beforeEach(() => {
-          state.currentPage = 3;
+          state.paginationData.page = 3;
           state.searchFilter = 'test search';
           state.currentFilterIndex = 2;
         });
@@ -218,11 +277,7 @@ describe('GeoReplicable Store Actions', () => {
             [
               {
                 type: 'receiveReplicableItemsSuccess',
-                payload: {
-                  data: MOCK_BASIC_FETCH_DATA_MAP,
-                  perPage: pagination.perPage,
-                  total: pagination.total,
-                },
+                payload: { data: MOCK_BASIC_FETCH_DATA_MAP, pagination },
               },
             ],
             () => {
@@ -488,7 +543,7 @@ describe('GeoReplicable Store Actions', () => {
 
   describe('setPage', () => {
     it('should commit mutation SET_PAGE', done => {
-      state.currentPage = 1;
+      state.paginationData.page = 1;
 
       const testValue = 2;
 

ee/spec/frontend/geo_replicable/store/getters_spec.js

 import * as getters from 'ee/geo_replicable/store/getters';
 import createState from 'ee/geo_replicable/store/state';
+import { MOCK_REPLICABLE_TYPE } from '../mock_data';
 
 describe('GeoReplicable Store Getters', () => {
   let state;
 
   beforeEach(() => {
-    state = createState();
+    state = createState({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false });
   });
 
   describe('replicableTypeName', () => {

ee/spec/frontend/geo_replicable/store/mutations_spec.js

 import mutations from 'ee/geo_replicable/store/mutations';
 import createState from 'ee/geo_replicable/store/state';
 import * as types from 'ee/geo_replicable/store/mutation_types';
-import { MOCK_BASIC_FETCH_DATA_MAP } from '../mock_data';
+import {
+  MOCK_BASIC_FETCH_DATA_MAP,
+  MOCK_REPLICABLE_TYPE,
+  MOCK_RESTFUL_PAGINATION_DATA,
+  MOCK_GRAPHQL_PAGINATION_DATA,
+} from '../mock_data';
 
 describe('GeoReplicable Store Mutations', () => {
   let state;
   beforeEach(() => {
-    state = createState();
+    state = createState({ replicableType: MOCK_REPLICABLE_TYPE, useGraphQl: false });
   });
 
   describe('SET_FILTER', () => {
@@ -14,7 +19,7 @@ describe('GeoReplicable Store Mutations', () => {
 
     beforeEach(() => {
       state.currentFilterIndex = 1;
-      state.currentPage = 2;
+      state.paginationData.page = 2;
 
       mutations[types.SET_FILTER](state, testValue);
     });
@@ -24,7 +29,7 @@ describe('GeoReplicable Store Mutations', () => {
     });
 
     it('resets the page to 1', () => {
-      expect(state.currentPage).toEqual(1);
+      expect(state.paginationData.page).toEqual(1);
     });
   });
 
@@ -32,7 +37,7 @@ describe('GeoReplicable Store Mutations', () => {
     const testValue = 'test search';
 
     beforeEach(() => {
-      state.currentPage = 2;
+      state.paginationData.page = 2;
 
       mutations[types.SET_SEARCH](state, testValue);
     });
@@ -42,16 +47,16 @@ describe('GeoReplicable Store Mutations', () => {
     });
 
     it('resets the page to 1', () => {
-      expect(state.currentPage).toEqual(1);
+      expect(state.paginationData.page).toEqual(1);
     });
   });
 
   describe('SET_PAGE', () => {
-    it('sets the currentPage state key', () => {
+    it('sets the page state key', () => {
       const testValue = 2;
 
       mutations[types.SET_PAGE](state, testValue);
-      expect(state.currentPage).toEqual(testValue);
+      expect(state.paginationData.page).toEqual(testValue);
     });
   });
 
@@ -64,27 +69,76 @@ describe('GeoReplicable Store Mutations', () => {
 
   describe('RECEIVE_REPLICABLE_ITEMS_SUCCESS', () => {
     let mockData = {};
+    let mockPaginationData = {};
 
-    beforeEach(() => {
-      mockData = MOCK_BASIC_FETCH_DATA_MAP;
-    });
+    describe('with RESTful pagination', () => {
+      beforeEach(() => {
+        mockData = MOCK_BASIC_FETCH_DATA_MAP;
+        mockPaginationData = MOCK_RESTFUL_PAGINATION_DATA;
+      });
 
-    it('sets isLoading to false', () => {
-      state.isLoading = true;
+      it('sets isLoading to false', () => {
+        state.isLoading = true;
 
-      mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, mockData);
-      expect(state.isLoading).toEqual(false);
-    });
+        mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, {
+          data: mockData,
+          pagination: mockPaginationData,
+        });
+        expect(state.isLoading).toEqual(false);
+      });
+
+      it('sets replicableItems array with data', () => {
+        mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, {
+          data: mockData,
+          pagination: mockPaginationData,
+        });
+        expect(state.replicableItems).toBe(mockData);
+      });
 
-    it('sets replicableItems array with data', () => {
-      mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, mockData);
-      expect(state.replicableItems).toBe(mockData.data);
+      it('sets perPage and total', () => {
+        mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, {
+          data: mockData,
+          pagination: mockPaginationData,
+        });
+        expect(state.paginationData.perPage).toEqual(mockPaginationData.perPage);
+        expect(state.paginationData.total).toEqual(mockPaginationData.total);
+      });
     });
 
-    it('sets pageSize and totalReplicableItems', () => {
-      mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, mockData);
-      expect(state.pageSize).toEqual(mockData.perPage);
-      expect(state.totalReplicableItems).toEqual(mockData.total);
+    describe('with GraphQL pagination', () => {
+      beforeEach(() => {
+        mockData = MOCK_BASIC_FETCH_DATA_MAP;
+        mockPaginationData = MOCK_GRAPHQL_PAGINATION_DATA;
+      });
+
+      it('sets isLoading to false', () => {
+        state.isLoading = true;
+
+        mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, {
+          data: mockData,
+          pagination: mockPaginationData,
+        });
+        expect(state.isLoading).toEqual(false);
+      });
+
+      it('sets replicableItems array with data', () => {
+        mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, {
+          data: mockData,
+          pagination: mockPaginationData,
+        });
+        expect(state.replicableItems).toBe(mockData);
+      });
+
+      it('sets hasNextPage, hasPreviousPage, startCursor, and endCursor', () => {
+        mutations[types.RECEIVE_REPLICABLE_ITEMS_SUCCESS](state, {
+          data: mockData,
+          pagination: mockPaginationData,
+        });
+        expect(state.paginationData.hasNextPage).toEqual(mockPaginationData.hasNextPage);
+        expect(state.paginationData.hasPreviousPage).toEqual(mockPaginationData.hasPreviousPage);
+        expect(state.paginationData.startCursor).toEqual(mockPaginationData.startCursor);
+        expect(state.paginationData.endCursor).toEqual(mockPaginationData.endCursor);
+      });
     });
   });
 
@@ -110,12 +164,8 @@ describe('GeoReplicable Store Mutations', () => {
     });
 
     it('resets pagination data', () => {
-      state.pageSize = mockData.perPage;
-      state.totalReplicableItems = mockData.total;
-
       mutations[types.RECEIVE_REPLICABLE_ITEMS_ERROR](state);
-      expect(state.pageSize).toEqual(0);
-      expect(state.totalReplicableItems).toEqual(0);
+      expect(state.paginationData).toEqual({});
     });
   });