Project: React - Query 복기

useQuery

//getDaySales return type은  { sales,dateType, formatType } -> 아래 select에서 받을 수 있음

export const useFetchDayQuery = (day: Dayjs, storeId: string) => {
  const { data, isError, isLoading } = useQuery({
    queryKey: [SalesQueryKey.STATUS, DateQueryKey.DAY],
    queryFn: () => getDaySales(day.hour(0).subtract(9, 'hour'), storeId),
    enabled:!!storeId // 조건부로 react-query 실행 가능
    select:({sales,dateType,formatType})=>{...} // fetchPlatForm에서 성공한 데이터 값을 받아서 가공 할 수 있다. 
  });
	
  return { data, isError, isLoading };
};

// refetch
//  useQuery로 데이터를 받아 왔을 때 다시 한번 더 useQuery를 호출 하면 동일 한 값으로 호출이 안된다. 
// 이 때 강제적으로 데이터 값을 받아 올 수 있는 함수가 refetch이다. 
// 

언제 refetch를 사용 하는가??

내가 맡은 파트에서

• 오늘
• 이번주
• 이번 달

을 select 하면 다시 useFetchDayQuery를 호출 해서 데이터를 가공해서 차트로 보여줘야 하는데 여러 번
select해서 useFetchDayQuery 를 호출 하면 한 번 호출해서 데이터를 받아왔지만 다시 금 강제 할 수 있다.

Mutation

useMutation({
    onMutate:()=>{}, // mutationFn 보다 먼저 실행
    mutationFn: insertPlatFormRow,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: [PlatFormQueryKey.PLATFORM] }),
    onError: error => {
      console.log(error);
      router.push(PLATFORM_PATH);
    },
    onSettled:()=>{} //성공 실패와 관계없이 실행 할 수 있음
  });