RTK Query 캐싱 조작을 통한 데이터 변화 감지, 중복데이터 조회 방지

RTK Query 캐싱 생명주기 변경

 

안녕하세요! 오늘은 RTK Query 캐싱처리를 컨트롤 하는 방법에 대해 알아보겠습니다. 

 

캐싱 필요 사례 예시

 

가끔 RTK Query를 이용하다보면 데이터가 변화했음에도 동일한 데이터가 조회되는 경우가 있습니다. 대부분 수정화면에서 데이터를 수정후에 목록화면으로 돌아왔다가 다시 수정화면으로 되돌아 갈 때 많이 경험하곤 하는데요.

 

데이터 변경 예시

 

김개똥이라는 이름을 가진 사람의 이름을 김멋짐으로 변경했다고 가정해봅시다. 수정화면에서 이름을 변경하여 Table에 Update 처리를 한 후 목록에서 조회하는 것까진 잘 됩니다. 김멋짐으로 잘 보일 겁니다. 하지만 다시 수정화면으로 들어와 기존 정보를 조회한다면 이름이 김개똥으로 조회될 것입니다.

 

발생 원인과 해결방법

 

이는 RTK Query가 캐싱을 하고 있기 때문입니다. 동일한 api 주소를 보냈을 때 특정시간까지는 api 주소와 입력값이 같다면 동일한 정보를 요청한다고 판단하여 서버에 재요청을 하지 않고 기존에 가지고 있는 정보를 return 해주는 것인데요.

 

이를 해결하는 방법은 다음과 같습니다.

 

export const = personApi = createApi({
  baseQuery: fetchBaseQuery({baseUrl: 'http://localhost:3000/api'})
  endpoint: (builder) => ({
  	getPersonInfo: builder.query({
    	query: (id) => `/person/${id}`,
        
        // 이 부분을 추가(1초만 캐싱 유지)
        keepUnusedDataFor: 1
    })
  })
})

 

위에 작성한 방식대로 keepUnusedDatafor를 이용하여 API별 캐싱의 생명주기를 설정할 수 있습니다. default값은 60이며 초 단위로 설정가능합니다. 저는 1초로 설정하여 혹시 모를 중복 query를 대비했습니다.

 

마치며

 

오늘은 RTK Query의 API별 캐싱 라이프 타임을 조작하여 변경된 데이터가 조회되지 않는 현상을 해결해보았습니다. 다음에도 알찬 정보로 찾아뵙겠습니다. 즐거운 코딩하세요!