Skip to content
Permalink
Browse files

03-React GraphQL Pagination

  • Loading branch information...
rwieruch committed Oct 26, 2018
1 parent c08126a commit 060677346e8955fb1a6c7579859ce92e62e1f406
Showing with 83 additions and 15 deletions.
  1. +83 −15 src/App.js
@@ -13,40 +13,77 @@ const axiosGitHubGraphQL = axios.create({
});

const GET_ISSUES_OF_REPOSITORY = `
query ($organization: String!, $repository: String!) {
query ($organization: String!, $repository: String!, $cursor: String) {
organization(login: $organization) {
name
url
repository(name: $repository) {
name
url
issues(last: 5) {
issues(first: 5, after: $cursor, states: [OPEN]) {
edges {
node {
id
title
url
reactions(last: 3) {
edges {
node {
id
content
}
}
}
}
}
totalCount
pageInfo {
endCursor
hasNextPage
}
}
}
}
}
`;

const getIssuesOfRepository = path => {
const getIssuesOfRepository = (path, cursor) => {
const [organization, repository] = path.split('/');

return axiosGitHubGraphQL.post('', {
query: GET_ISSUES_OF_REPOSITORY,
variables: { organization, repository },
variables: { organization, repository, cursor },
});
};

const resolveIssuesQuery = queryResult => () => ({
organization: queryResult.data.data.organization,
errors: queryResult.data.errors,
});
const resolveIssuesQuery = (queryResult, cursor) => state => {
const { data, errors } = queryResult.data;

if (!cursor) {
return {
organization: data.organization,
errors,
};
}

const { edges: oldIssues } = state.organization.repository.issues;
const { edges: newIssues } = data.organization.repository.issues;
const updatedIssues = [...oldIssues, ...newIssues];

return {
organization: {
...data.organization,
repository: {
...data.organization.repository,
issues: {
...data.organization.repository.issues,
edges: updatedIssues,
},
},
},
errors,
};
};

class App extends Component {
state = {
@@ -69,12 +106,20 @@ class App extends Component {
event.preventDefault();
};

onFetchFromGitHub = path => {
getIssuesOfRepository(path).then(queryResult =>
this.setState(resolveIssuesQuery(queryResult)),
onFetchFromGitHub = (path, cursor) => {
getIssuesOfRepository(path, cursor).then(queryResult =>
this.setState(resolveIssuesQuery(queryResult, cursor)),
);
};

onFetchMoreIssues = () => {
const {
endCursor,
} = this.state.organization.repository.issues.pageInfo;

this.onFetchFromGitHub(this.state.path, endCursor);
};

render() {
const { path, organization, errors } = this.state;

@@ -99,7 +144,11 @@ class App extends Component {
<hr />

{organization ? (
<Organization organization={organization} errors={errors} />
<Organization
organization={organization}
errors={errors}
onFetchMoreIssues={this.onFetchMoreIssues}
/>
) : (
<p>No information yet ...</p>
)}
@@ -108,7 +157,11 @@ class App extends Component {
}
}

const Organization = ({ organization, errors }) => {
const Organization = ({
organization,
errors,
onFetchMoreIssues,
}) => {
if (errors) {
return (
<p>
@@ -124,12 +177,15 @@ const Organization = ({ organization, errors }) => {
<strong>Issues from Organization:</strong>
<a href={organization.url}>{organization.name}</a>
</p>
<Repository repository={organization.repository} />
<Repository
repository={organization.repository}
onFetchMoreIssues={onFetchMoreIssues}
/>
</div>
);
};

const Repository = ({ repository }) => (
const Repository = ({ repository, onFetchMoreIssues }) => (
<div>
<p>
<strong>In Repository:</strong>
@@ -140,9 +196,21 @@ const Repository = ({ repository }) => (
{repository.issues.edges.map(issue => (
<li key={issue.node.id}>
<a href={issue.node.url}>{issue.node.title}</a>

<ul>
{issue.node.reactions.edges.map(reaction => (
<li key={reaction.node.id}>{reaction.node.content}</li>
))}
</ul>
</li>
))}
</ul>

<hr />

{repository.issues.pageInfo.hasNextPage && (
<button onClick={onFetchMoreIssues}>More</button>
)}
</div>
);

0 comments on commit 0606773

Please sign in to comment.
You can’t perform that action at this time.