Purbo IndraФотография
Masalah utamanya adalah race condition atau cache token stale pada custom fetch
Ini umum, gak spesifik React atau React Router v7. Di situ emang ada guide headers per route, tapi itu untuk data loading, bukan request interception global
headers di route loader/action tidak otomatis sync dengan fetch headers. Untuk behavior global, harus atur di lapisan fetch atau API client
Solusinya bukan di React Router, tapi di arsitektur custom fetch dan token management-nya
---
Inti secara umum jika pakai custom fetch, pastikan:
1. Token refresh bersifat blocking: Jangan lanjutkan request baru sampai proses refresh selesai dan token disimpan. Gunakan antrian atau semacam promise queue agar hanya satu refresh berjalan
2. Set token ke tempat shared: Kalau token baru disimpan ke memory, pastikan fetch berikutnya ambil dari situ, bukan dari closure lama atau cache
3. Jangan cache Authorization di fetch: Pastikan setiap request Authorization header diambil fresh dari source global, bukan disimpan dari awal atau declare static
4. Gunakan retry pattern setelah refresh: Jika HTTP status 401 diterima, lakukan refresh token, simpan, lalu ulangi request awal dengan token baru