blog.tksn.jp

公開日: 2021年11月11日

GitHub GraphQL APIを叩いてみる

最近GitHub GraphQL APIを利用する機会があったのでその備忘録です。

サンプルコード

// 指定したユーザーのコントリビューションカレンダーを取得する

const getContributions = async (token, userName) => {
    const headers = {
        "Authorization": `bearer ${token}`,
    };

    const body = {
        "query": `
            query {
                user(login: ${userName}) {
                    contributionsCollection {
                        contributionCalendar {
                            colors
                            totalContributions
                            weeks {
                                contributionDays {
                                    color
                                    contributionCount
                                    date
                                    weekday
                                }
                                firstDay
                            }
                        }
                    }
                }
            }
        `
    };

    const response = await fetch("https://api.github.com/graphql", {
        method: "POST",
        headers,
        body: JSON.stringify(body),
    });

    const json = await response.json();

    return json;
};

解説

指定したユーザーのコントリビューションカレンダーを取得する処理です。

関数の引数にpersonal access tokenとコントリビューションカレンダーを取得するユーザーを指定します。personal access tokenの発行方法は公式ドキュメントを参考にしてください。

個人用アクセストークンを管理する - GitHub Docs

コマンドラインまたは API を使用して GitHub への認証を行うときに、パスワードの代わりに personal access token を使用することができます。

https://docs.github.com/ja/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens

引数で渡したトークンはAuthorizationリクエストヘッダーで使用します。

const headers = {
    "Authorization": `bearer ${token}`,
};

bodyにGraphQLのクエリーを渡します。
クエリーにはコントリビューションカレンダーの情報を取得するよう書かれています。

query {
    user(login: ${userName}) {
        contributionsCollection {
            contributionCalendar {
                colors
                totalContributions
                weeks {
                    contributionDays {
                        color
                        contributionCount
                        date
                        weekday
                    }
                    firstDay
                }
            }
        }
    }
}

取得できる情報は他にもたくさんあり、公式ドキュメントに取得できる情報が記載されています。

オブジェクト - GitHub Docs

GraphQL のオブジェクトは、アクセスできるリソースを表します。

https://docs.github.com/ja/graphql/reference/objects

GraphQLのクエリーについて、公式がエクスプローラーを公開しているのでそちらでクエリーを検証してからプログラムに組み込むことをおすすめします。

エクスプローラー - GitHub Docs

GitHub の使用開始、トラブルシューティング、最大限に活用する方法について説明します。新規ユーザー、開発者、管理者、すべての GitHub の製品に関するドキュメント。

https://docs.github.com/ja/graphql/overview/explorer

最後にリクエストを発行します。

const response = await fetch("https://api.github.com/graphql", {
    method: "POST",
    headers,
    body: JSON.stringify(body),
});

const json = await response.json();

return json;

実行結果

{
  "data": {
    "user": {
      "contributionsCollection": {
        "contributionCalendar": {
          "colors": [
            "#9be9a8",
            "#40c463",
            "#30a14e",
            "#216e39"
          ],
          "totalContributions": 421,
          "weeks": [
            {
              "contributionDays": [
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-12T00:00:00.000+00:00",
                  "weekday": 0
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-13T00:00:00.000+00:00",
                  "weekday": 1
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-14T00:00:00.000+00:00",
                  "weekday": 2
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-15T00:00:00.000+00:00",
                  "weekday": 3
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-16T00:00:00.000+00:00",
                  "weekday": 4
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-17T00:00:00.000+00:00",
                  "weekday": 5
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-18T00:00:00.000+00:00",
                  "weekday": 6
                }
              ],
              "firstDay": "2023-11-12"
            },
            {
              "contributionDays": [
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-19T00:00:00.000+00:00",
                  "weekday": 0
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-20T00:00:00.000+00:00",
                  "weekday": 1
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-21T00:00:00.000+00:00",
                  "weekday": 2
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-22T00:00:00.000+00:00",
                  "weekday": 3
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-23T00:00:00.000+00:00",
                  "weekday": 4
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-24T00:00:00.000+00:00",
                  "weekday": 5
                },
                {
                  "color": "#ebedf0",
                  "contributionCount": 0,
                  "date": "2023-11-25T00:00:00.000+00:00",
                  "weekday": 6
                }
              ],
              "firstDay": "2023-11-19"
            },

            // ...

            {
              "contributionDays": [
                {
                  "color": "#40c463",
                  "contributionCount": 5,
                  "date": "2024-11-10T00:00:00.000+00:00",
                  "weekday": 0
                }
              ],
              "firstDay": "2024-11-10"
            }
          ]
        }
      }
    }
  }
}