Merge branch 'master' into add/plugin-fields

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix minor bugs - #244 by @dominik-zeglen
 - Fix tax settings updating - #243 by @dominik-zeglen
 - Add secret fields in plugin configuration - #246 by @dominik-zeglen
+- Fix subcategories pagination - #249 by @dominik-zeglen
 
 ## 2.0.0
 

src/categories/fixtures.ts

@@ -93,7 +93,14 @@ export const category: (
   },
   children: {
     __typename: "CategoryCountableConnection",
-    edges: []
+    edges: [],
+    pageInfo: {
+      __typename: "PageInfo",
+      endCursor: "YXJyYXljb25uZWN0aW9uOjk=",
+      hasNextPage: false,
+      hasPreviousPage: false,
+      startCursor: "YXJyYXljb25uZWN0aW9uOjA="
+    }
   },
   descriptionJson: JSON.stringify(content),
   id: "Q2F0ZWdvcnk6NA==",

src/categories/queries.ts

@@ -1,6 +1,6 @@
 import gql from "graphql-tag";
 
-import { TypedQuery } from "../queries";
+import { pageInfoFragment, TypedQuery } from "../queries";
 import {
   CategoryDetails,
   CategoryDetailsVariables
@@ -38,6 +38,7 @@ export const categoryDetailsFragment = gql`
 
 export const rootCategories = gql`
   ${categoryFragment}
+  ${pageInfoFragment}
   query RootCategories(
     $first: Int
     $after: String
@@ -59,10 +60,7 @@ export const rootCategories = gql`
         }
       }
       pageInfo {
-        endCursor
-        hasNextPage
-        hasPreviousPage
-        startCursor
+        ...PageInfoFragment
       }
     }
   }
@@ -74,6 +72,7 @@ export const TypedRootCategoriesQuery = TypedQuery<RootCategories, {}>(
 export const categoryDetails = gql`
   ${categoryFragment}
   ${categoryDetailsFragment}
+  ${pageInfoFragment}
   query CategoryDetails(
     $id: ID!
     $first: Int
@@ -83,19 +82,19 @@ export const categoryDetails = gql`
   ) {
     category(id: $id) {
       ...CategoryDetailsFragment
-      children(first: 20) {
+      children(first: $first, after: $after, last: $last, before: $before) {
         edges {
           node {
             ...CategoryFragment
           }
         }
+        pageInfo {
+          ...PageInfoFragment
+        }
       }
       products(first: $first, after: $after, last: $last, before: $before) {
         pageInfo {
-          endCursor
-          hasNextPage
-          hasPreviousPage
-          startCursor
+          ...PageInfoFragment
         }
         edges {
           cursor

src/categories/types/CategoryDetails.ts

@@ -40,9 +40,18 @@ export interface CategoryDetails_category_children_edges {
   node: CategoryDetails_category_children_edges_node;
 }
 
+export interface CategoryDetails_category_children_pageInfo {
+  __typename: "PageInfo";
+  endCursor: string | null;
+  hasNextPage: boolean;
+  hasPreviousPage: boolean;
+  startCursor: string | null;
+}
+
 export interface CategoryDetails_category_children {
   __typename: "CategoryCountableConnection";
   edges: CategoryDetails_category_children_edges[];
+  pageInfo: CategoryDetails_category_children_pageInfo;
 }
 
 export interface CategoryDetails_category_products_pageInfo {

src/categories/views/CategoryDetails.tsx

@@ -162,7 +162,9 @@ export const CategoryDetails: React.FC<CategoryDetailsProps> = ({
                   };
 
                   const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
-                    maybe(() => data.category.products.pageInfo),
+                    params.activeTab === CategoryPageTab.categories
+                      ? maybe(() => data.category.children.pageInfo)
+                      : maybe(() => data.category.products.pageInfo),
                     paginationState,
                     params
                   );