Zenn
🎶

AxiosでSpotify Web APIを使うときにpostリクエストで詰まった

2022/03/31に公開
React
Spotify
tech

はじめに

こちらの記事でSpotify WEB APIにpostリクエストを行うときに少し詰まったのでメモです。
著者はReactの初学者です。

事象

axios.getメソッドで正常に作動していた下記の形式を流用しpostリクエストを行ったところ、401 Unauthorizedエラーが返ってくる。

const result = await axios.post(
    `https://api.spotify.com/v1/playlists/${id}/tracks?${searchParam.toString()}`,
    {
        headers: {
	    "Content-Type": "application/json",
	    "Authorization": `Bearer ${accessToken}`
	}
    }
);

原因

公式ドキュメントのわかりやすいところに書いていました。
https://axios-http.com/docs/api_intro
getメソッドaxios.get(url[, config])に対して
postメソッドはaxios.post(url[, data[, config]])となっています。

現在の状態ではheadersがdataとして処理されてしまっているのでしょう。

解決

コードの変更

data引数を追加してheaderが正常に処理されるようにします。

const result = await axios.post(
    `https://api.spotify.com/v1/playlists/${id}/tracks?${searchParam.toString()}`,
+   {},
    {
        headers: {
	    "Content-Type": "application/json",
	    "Authorization": `Bearer ${accessToken}`
	}
    }
);

インスタンス化

さらに再発の防止とコード削減のためにheader部分をインスタンス化します。
https://axios-http.com/docs/instance

export class ApiClient{
    static createInstance = (accessToken: string) =>{
        const instance = axios.create({
            baseURL: 'https://api.spotify.com/v1',
            headers:{
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${accessToken}`
            }
        });
        return instance;
    }
    static async get<T>(url: string, accessToken: string){
        const instance = this.createInstance(accessToken);
        return await instance.get(url)
        .catch((e) => {
            return Promise.reject(e);
        });
    }
    static async post(url: string, accessToken: string, data?: any){
        const instance = this.createInstance(accessToken);
        return await instance.post(url, data)
        .catch((e) => {
            return Promise.reject(e);
        });
    }
}

const result = ApiClient.post(
    `/playlists/${id}/tracks?${searchParam.toString()}`,
    accessToken,
);

これで間違いなくリクエストを行うことができるようになりました。

おわりに

表題にはSpotify Web APIと書きましたが、原因はパッケージ側でした。しかし、同じような事象で詰まった人が検索で辿り着けるように表題には残しておきます。公式ドキュメントを見ることが大切なことを今回でつくづく実感しました。
今後も詰まったところは解決策を形に残すことを心がけたいと思います。

参考

何気なく使っていたaxiosを初心者向けにまとめてみる(2) ~インスタンス化して効率化~

Discussion