Open1
【axios】SuspenseとErrorBoundaryでAPIの非同期エラーのUIを表示させる設定？
TakeReact で SuspenseとErrorBoundaryでAPIの非同期エラーのUIを表示させたい場合、
APIのpromiseのrejectでthrowを投げると実現できるよう。
(promiseのラッパー処理が必要)
axiosの場合はrejectでthrowを投げる処理がまとめて設定できそう。。。
参照サイト
// Axios インスタンス
const client = axios.create();
// 成功の場合は何もしない
const onSuccess = response => response;
// エラーの場合はthrow new Error
const onError = err => {
// 関数や Promise オブジェクトなど、JSON にシリアライズできない値はエラーになる
// 必要なキーのみ取り出してnew Errorに文字列化して渡す
// 受け取り側でJSON.parseする
const { status, data } = err.response;
const response = JSON.stringify( { status, data });
throw new Error(`${response}`);
};
client.interceptors.response.use(onSuccess, onError);