SWRConfig の value プロパティの onError 、onErrorRetry 内でエラ－を送出してもダメ
SWR は非同期処理 (Promise) だと思うのでエラ－を送出しても誰も捉えてくれないから、おそらく。
非同期処理 (Promise) でエラ－を通知する方法は reject を発行する必要がある。
でも Next.js の error.tsx (React Error Boundary ベ－スの仕組み) はエラ－の送出しか捉えてくれない。
なので非同期処理内で補足したエラ－を同期処理に移して再送出する必要がある。
とりあえず私は下記のコンポ－ネントを実装して SWR のグロ－バル設定を設定してみた。
export default function SWRGlobalConfig({ children }) {
const [error, setError] = useState<Error>();
useEffect(() => {
if (error) {
throw error;
}
}, [error]);
return (
<SWRConfig
value={{
onErrorRetry: (
error,
key,
{ errorRetryCount, errorRetryInterval },
revalidate,
{ retryCount }
) => {
if (
typeof errorRetryCount === 'number' &&
retryCount >= errorRetryCount
) {
setError(error);
}
setTimeout(
() => revalidate({ retryCount: retryCount }),
errorRetryInterval
);
}
}}
>{children}</SWRConfig>
);
}非同期処理内で補足したエラ－を useEffect を介して同期処理内で再送出するようにした。
なんか阿漕な実装だけど、一応意図した動作をしてくれた。
なんか、もっといい方法があるのかもしれないけどとりあえずこれでヨシっ ! とした。
