GraphQL を試すために、GitHub が提供している GraphQL を使ってみたいと思います。実際に GraphQL を使用して issue の登録から project 内で issue の移動までやってみます。GraphQL の実行環境としてplaygroudを使います。
準備
まずは適当なリポジトリを作ります。その後、issue を project で管理するためにproject を用意します。
project の登録は「projects」タブから[New project]を選択することで作成できます。
project を作成したら、任意の数だけカラムを作成します（ここでは「Backlog」「In Progress」「Done」を作成）。
issue が追加されたら「Backlog」に追加されるように automation も設定しておきます。
automation の設定は、カラムの「・・・」を選択し[Manage automation]を選択。
[Newly added]を選択。
これで、新規登録した issue がこのプロジェクトに関連づけられていたら自動的に「Backlog」に表示されるようになります。
issue 登録
GraphQL で issue を登録してみます。issue を登録するにはrepository idが必要なのでまずはこちらを取得します。ついでに、issue を project に関連付けるためにproject idと、後ほど issue に対して label も追加するのでlabel idも一緒に取得しておきます。
GitHub の GraphQL を使用するには、ヘッダーにアクセストークンを設定する必要があります。アクセストークンを付与した上で各クエリを実行してください。
{
"Authorization": "Bearer access-token"
}
ヘッダーを設定したら次のクエリを実行して結果が取得できるか確認してみてください。（nameにはリポジトリ名を、ownerには GitHub のユーザー名を指定してください。）
query getProjectLabels {
repository(name:"PersonalTaskManagement", owner:"kiyo27") {
id
name
projects(search:"todo", first:1) {
nodes {
id
name
columns(first:3) {
nodes {
id
name
cards {
nodes {
id
content {
__typename
... on Issue {
id
title
}
}
}
}
}
}
}
}
labels(first: 10) {
nodes {
id
name
}
}
}
}
取得結果：
{
"data": {
"repository": {
"id": "repository-id-xxxxxxxxxxxxxxxxxxx",
"name": "PersonalTaskManagement",
"projects": {
"nodes": [
{
"id": "project-id-xxxxxxxxxxxx",
"name": "todo",
"columns": {
"nodes": [
{
"id": "column-id-xxxxxxxxxxxxxxxxxxx",
"name": "Backlog",
"cards": {
"nodes": []
}
},
{
"id": "column-id-xxxxxxxxxxxxxxxxxxx",
"name": "In Progress",
"cards": {
"nodes": []
}
},
{
"id": "column-id-xxxxxxxxxxxxxxxxxxx",
"name": "Done",
"cards": {
"nodes": []
}
}
]
}
}
]
},
"labels": {
"nodes": [
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "bug"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "documentation"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "duplicate"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "enhancement"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "help wanted"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "good first issue"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "invalid"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "question"
},
{
"id": "label-id-xxxxxxxxxxxxxxxxxxxxx",
"name": "wontfix"
}
]
}
}
}
}
登録
取得したrepository idとproject id、label idを使用して issue を登録します。
mutation createIssue {
createIssue(input:{title: "Create issue from GraphQL", repositoryId :"repository-id-xxxxxxxxxxxxxxxxxxx", projectIds:"project-id-xxxx", labelIds: ["label-id-xxxxxxx"]}) {
issue {
id
}
}
}
実行結果：
{
"data": {
"createIssue": {
"issue": {
"id": "issue-id-xxxxxxxxxxxx"
}
}
}
}
project を確認すると issue が「Backlog」に表示されているのが確認できます。
issue 更新
登録した issue を GraphQL で更新してみます。issue の更新にはissue idが必要なので、先ほど実行したクエリの戻り値のidを指定します。
mutation updateIssue{
updateIssue(input:{id: "issue-id-xxxxxxxxx", title:"Hello world, GraphQL"}) {
issue {
id
}
}
}
実行結果：
{
"data": {
"updateIssue": {
"issue": {
"id": "iisue-id-xxxxxx"
}
}
}
}
project を確認すると、タイトルが変わっているのが確認できます。
ProjectCard 移動
今登録した issue は「Backlog」の列にあるので、「In Progress」に移動させてみます。issue を移動させるためにはcard idとcolumn idが必要になるので下記のクエリを実行して取得します。
query getIssue {
search(query:"Hello world, GraphQL", type:ISSUE, first:1) {
nodes {
__typename
... on Issue {
title
projectCards {
nodes {
id
project {
name
columns(first:3) {
nodes {
id
name
}
}
}
}
}
}
}
}
}
実行結果：
{
"data": {
"search": {
"nodes": [
{
"__typename": "Issue",
"title": "Hello world, GraphQL",
"projectCards": {
"nodes": [
{
"id": "project-card-id-xxxxxxxxx",
"project": {
"name": "todo",
"columns": {
"nodes": [
{
"id": "column-backlog-id-xxxxxxxx",
"name": "Backlog"
},
{
"id": "column-in-progress-id-xxxxxxxxx",
"name": "In Progress"
},
{
"id": "column-done-id-xxxxxxxxxxxx",
"name": "Done"
}
]
}
}
}
]
}
}
]
}
}
}
取得内容からproject-card-id-xxxxxxxxxと issue の移動先であるcolumn-in-progress-id-xxxxxxxxxを使用します。issue を移動させてみます。
mutation moveProjectCard {
moveProjectCard(input:{cardId:"PRC_lALOF65GMM4Ax90azgQCJLY", columnId:"project-card-id-xxxxx"}) {
cardEdge {
node {
url
}
}
}
}
実行結果：
{
"data": {
"moveProjectCard": {
"cardEdge": {
"node": {
"url": "https://github.com/kiyo27/PersonalTaskManagement/projects/1#card-xxxxx"
}
}
}
}
}
project を確認すると、「In Progress」に移動しているのが確認できます。
以上、 GitHub の GraphQL を使用した簡単な issue と project の操作でした。