invalidateQueries를 사용했을 때, UI가 Re-Render 되지 않습니다.

refetchQueries 한번 사용해보세요!

useQuery에 fetcher를 비동기적으로 사용하는 것이 어떨까 싶습니다. useAuth의 useQuery에서 fetcher의 동작과 select의 동작 사이에서 싱크가 맞지 않아 낡은 데이터를 그대로 사용하는 것 같습니다.

1
2
3
4
5
6
7
export function useAuth() {
  const fetcher = async () => {
    const response = await request.get('/api/auth');
    return response.data;
  };
  return useQuery(queryKeys.AUTH_USER, fetcher);
}

안녕하세요! 저도 mutate를 통해서 수정을 했을때, 변경된 데이터로 동기화가 되지않아서 며칠동안 해결 못했던 경험이 있는데 같은 방법으로 해결이 되실수 있을까 하고 답변 남깁니다! queryClient.invalidateQueries에 refetchType이라는 옵션을 사용해서 refetchType: 'all', 옵션을 추가하는 방식으로 사용해보시겠어요?? 옵션으로는 4가지 선택지가 있네요! 상황에 맞춰서 적용해보시면 될것 같아요. 혹시 몰라 공식문서 링크와 해당설명부 첨부하겠습니다! https://tanstack.com/query/v4/docs/react/reference/QueryClient#queryclientinvalidatequeries refetchType?: 'active' | 'inactive' | 'all' | 'none' Defaults to 'active' When set to active, only queries that match the refetch predicate and are actively being rendered via useQuery and friends will be refetched in the background. When set to inactive, only queries that match the refetch predicate and are NOT actively being rendered via useQuery and friends will be refetched in the background. When set to all, all queries that match the refetch predicate will be refetched in the background. When set to none, no queries will be refetched, and those that match the refetch predicate will be marked as invalid only.

React Query에서 캐시 무효화 및 리렌더링이 잘 되지 않는 문제는 종종 의존성 업데이트나 캐시 키 관련 문제로 발생할 수 있습니다. 다음 방법을 시도하여 문제를 해결해 보세요. 1. 캐시 키 확인: ' queryKeys.AUTH_USER '를 사용해 쿼리를 무효화했는데도 리렌더링이 발생하지 않는다면, 캐시 키가 일치하지 않는 것일 수 있습니다. 캐시 키가 모든 관련 쿼리에서 동일한지 확인하세요. 2. 의존성 확인: ' useAuth '의 의존성에 관련된 문제일 수도 있습니다. ' useEffect '를 사용하여 의존성을 처리하거나, 필요한 경우 ' useCallback '으로 감싸서 렌더링 사이에 함수를 동일하게 유지할 수 있습니다. 3. React Query Devtools 확인: 문제가 발생하는 페이지에서 React Query Devtools를 사용하여 캐시 상태와 관련된 정보를 확인하세요. 올바른 캐시 키와 함께 쿼리가 무효화되고 있는지 확인할 수 있습니다. 4. 직접 데이터 갱신: ' useMutation '의 ' onSuccess ' 콜백에서 ' queryClient.invalidateQueries() '를 사용하는 대신, ' queryClient.setQueryData() '를 사용하여 캐시에 있는 데이터를 직접 갱신할 수 있습니다. 이렇게 하면 리렌더링이 강제로 발생하게 됩니다. 위의 방법 중 하나를 사용하여 문제를 해결해 보세요. 그래도 문제가 해결되지 않는다면, 추가적인 디버깅이 필요할 수 있습니다.

1
2
3
4
5
6
#4
const { mutate } = useMutation(fetcher, {
  onSuccess: (newData) => {
    queryClient.setQueryData(queryKeys.AUTH_USER, newData);
  },
});