feat: migrate from offset pagination to cursor pagination

BREAKING CHANGE: We're now using cursor pagination, which means we no longer have a page and perPage parameters, but rather a "limit" and "after" + "before" cursors.
webiny · Apr 23, 2020 · 0780b11 · 0780b11
1 parent 6413a4e
commit 0780b11
Show file tree

Hide file tree

Showing 26 changed files with 268 additions and 226 deletions.
diff --git a/packages/app-admin/src/components/FileManager/FileManagerContext.tsx b/packages/app-admin/src/components/FileManager/FileManagerContext.tsx
@@ -7,7 +7,7 @@ function init({ accept }) {
         hasPreviouslyUploadedFiles: null,
         queryParams: {
             types: accept,
-            perPage: 50,
+            limit: 50,
             sort: { createdOn: -1 }
         }
     };
@@ -31,7 +31,7 @@ function fileManagerReducer(state, action) {
                 ...state.queryParams,
                 ...action.queryParams,
                 types: state.queryParams.types,
-                perPage: 40,
+                limit: 40,
                 sort: { createdOn: -1 }
             };
             break;

diff --git a/packages/app-admin/src/components/FileManager/graphql.ts b/packages/app-admin/src/components/FileManager/graphql.ts
@@ -15,16 +15,18 @@ const fileFields = /* GraphQL */ `
 `;
 
 export const LIST_FILES = gql`
-     query ListFiles($types: [String], $tags: [String], $sort: JSON, $page: Int, $perPage: Int, $search: String) {
+     query ListFiles($types: [String], $tags: [String], $limit: Int, $search: String, $after: String, $before: String) {
         files {
-            listFiles(types: $types, sort: $sort, page: $page, perPage: $perPage, search: $search, tags: $tags) {
+            listFiles(types: $types, limit: $limit, search: $search, tags: $tags, after: $after, before: $before) {
                 data ${fileFields}
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }

diff --git a/packages/app-form-builder/src/admin/viewsGraphql.ts b/packages/app-form-builder/src/admin/viewsGraphql.ts
@@ -21,18 +21,20 @@ const BASE_FORM_FIELDS = `
 `;
 
 export const LIST_FORMS = gql`
-    query FormsListForms($sort: JSON, $page: Int, $perPage: Int, $search: String) {
+    query FormsListForms($sort: JSON, $limit: Int, $search: String, $after: String, $before: String) {
         forms {
-            listForms(sort: $sort, page: $page, perPage: $perPage, search: $search) {
+            listForms(sort: $sort, limit: $limit, search: $search, after: $after, before: $before) {
                 data {  
                     ${BASE_FORM_FIELDS}
                 }
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }
@@ -90,18 +92,20 @@ export const GET_FORM = gql`
 export const LIST_FORM_SUBMISSIONS = gql`
     query FormsListFormSubmissions(
         $sort: JSON
-        $page: Int
-        $perPage: Int
         $search: String
         $where: JSON
+        $limit: Int
+        $after: String
+        $before: String
     ) {
         forms {
             listFormSubmissions(
                 sort: $sort
-                page: $page
-                perPage: $perPage
                 search: $search
                 where: $where
+                limit: $limit
+                after: $after
+                before: $before
             ) {
                 data {
                     id
@@ -134,11 +138,13 @@ export const LIST_FORM_SUBMISSIONS = gql`
                     }
                 }
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }

diff --git a/packages/app-form-builder/src/page-builder/admin/plugins/components/graphql.js b/packages/app-form-builder/src/page-builder/admin/plugins/components/graphql.js
@@ -3,7 +3,7 @@ import gql from "graphql-tag";
 export const LIST_FORMS = gql`
     query FormsListForms {
         forms {
-            listForms(perPage: 50) {
+            listForms(limit: 50) {
                 data {
                     parent
                     name

diff --git a/packages/app-i18n/src/admin/views/I18NLocales/graphql.ts b/packages/app-i18n/src/admin/views/I18NLocales/graphql.ts
@@ -11,27 +11,31 @@ export const LIST_LOCALES = gql`
     query listI18NLocales(
         $where: JSON
         $sort: JSON
-        $page: Int
-        $perPage: Int
         $search: I18NLocaleSearchInput
+        $limit: Int
+        $after: String
+        $before: String
     ) {
         i18n {
             i18NLocales: listI18NLocales(
                 where: $where
                 sort: $sort
-                page: $page
-                perPage: $perPage
                 search: $search
+                limit: $limit
+                after: $after
+                before: $before
             ) {
                 data {
                     ${BASE_FIELDS}
                 }
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }

diff --git a/packages/app-page-builder/src/admin/graphql/pages.ts b/packages/app-page-builder/src/admin/graphql/pages.ts
@@ -36,9 +36,9 @@ export const CREATE_PAGE = gql`
 `;
 
 export const LIST_PAGES = gql`
-    query PbListPages($sort: JSON, $page: Int, $perPage: Int, $search: String) {
+    query PbListPages($sort: JSON, $search: String, $limit: Int, $after: String, $before: String) {
         pageBuilder {
-            pages: listPages(sort: $sort, page: $page, perPage: $perPage, search: $search) {
+            pages: listPages(sort: $sort, search: $search, limit: $limit, after: $after, before: $before) {
                 data {
                     ${sharedFields}
                     category {
@@ -51,11 +51,13 @@ export const LIST_PAGES = gql`
                     }
                 }
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }
@@ -154,7 +156,7 @@ const elementFields = /*GraphQL*/ `
 export const LIST_ELEMENTS = gql`
     query PbListElements {
         pageBuilder {
-            elements: listElements(perPage: 1000) {
+            elements: listElements(limit: 1000) {
                 data {
                     ${elementFields}
                 }

diff --git a/packages/app-page-builder/src/admin/views/Categories/graphql.ts b/packages/app-page-builder/src/admin/views/Categories/graphql.ts
@@ -12,17 +12,19 @@ export const LIST_CATEGORIES = gql`
     query PbLoadCategories(
         $where: JSON
         $sort: JSON
-        $page: Int
-        $perPage: Int
         $search: PbSearchInput
+        $limit: Int
+        $after: String
+        $before: String
     ) {
         pageBuilder {
             categories: listCategories(
                 where: $where
                 sort: $sort
-                page: $page
-                perPage: $perPage
                 search: $search
+                limit: $limit
+                after: $after
+                before: $before
             ) {
                 data {
                     id
@@ -32,11 +34,13 @@ export const LIST_CATEGORIES = gql`
                     createdOn
                 }
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }
@@ -46,7 +50,7 @@ export const LIST_CATEGORIES = gql`
 export const LIST_CATEGORIES_BY_NAME = gql`
     query PbListCategoriesByName {
         pageBuilder {
-            categories: listCategories(sort: { name: 1 }, perPage: 100) {
+            categories: listCategories(sort: { name: 1 }, limit: 100) {
                 data {
                     id
                     name

diff --git a/packages/app-page-builder/src/admin/views/Menus/graphql.ts b/packages/app-page-builder/src/admin/views/Menus/graphql.ts
@@ -9,14 +9,22 @@ const fields = `
 `;
 
 export const LIST_MENUS = gql`
-    query listMenus($where: JSON, $sort: JSON, $page: Int, $perPage: Int, $search: PbSearchInput) {
+    query listMenus(
+        $where: JSON
+        $sort: JSON
+        $search: PbSearchInput
+        $limit: Int
+        $after: String
+        $before: String
+    ) {
         pageBuilder {
             menus: listMenus(
                 where: $where
                 sort: $sort
-                page: $page
-                perPage: $perPage
                 search: $search
+                limit: $limit
+                after: $after
+                before: $before
             ) {
                 data {
                     id
@@ -26,12 +34,13 @@ export const LIST_MENUS = gql`
                     createdOn
                 }
                 meta {
+                    cursors {
+                        next
+                        previous
+                    }
+                    hasNextPage
+                    hasPreviousPage
                     totalCount
-                    totalPages
-                    to
-                    from
-                    nextPage
-                    previousPage
                 }
             }
         }

diff --git a/packages/app-page-builder/src/editor/plugins/elements/pagesList/PagesList.tsx b/packages/app-page-builder/src/editor/plugins/elements/pagesList/PagesList.tsx
@@ -34,9 +34,9 @@ const PagesList = ({ data }) => {
         sort,
         tags: vars.tags,
         tagsRule: vars.tagsRule,
-        perPage: parseInt(vars.resultsPerPage),
-        pagesLimit: parseInt(vars.pagesLimit),
-        page: 1
+        limit: parseInt(vars.resultsPerPage),
+        after: undefined,
+        before: undefined
     };
 
     return (
@@ -53,15 +53,13 @@ const PagesList = ({ data }) => {
                 }
 
                 let prevPage = null;
-                if (pages.meta.previousPage !== null) {
-                    prevPage = () => refetch({ ...variables, page: pages.meta.previousPage });
+                if (pages.meta.hasPreviousPage) {
+                    prevPage = () => refetch({ ...variables, before: pages.meta.cursors.before });
                 }
 
                 let nextPage = null;
-                if (pages.meta.nextPage !== null) {
-                    if (!variables.pagesLimit || variables.pagesLimit >= pages.meta.nextPage) {
-                        nextPage = () => refetch({ ...variables, page: pages.meta.nextPage });
-                    }
+                if (pages.meta.hasNextPage) {
+                    nextPage = () => refetch({ ...variables, after: pages.meta.cursors.after });
                 }
 
                 return (

diff --git a/packages/app-page-builder/src/editor/plugins/elements/pagesList/PagesListFilterSettings.tsx b/packages/app-page-builder/src/editor/plugins/elements/pagesList/PagesListFilterSettings.tsx
@@ -1,28 +1,18 @@
 import * as React from "react";
 import { Grid, Cell } from "@webiny/ui/Grid";
-import { Input } from "@webiny/ui/Input";
 import { Select } from "@webiny/ui/Select";
 import { TagsMultiAutocomplete } from "@webiny/app-page-builder/admin/components/TagsMultiAutocomplete";
 import { CategoriesAutocomplete } from "@webiny/app-page-builder/admin/components/CategoriesAutocomplete";
-import { validation } from "@webiny/validation";
 
 const PagesListFilterSettings = ({ Bind }) => {
     return (
         <React.Fragment>
             <Grid>
-                <Cell span={6}>
+                <Cell span={12}>
                     <Bind name={"category"}>
                         <CategoriesAutocomplete label="Category" />
                     </Bind>
                 </Cell>
-                <Cell span={6}>
-                    <Bind name={"pagesLimit"} validators={validation.create("numeric")}>
-                        <Input
-                            label={"Number of pages to show"}
-                            description={"Leave empty to show all"}
-                        />
-                    </Bind>
-                </Cell>
                 <Cell span={6}>
                     <Bind name={"sortBy"} defaultValue={"publishedOn"}>
                         <Select label={"Sort by"}>