最近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楽しい。