AxiosでのBacklog APIの使い方
2019-10-24
目次
概要
Nuxt × axiosでBacklog APIを使用して課題を追加したりする際、結構引っかかった個所が多かったので リファレンスをかみ砕いたものをメモしておきます。
Backlog APIを使用する上で共通で必要な情報
space
ご使用のBacklogのURL
https://[ココの部分]/dashboard
apikey
「個人設定」→「API」で新しい
APIキー
課題の追加
まずは公式リファレンスを読んでみましょう。
公式リファレンスにある通り、必須項目は下記の4つ。
| パラメータ名 | 内容 | | ------------ | -------------------------- | | projectId | 課題を追加するプロジェクト | | summary | 追加する課題名 | | issueTypeId | 課題の種別 | | priorityId | 優先度 |
実際に POST される URL
https://[space名]/api/v2/issues?apiKey=APIキー&projectId=課題を追加するプロジェクト&summary=追加する課題名&issueTypeId=課題の種別&priorityId=課題の重要度
Code
example.vue
<script>
import axios from "axios"
export default {
methods: {
addTask() {
// 送信するパラメータ類
const sendData = new URLSearchParams()
sendData.append("apiKey", 送信者のAPIキー)
sendData.append("projectId", 課題を追加するプロジェクト)
sendData.append("summary", 課題名)
sendData.append("issueTypeId", 課題の種別)
sendData.append("priorityId", 優先度)
// ここまで必須項目
sendData.append("description", 課題詳細)
sendData.append("assigneeId", 課題担当者)
sendData.append("actualHours", 予定工数)
sendData.append("startDate", 開始日)
sendData.append("dueDate", 完了日)
axios
.post("https://[space名]/api/v2/issues?" + sendData)
.then(res => {
console.log("【Add Task】", res)
})
.catch(error => {
console.log("【Add Task】", error)
})
},
},
}
</script>
axios.post
行けるはずなのですがなぜか上手くいかず、上記のように設定したところ送信できました。
axios.post("https://[space名]/api/v2/issues", sendData)
注意点⚠
- 使用している API キーの発行アカウントが管理者かどうかでできる制限が結構変わります。
- カスタム属性を設置していて、その項目が必須になっている場合があるので注意しましょう。 僕はこれになかなか気付かず何時間も無駄にしました…😭
- 必須項目である【課題の種別】は同じ名前でもプロジェクトごとにキーが違います。
種別一覧の取得
先ほどの課題の追加の際、必須になってくる【種別一覧】を取得してみましょう。
公式リファレンスはこんな感じ。
| パラメータ名 | 内容 | | -------------- | ----------------------------------------- | | projectIdOrKey | プロジェクトの ID または プロジェクトキー |
実際に GET を行う URL
https://[space名]/api/v2/projects/[プロジェクトのID または プロジェクトキー]/issueTypes?apiKey=APIキー
リファレンスにある URL の
/api/v2/projects/:projectIdOrKey/issueTypes
:projectIdOrKey
入力した URL という意味になります。僕も今回初めて知ったのですが、
:〇〇
そのまま記載するという意味ではありません。
Code
<script>
import axios from "axios"
export default {
methods: {
getTaskTypes() {
axios
.get(
"https://[space名]/api/v2/projects/[プロジェクトID or Key]/issueTypes?apiKey=送信者のAPIキー"
)
.then(res => {
console.log("【issuetype】", res)
})
.catch(error => {
console.log("【issuetype】", error)
})
},
},
}
</script>
上記で一覧が取得でき、console にデータが出力されるはずです。
今回は apikey をそのまま url に打ち込むタイプで GET を行いましたが、問題なく動作しました。