apollo-react-relay-pagination - npm Package Compare versions

Comparing version 1.0.3 to 1.0.5

package.json

 {
   "name": "apollo-react-relay-pagination",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "This is a helper library to write less code when using relay style pagination with apollo and react.",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -5,5 +5,16 @@ # apollo-react-relay-pagination
 
-# Usage
+## Installation
 
-## Wrapping the whole component
+```
+yarn add apollo-react-relay-pagination
+```
+or
+
+```
+npm install --save apollo-react-relay-pagination
+```
+
+## Usage
+
+### Wrapping the whole component
 This should be your preferred method of integration. Just enhance your component using `relayPagination` and then use the `loadMore` method from the props as shown below.
@@ -16,23 +27,30 @@
 class ItemsBase extends React.Component {
-    render() {
-        ...
-    }
+  render() {
+    ...
+  }
 
-    // call this whenever you want to load more elements (e.g. from componentDidUpdate)
-    load (reload) {
-        if (!this.state.loadingMore) {
-            if (reload || (this.props.dataReady && this.props.data.viewer.items.pageInfo.hasNextPage)) {
-                this.setState(previousState => ({...previousState, loadingMore: true}));
-                this.props.loadMore(reload, { after: reload ? null: this.props.data.items.pageInfo.endCursor});
-                this.setState(previousState => ({...previousState, loadingMore: false}));
-            }
-        }
+  // call this whenever you want to load more
+  // elements (e.g. from componentDidUpdate)
+  load (reload) {
+    if (!this.state.loadingMore) {
+      if (reload || (...check for hasNextPage...)) {
+        this.setState(p => ({ ...p, loadingMore: true }));
+        this.props.loadMore(reload, {
+        after: reload ?
+            null :
+            this.props.data.viewer.comments.pageInfo.endCursor
+        });
+        this.setState(p => ({ ...p, loadingMore: false }));
+      }
     }
+  }
 }
 
-const ItemsWithPagination = relayPagination(ItemsQuery, ItemsBase);
-const ItemsWithData = graphql(ItemsQuery)(ItemsWithPagination);
+const ItemsWithPagination =
+  relayPagination(ItemsQuery, ItemsBase);
+const ItemsWithData =
+  graphql(ItemsQuery)(ItemsWithPagination);
 ```
 
-## Using the merge function directly
+### Using the merge function directly
 The library additionally provides the function `mergeResults` that merges a new response containing a paginated list into a previous version of the same answer. You can use this to have more flexibility.
@@ -44,26 +62,27 @@ ```
 class ItemsBase extends React.Component {
-    render() {
-        ...
-    }
+  render() {
+    ...
+  }
 }
 
 export function getProps(props) {
-    props.loadMore = (reload) => {
-        let variables = ...;
-        if (!reload) {
-            variables.after = props.data.viewer.profile.groups.pageInfo.endCursor;
-        }
+  props.loadMore = (reload) => {
+    let variables = ...;
+    if (!reload) {
+      variables.after = props.data.viewer.profile.groups.pageInfo.endCursor;
+    }
 
-        return props.data.fetchMore({
-            query: ItemsQuery,
-            variables,
-            updateQuery: (previousResult, { fetchMoreResult }) => {
-                return mergeResults(previousResult, fetchMoreResult, reload)
-            },
-        });
-    };
-    return props;
+    return props.data.fetchMore({
+      query: ItemsQuery,
+      variables,
+      updateQuery: (previousResult, { fetchMoreResult }) => {
+        return mergeResults(previousResult, fetchMoreResult, reload)
+      },
+      });
+  };
+  return props;
 }
 
-const ItemsWithData = graphql(ItemsQuery, {
+const ItemsWithData =
+  graphql(ItemsQuery, {
     props: getProps,
@@ -70,0 +89,0 @@ })(ItemsWithPagination);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

98

increased by24.05%

Worsened metrics

Total package byte prevSize

127191

decreased by-0.02%

Number of downloads

11

decreased by-42.11%

No dependency changes