[항해99 취업 리부트 코스 학습일지] WIL 3일차

항해99 에서 진행하는 취업 리부트 코스 3기를 수강하며 작성하는 TIL 포스트입니다.

---

프로젝트 WIL Week 3

이번주도 프로젝트를 진행하면서 새로운 서비스들을 배우느라 진도가 많이 늦어졌다.

React Query

무한 스크롤 구현

const { data, status, error, fetchNextPage, isFetchingNextPage, isLoading } =
    useInfiniteQuery<FetchProductsResult>({
      queryKey: ['product'],
      queryFn: fetchProducts,
      initialPageParam: null,
      getNextPageParam: (lastPage) => lastPage.nextPage,
    });

const { ref, inView } = useInView({
/* options */
threshold: 0.5, // 요소가 화면에 50% 이상 보일 때 감지
});

useEffect(() => {
if (inView) {
    fetchNextPage();
}
}, [inView, fetchNextPage]);

데이터 삭제 구현

const deleteItemFromDB = async (id: string) => {
    try {
      await deleteProduct(id);
    } catch (error: unknown) {
      if (error instanceof FirestoreError) {
        throw new Error(
          '제품정보 삭제에 실패했습니다. 잠시 후에 다시 시도해주세요.',
        );
      } else if (error instanceof StorageError) {
        // https://firebase.google.com/docs/storage/web/handle-errors?hl=ko
        throw new Error(
          '제품 이미지 삭제에 실패했습니다. 잠시 후에 다시 시도해주세요.',
        );
      } else {
        throw error as Error;
      }
    }
  };

const deleteItem = useMutation({
  mutationFn: deleteItemFromDB,
  onMutate: async (itemId: string) => {
    await queryClient.cancelQueries({ queryKey: ['product'] });

    const previousData = queryClient.getQueryData(['product']);

    // Optimistic Update: 아이템을 미리 제거합니다.
    queryClient.setQueryData(
      ['product'],
      (oldData: {
        pages: FetchProductsResult[];
        pageParams: PageParamType;
      }) => {
        return {
          ...oldData,
          pages: oldData.pages.map((page: FetchProductsResult) => ({
            ...page,
            items: page.productArray.filter(
              (product) => product.id !== itemId,
            ),
          })),
        };
      },
    );

    return { previousData };
  },
  onError: (err, itemId, context) => {
    // 에러 발생 시 이전 데이터를 복원합니다.
    console.error(itemId, err);
    queryClient.setQueryData(['product'], context!.previousData);
  },
  onSettled: () => {
    // 성공/실패와 관계없이 무효화하여 최신 데이터를 가져오게 합니다.
    queryClient.invalidateQueries({ queryKey: ['product'] });
  },
});

---

항해99 취업 리부트 코스를 수강하고 작성한 콘텐츠 입니다.