fix: 971 pagination for issues (#977)

* set up pagination for persisted queries * adds cursors issues by label filter * works on all repos
open-sauced · May 2, 2021 · b3c4b6a · b3c4b6a
1 parent d10d3a2
commit b3c4b6a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 11 deletions.
diff --git a/src/components/Issues.js b/src/components/Issues.js
@@ -21,7 +21,8 @@ function Issues({repoName, owner}) {
 
   useEffect(() => {
     setLoading(true);
-    api.persistedIssuesFetch(owner, repoName).then(response => {
+    api.persistedRepositoryIssuesFetch(owner, repoName).then(response => {
+      console.log(response)
       const {data, totalCount} = response.data.gitHub.repositoryOwner.repository.issues;
       const {hasIssuesEnabled} = response.data.gitHub.repositoryOwner.repository;
       const lastIssue = totalCount > 0 ? data[data.length - 1] : {};
@@ -37,7 +38,7 @@ function Issues({repoName, owner}) {
 
   const _handleNextIssues = () => {
     setIssuesLoading(true);
-    api.fetchRepositoryIssues(owner, repoName, cursor).then(response => {
+    api.persistedRepositoryIssuesFetch(owner, repoName, cursor).then(response => {
       const {data, totalCount} = response.data.gitHub.repositoryOwner.repository.issues;
       const firstIssue = data[data.length - 1];
       const newCursor = firstIssue.cursor;
@@ -51,7 +52,8 @@ function Issues({repoName, owner}) {
 
   const _handlePreviousIssues = () => {
     setIssuesLoading(true);
-    api.fetchRepositoryIssues(owner, repoName, cursor, true).then(response => {
+    api.persistedRepositoryIssuesFetch(owner, repoName, cursor, true).then(response => {
+      console.log(response)
       const {data, totalCount} = response.data.gitHub.repositoryOwner.repository.issues;
       const newCursor = data[0].newCursor;
       setIssues(data);

diff --git a/src/lib/apiGraphQL.js b/src/lib/apiGraphQL.js
@@ -6,7 +6,11 @@ import {
   persistedGoalFetch,
   persistedRepoDataFetch,
   persistedDeploymentFetch,
+  persistedIssuesAfterFetch,
+  persistedIssuesBeforeFetch,
   persistedIssuesByLabelFetch,
+  persistedIssuesByLabelAfterFetch,
+  persistedIssuesByLabelBeforeFetch,
 } from "./persistedGraphQL";
 
 const fetchOneGraph = Config.fetchOneGraph;
@@ -592,8 +596,18 @@ const api = {
   persistedGoalFetch,
   persistedInteractionsFetch,
   persistedIssuesFetch,
+  persistedRepositoryIssuesFetch: (owner, repo, cursor, previous = false) => {
+    const issueFetcher = cursor && previous ? persistedIssuesBeforeFetch : persistedIssuesAfterFetch;
+
+    return issueFetcher(owner, repo, cursor);
+  },
   persistedDeploymentFetch,
   persistedIssuesByLabelFetch,
+  persistedRepositoryIssuesByLabelFetch: (owner, repo, cursor, previous = false) => {
+    const issueFetcher = cursor && previous ? persistedIssuesByLabelBeforeFetch : persistedIssuesByLabelAfterFetch;
+
+    return issueFetcher(owner, repo, cursor);
+  },
   fetchUserForkCount,
   forkRepository,
 };

diff --git a/src/lib/persistedGraphQL.js b/src/lib/persistedGraphQL.js
@@ -5,13 +5,17 @@ const url = "https://serve.onegraph.com/graphql?app_id=06238984-0a96-4774-95ad-d
 
 // variables are generically labelled for easy updating.
 // TODO: combine these into one doc
-const doc_id0 = "9c4b4f3d-c27d-434f-ba20-7ccf8308a9a1";
-const doc_id1 = "a0722788-adb0-4731-96fb-9e50c72a2528";
-const doc_id2 = "ed0abd8a-3ff3-46ce-bd1f-04f94af25d12";
-const doc_id3 = "c8c187a1-853f-446b-b3fa-b4876447c954";
-const doc_id4 = "8ecd5737-ebba-4807-a20b-4155272500bf";
-const doc_id5 = "89a3dc22-4355-494e-9d6f-a29c21e065e0";
-const doc_id6 = "a510812e-ad0d-4181-bda3-805ee2481a83";
+const doc_id0 = "9c4b4f3d-c27d-434f-ba20-7ccf8308a9a1"; // FetchUserForkCount
+const doc_id1 = "a0722788-adb0-4731-96fb-9e50c72a2528"; // RepoQuery
+const doc_id2 = "ed0abd8a-3ff3-46ce-bd1f-04f94af25d12"; // FetchGoal
+const doc_id3 = "c8c187a1-853f-446b-b3fa-b4876447c954"; // IssuesQuery
+const doc_id4 = "8ecd5737-ebba-4807-a20b-4155272500bf"; // IssuesByLabelQuery
+const doc_id5 = "89a3dc22-4355-494e-9d6f-a29c21e065e0"; // FetchDeploymentStatusQuery
+const doc_id6 = "a510812e-ad0d-4181-bda3-805ee2481a83"; // IssuesByLabelQuery
+const doc_id8 = "b582b05d-ddbe-4334-8118-57e0839de311"; // IssuesAfterQuery
+const doc_id9 = "6ff8e5b9-ec3b-41af-acde-9595f2b36980"; // IssuesBeforeQuery
+const doc_id10 = "26a5f364-758a-49ca-be02-389a5b88d318"; // IssuesByLabelAfterQuery
+const doc_id11 = "1eefafd8-44e2-45a4-b035-001b52b98a5c"; // IssuesByLabelBeforeQuery
 
 // TODO: Move this entire file to an npm package
 
@@ -75,6 +79,30 @@ async function persistedIssuesFetch(owner, repo) {
   return response;
 }
 
+async function persistedIssuesAfterFetch(owner, repo, cursor) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify({doc_id: doc_id8, variables: {repo: repo, owner: owner, cursor: cursor}}),
+  };
+  const response = await fetch(url, options)
+    .then(res => res.json())
+    .then(json => json);
+
+  return response;
+}
+
+async function persistedIssuesBeforeFetch(owner, repo, cursor) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify({doc_id: doc_id9, variables: {repo: repo, owner: owner, cursor: cursor}}),
+  };
+  const response = await fetch(url, options)
+    .then(res => res.json())
+    .then(json => json);
+
+  return response;
+}
+
 async function persistedDeploymentFetch() {
   const options = {
     method: "POST",
@@ -87,7 +115,7 @@ async function persistedDeploymentFetch() {
   return response;
 }
 
-async function persistedIssuesByLabelFetch(owner, repo) {
+async function persistedIssuesByLabelFetch(owner, repo, queryName) {
   const options = {
     method: "POST",
     body: JSON.stringify({doc_id: doc_id6, variables: {repo: repo, owner: owner}}),
@@ -99,12 +127,40 @@ async function persistedIssuesByLabelFetch(owner, repo) {
   return response;
 }
 
+async function persistedIssuesByLabelAfterFetch(owner, repo, cursor) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify({doc_id: doc_id10, variables: {repo: repo, owner: owner, cursor: cursor}}),
+  };
+  const response = await fetch(url, options)
+    .then(res => res.json())
+    .then(json => json);
+
+  return response;
+}
+
+async function persistedIssuesByLabelBeforeFetch(owner, repo, cursor) {
+  const options = {
+    method: "POST",
+    body: JSON.stringify({doc_id: doc_id11, variables: {repo: repo, owner: owner, cursor: cursor}}),
+  };
+  const response = await fetch(url, options)
+    .then(res => res.json())
+    .then(json => json);
+
+  return response;
+}
+
 export {
   persistedForkFetch,
   persistedDeploymentFetch,
   persistedIssuesFetch,
+  persistedIssuesAfterFetch,
+  persistedIssuesBeforeFetch,
   persistedInteractionsFetch,
   persistedGoalFetch,
   persistedRepoDataFetch,
   persistedIssuesByLabelFetch,
+  persistedIssuesByLabelAfterFetch,
+  persistedIssuesByLabelBeforeFetch,
 };