데이터가 refresh되지 않는 문제(no React Query)

Background

React Query를 사용하지 않고 유저를 추가, 수정, 혹은 삭제했을 때 해당 action에 맞게 user list가 자동으로 불러와져야 한다.
Auth0에서 제공해주는 API를 토대로 BE에서 공정(?)한 API로 사용
예) https://auth0.com/docs/api/management/v2/users/get-users

Issue

유저를 추가, 수정, 삭제하는 action을 취했을 때 API가 제대로 호출됨에도 불구하고 user list가 갱신이 되지 않았다.

Solution

디버깅 결과 비동기적으로 API가 호출되는 흐름은 맞았다.
그렇다면 API를 호출할 때 불러오는 데이터는? 유저 변경 전 그대로였다.
1. 데이터를 캐싱하나?
API를 호출할 때 cache : 'no-store' 옵션을 추가해봤지만, 실패
2. 타이밍 문제?
DB에서 데이터가 변경되기 전에 204코드를 보내고 FE에서는 204코드를 받은 직후 변경되기 전의 데이터를 받아와서 갱신이 안되는 것이었다.

export const sleep = (s: number) =>
  new Promise((resolve) => {
    setTimeout(resolve, s * 1000);
  });
  
useEffect(() => {
      (async () => {
        ...
        await sleep(DELAY_TIME);

        try {
          ...
          await refresh()
        } catch (error) {
          ...
        } finally {
          ...
        }
      })();
    }
  }, [...]);

refresh 함수가 실행되기 전 delay time을 두어 DB에 변경된 데이터가 반영될 때까지 시간을 벌었다.

이 외에도, API를 만들 때 데이터를 받아와서 변경된게 확인이 되면 204코드를 보내는 방법도 생각해봤지만 간단간단하게 가자 해서 패스!