Skip to content
Permalink
Browse files

02-React GraphQL Query

  • Loading branch information...
rwieruch committed Oct 26, 2018
1 parent ca7b278 commit c08126a9ec91dde4198ae85bb2f194fa7767c683
Showing with 90 additions and 4 deletions.
  1. +90 −4 src/App.js
@@ -12,27 +12,71 @@ const axiosGitHubGraphQL = axios.create({
},
});

const GET_ISSUES_OF_REPOSITORY = `
query ($organization: String!, $repository: String!) {
organization(login: $organization) {
name
url
repository(name: $repository) {
name
url
issues(last: 5) {
edges {
node {
id
title
url
}
}
}
}
}
}
`;

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

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

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

class App extends Component {
state = {
path: 'the-road-to-learn-react/the-road-to-learn-react',
organization: null,
errors: null,
};

componentDidMount() {
// fetch data
this.onFetchFromGitHub(this.state.path);
}

onChange = event => {
this.setState({ path: event.target.value });
};

onSubmit = event => {
// fetch data
this.onFetchFromGitHub(this.state.path);

event.preventDefault();
};

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

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

return (
<div>
@@ -54,10 +98,52 @@ class App extends Component {

<hr />

{/* Here comes the result! */}
{organization ? (
<Organization organization={organization} errors={errors} />
) : (
<p>No information yet ...</p>
)}
</div>
);
}
}

const Organization = ({ organization, errors }) => {
if (errors) {
return (
<p>
<strong>Something went wrong:</strong>
{errors.map(error => error.message).join(' ')}
</p>
);
}

return (
<div>
<p>
<strong>Issues from Organization:</strong>
<a href={organization.url}>{organization.name}</a>
</p>
<Repository repository={organization.repository} />
</div>
);
};

const Repository = ({ repository }) => (
<div>
<p>
<strong>In Repository:</strong>
<a href={repository.url}>{repository.name}</a>
</p>

<ul>
{repository.issues.edges.map(issue => (
<li key={issue.node.id}>
<a href={issue.node.url}>{issue.node.title}</a>
</li>
))}
</ul>
</div>
);

export default App;

0 comments on commit c08126a

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