03-Apollo Client with Pagination, Variables, Nested Objects and List Fields

Author: rwieruch

src/index.js

@@ -13,17 +13,75 @@ const client = new ApolloClient({
   },
 });
 
-const GET_ORGANIZATION = gql`
-  {
-    organization(login: "the-road-to-learn-react") {
+const GET_REPOSITORIES_OF_ORGANIZATION = gql`
+  query($organization: String!, $cursor: String) {
+    organization(login: $organization) {
       name
       url
+      repositories(
+        first: 5
+        orderBy: { direction: DESC, field: STARGAZERS }
+        after: $cursor
+      ) {
+        edges {
+          node {
+            ...repository
+          }
+        }
+        pageInfo {
+          endCursor
+          hasNextPage
+        }
+      }
     }
   }
+  fragment repository on Repository {
+    name
+    url
+  }
 `;
 
 client
   .query({
-    query: GET_ORGANIZATION,
+    query: GET_REPOSITORIES_OF_ORGANIZATION,
+    variables: {
+      organization: 'the-road-to-learn-react',
+      cursor: undefined,
+    },
+  })
+  // resolve first page
+  .then(result => {
+    const { pageInfo, edges } = result.data.organization.repositories;
+    const { endCursor, hasNextPage } = pageInfo;
+
+    console.log('second page', edges.length);
+    console.log('endCursor', endCursor);
+
+    return pageInfo;
+  })
+  // query second page
+  .then(({ endCursor, hasNextPage }) => {
+    if (!hasNextPage) {
+      throw Error('no next page');
+    }
+
+    return client.query({
+      query: GET_REPOSITORIES_OF_ORGANIZATION,
+      variables: {
+        organization: 'the-road-to-learn-react',
+        cursor: endCursor,
+      },
+    });
+  })
+  // resolve second page
+  .then(result => {
+    const { pageInfo, edges } = result.data.organization.repositories;
+    const { endCursor, hasNextPage } = pageInfo;
+
+    console.log('second page', edges.length);
+    console.log('endCursor', endCursor);
+
+    return pageInfo;
   })
-  .then(console.log);
+  // log error when there is no next page
+  .catch(console.log);