2023.09.20

tanstack query에 useMutation뿐만이 아닌 useQuery에서도 onSuccess를 사용할 수 있다.

https://velog.io/@jay/you-might-need-useEffect-diet 이 글을 보고, useEffect를 줄이기 위해 useEffect로 관리하던 데이터를 onSuccess로 변경하게 되었다.

 

기존 코드(useEffect)

 useEffect(() => {
   if (!data || data.list === list) {
     return;
   }
   setIsNextPage(data.isNextPage);
   setCount(data.count);
   setList((prevList) => [...prevList, ...data.list]);
 }, [data]);

 

이런식으로, 받아온 data가 변경될 때 (새로 fetch하면) useEffect를 발동하여 list에 추가해주고 있었다.

이를 useQuery의 onSuccess로 변경 해 보자.

 

변경된 코드 (onSuccess)

const listQueryOptions = {
    queryKey: listQueryKey,
    queryFn: () => fetchList(params),
    refetchOnWindowFocus: false,
    // 타입 명시하기
    onSuccess: (data: any) => {
      setIsNextPage(data.isNextPage);
      setCount(data.count);
      setList((prevList) => [...prevList, ...data.list]);
    },
  };

 

useQuery를 이용해 fetch를 하고, fetch에 성공한다면 data를 list에 추가하고 있다. 이를 통해 useEffect를 한 번 줄일 수 있게 되었다! 소소하게 코드의 수도 줄였다!