react query invalidateQueries 캐시

Question

Loading

; return

{data?.map((card) => )}

; } export default Dashboard; function Panel(props: IPanel): ReactElement { const getApiData = async (props.id) => { // 사용자가 선택한 api 데이터 가져오는 로직 }; const { data, isLoading } = useQuery(['dashboard'], getApiData); if(isLoading) return

Loading

return

; }이런식의 코드가 있을 때 버튼을 누르면 대시보드 데이터를 업데이트하고 queryClient를 이용해 dashboard 캐시 데이터를 날린 후 리패치하기를 원하는데 실제로는 invalidateQueries 되고 새로운 데이터가 리패치되는 동안 이전의 대시보드 데이터(캐시)가 Panel 컴포넌트에 전달된 후 대시보드 데이터가 업데이트되면 다시 Panel 컴포넌트에 전달되어 Panel 컴포넌트에는 getApiData 함수가 두번 실행되더라구요.invalidQueries를 실행하면 캐시 데이터가 사라지기 때문에 대시보드 캐시 데이터는 전달할 수 없는 것 아닌가요?참고로 queryClient의 staleTime은 0초, cacheTime은 default로 5분입니다.

react query invalidateQueries 캐시

0개의 답변

#react-query 목록