먼저 저는 CX팀, 리테일팀이 기존에 사용하는 어드민을 CRM으로 새로 만드는 작업을 하고 있어요.

문제상황 정리.!

아래와 같은 정보를 수정하는 모달을 개발하는 중이었습니다.

정보를 수정하는 모달이었기에 특정 정보를 GET해오고 해당 정보를 바탕으로 폼 입력의 초기값을 씌워놓은 상황이었는데요. (아래와 같은 코드로!)

//cx상세정보 조회하는 useQuery훅
const { data: cxDetailInfo } = useCxDetailById(id);

//훅폼의 초기값을 받아온 정보로 주입시키기
const method = useForm<CxInfoModalSchema>({
    resolver: zodResolver(CxInfoModalFormSchema),
    defaultValues: {
      firstName: cxDetailInfo?.firstName,
      lastName: cxDetailInfo?.lastName,
      ...
    },
  });

//.. 또 다른 폼들

요기까지는 별 문제가 없어보였습니다

이상하다..?

분명 invalidateQueries를 실행했는데 왜 값이 그대로이지?

😒 invalidateQueries는 무조건 데이터를 다시 가져오는거로 알고있는데?

먼저 간단하게 query의 상태값에 대해서 간략히 설명을 하겠습니다.

querydevtools의 상태값

쿼리는 크게 active vs inactive 요 상태로 분류가 되는데요.

Fresh

Fresh 상태는 데이터를 다시 서버에 요청할 필요가 없는, 즉 최신 상태를 의미합니다. 데이터를 서버에서 받아온 후 지정된 staleTime 내에 있는 데이터는 fresh 상태로 간주됩니다.

• fresh 상태에서는 데이터가 신선하므로, 사용자가 다시 요청할 때 캐싱된 데이터가 사용되며 서버에 재요청하지 않습니다.

예시: staleTime: 5 * 60 * 1000 (5분)으로 설정된 경우, 데이터를 가져온 후 5분 동안은 fresh 상태가 유지됩니다.