https://github.com/gr2m/github-graphql-demo

An example GitHub dashboard implemented using REST & GraphQL for comparison
https://github.com/gr2m/github-graphql-demo

demo github graphql

Last synced: 26 days ago
JSON representation

An example GitHub dashboard implemented using REST & GraphQL for comparison

• Host: GitHub
• URL: https://github.com/gr2m/github-graphql-demo
• Owner: gr2m
• License: mit
• Created: 2017-12-16T07:57:38.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-10-15T00:01:29.000Z (about 4 years ago)
• Last Synced: 2024-04-13T21:20:29.867Z (7 months ago)
• Topics: demo, github, graphql
• Language: JavaScript
• Homepage: https://gr2m.github.io/github-graphql-demo
• Size: 470 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# GitHub GraphQL Demo

> An example GitHub dashboard implemented using REST & GraphQL for comparison

[![Screenshot](assets/screenshot.png)](https://gr2m.github.io/github-graphql-demo)

This static HTML dashboard is to showcase the benefits of GitHub’s [GraphQL API](https://developer.github.com/v4/)

over its [REST API](https://developer.github.com/v3/).

The dashboard shows

* the authenticated user (based on [private access token](https://github.com/settings/tokens/new))

* A list of repositories (4 by default)

* For each repository

  * A list of recent issues (3 by default)

  * For each issue: Name and company for user tooltip

  * 5 most recent stargazers.

  * For each stargazer: Name and company for user tooltip

Using the Rest API, up to 42 request are required to render the dashboard.

GraphQL requires a single request which looks like that:

```graphql

query myGithubDashboard($numRepositories: Int = 4, $numIssues: Int = 3) {

  me: viewer {

    ...userInfo

    repositories(

      first: $numRepositories

      orderBy: { field: UPDATED_AT, direction: DESC }

      affiliations: OWNER

    ) {

      totalCount

      mostStarred: nodes {

        name

        url

        stargazers(last: 5) {

          totalCount

          mostRecent: nodes {

            ...userInfo

          }

        }

        issues(

          first: $numIssues

          states: [OPEN, CLOSED]

          orderBy: { field: UPDATED_AT, direction: DESC }

        ) {

          mostRecent: nodes {

            title

            url

            author {

              ...userInfo

            }

          }

        }

      }

    }

  }

}

fragment userInfo on User {

  login

  url

  avatarUrl(size: 30)

  name

  company

  location

}

```

You can run the query in the [GitHub GraphQL API](https://developer.github.com/v4/explorer/).

## License

[MIT](LICENSE)