【GraphQL】Githubレポジトリの情報をPOSTMANで取得する

# 何をするのか
Githubレポジトリの情報を取得するために**POSTMAN**というプラットフォームで実行。
POSTMANで「**GraphQL API v4**」を使い、クエリを叩き、repository情報の取得をします。

この投稿では、

- APIをPOSTMANに追加
- 簡単なqueryを叩く

までを記述していきます。

# Postmanとは
公式サイトは[こちら](https://www.postman.com/)です。
POSTMANは、API開発のための総合的な環境です。

今回は、API自作の目的はなくGraphQL API v4を使ったGithub情報取得を目的としていますので、**API直感的に利用できる環境**と言うイメージだと思います。
# やってみよー
では実際に進めていきます。[POSTMANのDocument](https://learning.postman.com/)ではインストから様々なAPIの操作方法についての記載もあるので、そちらもチェックしてみてください。

### 環境
OS --- macOS Catalina version 10.15.5
POSTMAN --- Postman v7.25.2
API --- GraphQL API v4

### 前提準備

- POSTMANのインストール（[POSTMAN Download Page](https://www.postman.com/downloads/)からできます）
- GithubAPIの認証・OAuth token(アクセストークン)の取得（[こちらのGithubDocs](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token)を参考に）


## 1. POSTMANにAPIを登録
まずは、POSTMANにGraphQLのAPIを追加します。
### Schemaのダウンロード
[こちら](https://developer.github.com/v4/public_schema/)から、GraphQLのPublic Schemaをダウンロードできます。
### POSTMANに新しいAPIを追加
POSTMANを開くと左上にこのような表示があるので、右の「APIs」を選択、「New API」をクリックして、新しいAPIを追加します。
<img width="300px" alt="newAPI" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556205/b4f72608-df32-2018-15ed-a1b8224e49db.png">

すると、このようなウィンドウが開くので、APIの名前、バージョン任意で入れます。
Schema type は GraphQL
Schema format は GraphQL SDL
を選択して、先程ダウンロードした "schema.public.graphql" をアップロードします。
できたら、Create APIで作成します。
<img width="500px" alt="addAPI" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556205/cc83de11-5387-8071-237d-99b835dfd2eb.png">

これで、APIの登録は完了です。

## 2. queryを叩く
次にクエリを作っていきます。
### 新しいリクエストを作成
⌘+Tで新しいタブで無題のリクエストが作成されます。
![Screen Shot 2020-08-23 at 17.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556205/c1c161d2-f2d4-2a10-73be-75ed57fd68ef.png)


### リクエストの詳細を設定
次にリクエストの詳細を設定していきます。

- リクエストのタイプをデフォルトのGETから、POSTに変更します。
- URLは「https://api.github.com/graphql 」と入力します。
- Authorizationのタブを選択し、認証Typeを選びます（私はOAuth2.0にします）。

必要な認証情報を入力したら、設定完了です。
![Screen Shot 2020-08-23 at 17.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556205/86d8b6b7-182c-ce3d-ad77-cb8ff11781f5.png)

### クエリを叩く
いよいよ、クエリを入力していきます。
Bodyタブを選択し、タイプはGraphQLを選択します。
「QUERY」という欄がクエリを書くところ、右側の「GRAPHQL VARIABLES」の欄にはJSON形式で変数を定義するところです。
レスポンスは、JSON形式で返ってきます。
（今回は、変数の使い方について触れないので、[こちら](https://developer.github.com/v4/guides/forming-calls/#working-with-variables)を参考にしてください。）
![Screen Shot 2020-08-23 at 17.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556205/116079c3-234d-2adc-b64e-771f44a39708.png)

### 自分の情報 user()
``` graphql
{
    user(login: "\任意のユーザー名\") {
        name
    }
}
```
レスポンスは省略しますが、自分のGithubの表示名が返ってきます。

### オープンアカウントの情報 repositoryOwner()
「repositoryOwner()」で、任意のアカウントの情報を取得できます。
ここでは、レポジトリの総数を取得するクエリです。

```graphql

{
  repositoryOwner (login: "facebook") {
    repositories {
      totalCount
    }
  }
}
```
<details><summary>レスポンスは以下です。</summary>
<div>

```json

{
    "data": {
        "repositoryOwner": {
            "repositories": {
                "totalCount": 127
            }
        }
    }
}
```
</div>

### オープンレポジトリの情報 repository()
「repository()」でオープンレポジトリであればレポジトリ情報が取得できます。
「owner:"", name:""」と書くと省略できるので、アカウント情報は必要なくて特定のレポジトリ情報だけが必要な場合は、おすすめです。
ここでは、forkの総数・issueの総数・stargazerの総数・watcherの総数・pullRequestの総数・labelsの総数・milestoneの総数を取得するクエリです。

```graphql

{
  repository(owner:"facebook",name:"react"){
    forks {
        totalCount
    }
    issues {
        totalCount
    }
    stargazers {
        totalCount
    }
    watchers {
        totalCount
    }
    pullRequests {
        totalCount
    }
    labels{
        totalCount
    }
    milestones{
        totalCount
    }
  }
}
```

<details><summary>レスポンスは以下です。</summary>
<div>

```json

{
    "data": {
        "repository": {
            "forks": {
                "totalCount": 29096
            },
            "issues": {
                "totalCount": 9486
            },
            "stargazers": {
                "totalCount": 154618
            },
            "watchers": {
                "totalCount": 6684
            },
            "pullRequests": {
                "totalCount": 9968
            },
            "labels": {
                "totalCount": 59
            },
            "milestones": {
                "totalCount": 39
            }
        }
    }
}
```
</div>

### 一つひとつのissueの内容を取得
issueに限らず、以下の方法でそれぞれの情報を取得できます。
「(first: ## )」では、「はじめの##個」という指定ができます。APIの使用で最大100個までが取得可能です。
"last: ##", "after: '$$$'", など、いろんな制約を設けられます。
今回は、はじめの10個のissueについて、

- タイトル
- issueID
- closedされているか（Boolean）
- createdAt（timestamp iso 8601 "YYYY-MM-DDTHH:MM:SSZ")
- closedAt（timestamp iso 8601 "YYYY-MM-DDTHH:MM:SSZ")

を取得するクエリです。

```graphql

{
    repository(owner:"facebook",name:"react"){
        issues(first:10) {
            totalCount
            edges {
                node {
                    title
                    number
                    closed
                    createdAt
                    closedAt
                }
            }
        }
    }
}
```

<details><summary>レスポンスは以下です。</summary>
<div>

```json

{
    "data": {
        "repository": {
            "issues": {
                "totalCount": 9486,
                "edges": [
                    {
                        "node": {
                            "title": "Can't require() react-tools module",
                            "number": 10,
                            "closed": true,
                            "createdAt": "2013-05-30T03:46:02Z",
                            "closedAt": "2013-05-30T12:14:18Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Write tests for react-tools module",
                            "number": 12,
                            "closed": true,
                            "createdAt": "2013-05-30T04:32:10Z",
                            "closedAt": "2013-05-31T14:39:43Z"
                        }
                    },
                    {
                        "node": {
                            "title": "must adding comments for JSX?",
                            "number": 16,
                            "closed": true,
                            "createdAt": "2013-05-30T12:46:11Z",
                            "closedAt": "2013-07-21T17:08:03Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Small update to Bower command",
                            "number": 21,
                            "closed": true,
                            "createdAt": "2013-05-30T16:01:55Z",
                            "closedAt": "2013-05-30T18:54:41Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Fix docs Rake \"update_version\" command to strip trailing spaces",
                            "number": 24,
                            "closed": true,
                            "createdAt": "2013-05-30T18:09:21Z",
                            "closedAt": "2013-07-21T17:08:47Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Make valid npm release",
                            "number": 26,
                            "closed": true,
                            "createdAt": "2013-05-30T18:55:49Z",
                            "closedAt": "2013-05-30T19:23:46Z"
                        }
                    },
                    {
                        "node": {
                            "title": "React in RequireJS ?",
                            "number": 28,
                            "closed": true,
                            "createdAt": "2013-05-30T20:51:32Z",
                            "closedAt": "2014-01-06T21:20:52Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Docs don't even mention reconciliation!",
                            "number": 37,
                            "closed": true,
                            "createdAt": "2013-06-01T20:01:11Z",
                            "closedAt": "2013-07-21T17:05:49Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Is es5-sham required for IE8?",
                            "number": 39,
                            "closed": true,
                            "createdAt": "2013-06-02T09:08:10Z",
                            "closedAt": "2013-07-24T20:12:30Z"
                        }
                    },
                    {
                        "node": {
                            "title": "Uncaught SyntaxError: Unexpected token < ",
                            "number": 40,
                            "closed": true,
                            "createdAt": "2013-06-02T13:27:44Z",
                            "closedAt": "2013-06-03T14:05:11Z"
                        }
                    }
                ]
            }
        }
    }
}
```
</div>

## 3.終わりに
POSTMANは、取ってきたい情報をが明確にあったり、GraphQLの表記確認などで非常に役に立ちます。
ただ、大量な情報収集には向いていないかと思います。
GraphQLはGithubAPIの中でも、詳細の情報が収集可能なのでデータ分析の収集ステップには適していると思います。