[React] react-query refetch 사용하기

페이지네이션 구현 중 페이지를 클릭하면 해당하는 데이터를 불러와야 하는데, HomePage에서 페이지네이션 컴포넌트로 page값을 넘겨주어 구현했더니 데이터를 제대로 받아오지 못했다.

그래서 useEffect를 사용하려는데, 리액트 hook 규칙에 따르면 useEffect 안에서는 custom hook 함수를 사용할 수 없다고 오류가 발생했다.

대안으로 state를 사용해보았다.

HomePage.tsx

const { data } = useGetArticlesQuery(tab, selectTag, page);
const [datas, setDatas] = useState(data)
const [isLosing, setIsLoading] = (false)

 useEffect(() => {
    setIsLoading(true);

    const getPageAritcle = async () => {
      const result = await getArticles(tab, selectTag, page);
      setDatas(result);
      setIsLoading(false);
    };

    getPageAritcle();
  }, [page, tab, selectTag]);

위와 같이 useQuery로 데이터를 가져오고, state를 만든 다음 데이터를 적용해주고 useEffect안에서 useQuery를 사용하지 않고 다시 데이터를 불러와 state로 값을 변경하여 보여주었다.

근데 너무 비효율적이잖아.. 이럴거면 useQuery 왜 사용해..?

물론 다른 방법이 있겠지만 이건 아니다 싶어 다시 검색해봤더니 react-query에서도 refetch 함수를 제공해주었다.

refetch() 적용하기

useQueryArticles.ts

export const useGetArticlesQuery = (
  tab: number,
  selectTag: string,
  page: number
) => {
  const { data, isLoading, refetch } = useQuery(
    ["articles", tab, selectTag],
    () => getArticles(tab, selectTag, page)
  );

  useEffect(() => {
    refetch();
  }, [page]); 	// page 값이 변할때마다 data를 refetch 해옴

  return {
    data,
    isLoading,
    refetch,
  };
};

refetch는 useQuery를 사용할 때 data와 같이 불러올 수 있다.

useQuery 훅 부분에 useEffect를 추가하여 refetch를 적용해주었더니 페이지에 따른 데이터들을 잘 불러온다.