react-query, firebase를 이용한 infinite scroll 구현 시 발생한 문제

Question

안녕하세요 현재 react, firebase, react-query를 이용해 infinite scroll을 구현하는 도중 문제가 발생해 질문을 드립니다.firebase 에서 데이터를 처음 5개를 가져오고 이후에 IntersectionObserver를 이용해 스크롤 시 추가적으로 데이터들이 로드될 수 있도록 구현하려고 했는데 처음 데이터만 정상적으로 불러와지고 스크롤 시 데이터들이 로드되지 않습니다.어느 부분에서 어떻게 문제가 생긴건지 알고싶습니다..ㅠ.ㅠexport const first = async () => { const first = query( collection(db, 'post'), orderBy('date', 'desc'), limit(5), ); const postSnap = await getDocs(first); return postSnap; }; export const next = async (pageParam: any) => { const next = query( collection(db, 'post'), orderBy('date', 'desc'), startAfter(pageParam), limit(5), ); const nextSnap = await getDocs(next); return nextSnap; };const Timeline = () => { const { fetchNextPage, hasNextPage, isFetchingNextPage, data } = useInfiniteQuery({ queryKey: ['posts'], queryFn: ({ pageParam }) => { return pageParam ? next(pageParam) : first(); }, getNextPageParam: (querySnapshots) => { if (querySnapshots.size < 5) return undefined; else return querySnapshots.docs[querySnapshots.docs.length - 1]; }, }); const observerRef = useRef(null); const lastPostRef = useCallback( (post: HTMLElement) => { // next page를 loading중이라면 return if (isFetchingNextPage) return; // observerRef 가 존재한다면 target의 관찰을 중지한다. if (observerRef.current) { observerRef.current.disconnect(); } observerRef.current = new IntersectionObserver((posts) => { console.log('intersection posts', posts[0].isIntersecting); // target과 상위요소가 교차됬고 다음 페이지가 존재할 때 fetchNextPage 함수 호출 if (posts[0].isIntersecting && hasNextPage) { fetchNextPage(); } }); // 다음 관찰 요소 관찰 시작 if (post) { observerRef.current.observe(post); } }, [isFetchingNextPage, fetchNextPage, hasNextPage], ); return (

{data?.pages[0].docs .map((doc) => doc.data()) .map((post) => ( ))}

); }; export default Timeline;

띠치 · Answer

결국 해결했습니다! data를 제가 0번 배열만 불러와서 이슈가 발생했던 것이었습니다.위의 코드에서 return 부분의 data?.pages[0].docs~ 부분을{data?.pages        .flatMap((page) => page.docs.map((doc) => doc.data()))        .map((post) => (          <PostCard key={post.postid} post={post} ref={lastPostRef} />))}이렇게 수정함으로써 data.pages 안의 배열들을 1개의 1차원 배열로 만들고 다시 map 을 이용해 카드들을 보여주면서 해결했습니다.firebase, react-query, intersection observer을 이용해 무한스크롤 구현할 때 참고가 되셨으면 좋겠습니다 :)

react-query, firebase를 이용한 infinite scroll 구현 시 발생한 문제

1개의 답변

Q&A 목록