react-query cache 삭제

아래와 같이 버튼이 2개 있다고 했을 때, A → B → A로 돌아오면 처음 A를 눌렀을 때 호출했던 값이 유지되는 현상이 있었다. 이것은 queryKey를 기준으로 데이터를 갖고 있어서 생긴 현상이다. 이럴 땐 removeQueries로 cache를 삭제하면 된다.

<button onClick={fetch}>A</button>
<button onClick={fetch}>B</button>

import { useQueryClient } from "react-query";

const TestComponent = () => {

	const queryClient = useQueryClient();
	
  	cosnt handleFetch = () => {
      ...
      queryClient.removeQueries({ queryKey: "A" });
    }

아래와 같이 코드를 작성하면 queryClient가 동작하지 않을 수 있다.

1) const queryClient = new QueryClient();
2) const queryClient = QueryClient;

참고

• invalidateQueries는 queryKey를 무효화하여 이전에 호출할 때와 같은 queryKey로 호출해도 fetch가 되도록 할 수 있다.
• staleTime은 default가 0이다. 이것을 설정해두면 fetch가 된 이후, 데이터가 fresh에서 stale 상태될 때까지 시간이 생긴다. 이 시간동안은 fetch함수가 호출되어도 fetch 되지 않고 저장된 데이터를 전달한다.
• cacheTime은 default가 무한대이다. fetch되기 이전에 cache된 데이터가 있으면 그 값을 전달한다.