09-GraphQL Pagination with Apollo Client in React

Author: rwieruch

src/Button/index.js

@@ -18,4 +18,21 @@ const Button = ({
   </button>
 );
 
+const ButtonUnobtrusive = ({
+  children,
+  className,
+  type = 'button',
+  ...props
+}) => (
+  <button
+    className={`${className} Button_unobtrusive`}
+    type={type}
+    {...props}
+  >
+    {children}
+  </button>
+);
+
+export { ButtonUnobtrusive };
+
 export default Button;

src/FetchMore/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import Loading from '../Loading';
+import { ButtonUnobtrusive } from '../Button';
+
+import './style.css';
+
+const FetchMore = ({
+  loading,
+  hasNextPage,
+  variables,
+  updateQuery,
+  fetchMore,
+  children,
+}) => (
+  <div className="FetchMore">
+    {loading ? (
+      <Loading />
+    ) : (
+      hasNextPage && (
+        <ButtonUnobtrusive
+          className="FetchMore-button"
+          onClick={() => fetchMore({ variables, updateQuery })}
+        >
+          More {children}
+        </ButtonUnobtrusive>
+      )
+    )}
+  </div>
+);
+
+export default FetchMore;

src/Profile/index.js

@@ -7,17 +7,22 @@ import Loading from '../Loading';
 import ErrorMessage from '../Error';
 
 const GET_REPOSITORIES_OF_CURRENT_USER = gql`
-  {
+  query($cursor: String) {
     viewer {
       repositories(
         first: 5
         orderBy: { direction: DESC, field: STARGAZERS }
+        after: $cursor
       ) {
         edges {
           node {
             ...repository
           }
         }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
       }
     }
   }
@@ -26,19 +31,28 @@ const GET_REPOSITORIES_OF_CURRENT_USER = gql`
 `;
 
 const Profile = () => (
-  <Query query={GET_REPOSITORIES_OF_CURRENT_USER}>
-    {({ data, loading, error }) => {
+  <Query
+    query={GET_REPOSITORIES_OF_CURRENT_USER}
+    notifyOnNetworkStatusChange={true}
+  >
+    {({ data, loading, error, fetchMore }) => {
       if (error) {
         return <ErrorMessage error={error} />;
       }
 
       const { viewer } = data;
 
-      if (loading || !viewer) {
+      if (loading && !viewer) {
         return <Loading />;
       }
 
-      return <RepositoryList repositories={viewer.repositories} />;
+      return (
+        <RepositoryList
+          loading={loading}
+          repositories={viewer.repositories}
+          fetchMore={fetchMore}
+        />
+      );
     }}
   </Query>
 );

src/Repository/RepositoryList/index.js

@@ -1,14 +1,51 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
+import FetchMore from '../../FetchMore';
 import RepositoryItem from '../RepositoryItem';
 
 import '../style.css';
 
-const RepositoryList = ({ repositories }) =>
-  repositories.edges.map(({ node }) => (
-    <div key={node.id} className="RepositoryItem">
-      <RepositoryItem {...node} />
-    </div>
-  ));
+const updateQuery = (previousResult, { fetchMoreResult }) => {
+  if (!fetchMoreResult) {
+    return previousResult;
+  }
+
+  return {
+    ...previousResult,
+    viewer: {
+      ...previousResult.viewer,
+      repositories: {
+        ...previousResult.viewer.repositories,
+        ...fetchMoreResult.viewer.repositories,
+        edges: [
+          ...previousResult.viewer.repositories.edges,
+          ...fetchMoreResult.viewer.repositories.edges,
+        ],
+      },
+    },
+  };
+};
+
+const RepositoryList = ({ repositories, loading, fetchMore }) => (
+  <Fragment>
+    {repositories.edges.map(({ node }) => (
+      <div key={node.id} className="RepositoryItem">
+        <RepositoryItem {...node} />
+      </div>
+    ))}
+
+    <FetchMore
+      loading={loading}
+      hasNextPage={repositories.pageInfo.hasNextPage}
+      variables={{
+        cursor: repositories.pageInfo.endCursor,
+      }}
+      updateQuery={updateQuery}
+      fetchMore={fetchMore}
+    >
+      Repositories
+    </FetchMore>
+  </Fragment>
+);
 
 export default RepositoryList;