리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

Question

home.jsx
  const { data, error, isLoading } = useFilteredApartmentData();
 <List data={data.result} />

훅.jsx

const useFilteredApartmentData = () => {
  const queryClient = useQueryClient();
  const [filters, setFilters] = useState({ skip: 0, take: 15 });

const { data, error, isLoading } = useQuery({
    queryKey: [aaa, filters],
    queryFn: () => fetchFilteredApartmentData(filters),
    placeholderData: keepPreviousData,
    enabled: !!filters,
  });

const updateFilters = (newFilters) => {
    console.log(newFilters);
    setFilters(newFilters);
    mutation.mutate(newFilters);
  };

return {
    data,
    error,
    isLoading,
    updateFilters,
  };
};

export default useFilteredApartmentData;

여기서 처음에 데이터 패칭은 잘 이루어 지는데 
fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 
화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

포크코딩 · Answer

useQuery 훅이 리턴하는 객체는 refetch 함수를 포함합니다. 구조할당 받으셔서 수동으로 사용할 수 있습니다. 또는 처음에 넘겨주는 옵션 값을 통해 refetch 옵션(마운트 시 리패치 등)을 넘길 수도 있습니다.