[넥스트 Next.js] 쇼핑몰 프로젝트_상품 데이터 리액트 쿼리 (React Query) 사용하기

파이어베이스에 저장된 데이터 불러오는 로직을 React Query를 이용해 Migration 했다 이전에 정리한 todoList Query는 이전 버전으로 문법이 많이 다르니 공식문서를 꼭 참고하도록 하자.

queryKey는 배열로 만들어주고 queryFn에 서버 데이터를 가져오는 로직을 작성하면 된다

가져온 데이터를  useEffect을 이용해 id를 넣어주고 state에 저장(파이어베이스는 데이터를 가져온 후 문서의 id를 넣어준 후 다시 배열에 담아야 한다 파이어베이스 문법특성 때문이니 꼭 필수일 필요는 없다)

정렬 버튼을 클릭할 때마다 데이터를 새로 요청해서 받아와야 하는데 쿼리로 작성하고 나니 정렬기능이 작동하지 않는다는 문제가 발생했다

---

문제해결 방법

useEffect 의존성배열에 data , selectedTab으로 작성하면 data와 selectedTab 값이 바뀔 때마다 재렌더링을 할 거라 생각했다. 데이터는 잘 받아오지만 정렬은 작동하지 않았다

 

문제 해결

TanStackQuery 공식문서에 refetch를 사용하여 해결했다

새 useEffect에 refetch를 넣어주고 의존성배열에 selectedTab를 넣어주면  완성!

refetch
쿼리를 수동으로 다시 가져오는 기능

 const [products, setProducts] = useState<ProductType[]>([]);

  const { isLoading, isError, data, refetch } = useQuery({
    queryKey: ['mainProductData'],
    queryFn: () => {
      const response = getDocs(
        selectedTab
          ? query(collection(db, 'product'), orderBy('createdAt', 'desc'))
          : query(collection(db, 'product'), orderBy('createdAt', 'asc'))
      );
      return response;
    }
  });

  useEffect(() => {
    const query = (data: any) => {
      const fetchedProducts: any = [];
      data?.forEach((doc: any) => {
        const products = doc.data();
        fetchedProducts.push({ ...products, id: doc.id, products });
      });
      setProducts(fetchedProducts);
    };
    query(data);
  }, [selectedTab]);

  useEffect(() => {
    refetch();
  }, [selectedTab,refetch]);

---

useQuery 공식문서

https://tanstack.com/query/latest/docs/framework/react/reference/useQuery

useQuery | TanStack Query Docs