Issue First

Search for issues labeled good-first-issues, help-wanted and a-bug using Github's GraphQL and REST APIs.

Visit Issue First

Using the App to Find Open Issues

• Search for github queries by the issue tags.
• Easily find good-first-issues, help-wanted, and a-bug issues tagged in open source projects.

Using the App to Compare GraphQL vs REST

• Search with GitHub API v4 GraphQL, or v3 REST
  • compare how queries are formatted
  • compare pagination techniques for both API reponses
• View the network tab
  • See the response from github vs graphQL
  • Compare amount of time and data transfered

Setting up the App

• clone the repository
• cd into github-graphql
• npm i
• Add your github token in .env REACT_APP_GIT=github-token-here

Starting the App

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build Builds the app for production to the build folder.

See react documentation about deployment.

Deployment info has moved here: https://facebook.github.io/create-react-app/docs/deployment

Resources Utilized:

• Road to build react

• essential to wiring github graphql API with auth in App *Layout : Bulma

• Stack Overflow - helped clarlify how to query type repository with ...on issue

• working with fragments on unions and interfaes

• Bulma Layout and UI

• Stack Overflow - example of how to query type ...on issue for SearchItemResults that returns a union of mutltiple issues

Tests:

• Assertions made:
  • Query was called on click
  • Query called was correct query
  • ApolloConsumer was rendered
• Assertions that need to be made:
  • REST endpoint data renders
  • The correct number of cards were rendered