GitHubのGraphQL APIを叩いてみた – R.P.BLOG

GitHubのGraphQL APIを叩いてみた

2021/11/11

2021/11/13

最近GitHubのGraphQL APIを使う機会があったので記事にしました。
この記事では生のJavaScriptでAPIを叩く方法について解説します。Reactで叩く方法は今後記事にする予定です。

async function getContributions(key, user) {
    const headers = { "Authorization": `bearer ${key}` };
    const body = {
        "query": `query {
                    user(login: "${user}") {
                        name
                        contributionsCollection {
                            contributionCalendar {
                                colors
                                totalContributions
                                weeks {
                                    contributionDays {
                                        color
                                        contributionCount
                                        date
                                        weekday
                                    }
                                    firstDay
                                }
                            }
                        }
                    }
                }`
    };
    const response = await fetch("https://api.github.com/graphql", { method: "POST", body: JSON.stringify(body), headers: headers });
    const response_json = await response.json();
    return response_json;
};

まずはgetContributionsという非同期関数を作成します。引数にはkeyとuserを指定します。keyにはAPIのキーを、userには取得したいユーザー名を入れるようにします。
APIのキーはGitHubのSettings > Developer settings > Personal access tokensから取得できます。

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

この部分ではGraphQL APIを叩く際に必要になるAPIキーの記述をします。
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch

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

この部分では取得したいデータを記述します。クエリは下記のURLで検証出来ます。
https://docs.github.com/ja/graphql/overview/explorer

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

この部分では先程のheadersとbodyを利用してAPIを実行し、データを取得します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/await

return response_json;

最後に値を返して終わりです。

今回はGitHubのGraphQL APIの叩き方を紹介しました。Reactの方がAPIを実行するのが簡単なので、今後記事にしたいと思います。GraphQL楽しい。

参考にしたサイト

GitHubのGraphQL API – GitHub Docs

この記事をシェアする

コメントは受け付けていません。

自己紹介

髙橋

WEBデザイン学科

HTMLとCSS、PHPを勉強中

カテゴリー

アーカイブ

© 2020 Takahashi