[React] UseInfiniteQuery와 관련된 내용 정리

데이터를 저장하고 가져오는건 firebase를 이용하고 리액트를 사용해서 개인 프로젝트를 진행하고 있돠 

이렇게 개념이 숑숑 비어있다니 스스로 놀랍댜 거의 양파같은 여자 

여튼 한번 제대로 짚고 넘어가기 위해서 이번에 사용한 UseInfitieQuery랑 , useInfiniteQuery와 같이 사용한 개념들에 대해 정리 고고링

 

 

UseInfitieQuery

파라미터 값만 변경해 동일한 useQuery를 무한정 호출할때 사용한다.  

이걸 왜 사용하는 거지 ??

이번에 무한 스크롤을 구현하기 위해서 사용해 보았다. 

 

useQuery와 사용법이 비슷한듯 다른데,

useQuery는  ReactQuery를 이용해 서버로부터 데이터를 조회해올때 사용한다면 ( 단순히 쿼리함수에서 반환된 데이터를 의미하면)

 

useInfinieQuery는 두개의 프로퍼티를 가지며 useQuery를 호출한다. 

 

 

파라미터 두개 

1. 데이터 페이지 객체의 array페이지 

2. 각 페이지의 매개변수가 기록되는 pageParams

const res= useInfiniteQuery(queryKey,queryFuncion)

 

저번에 useQuery 볼때 본 개념이랑 같은데 .

 

queryKey

의미: useQuery마다 부여되는 고유 KEY 값 (문자열, 배열 형태 가능)

역할: ReactQuery가 쿼리 캐싱을 관리할 수 있도록 도와줌 

 

 

queryFunction

promise처리가 이루어지는 함수 

axios를 이용해서 서버에 api를 요청하는 거라고 생각하면 된다.

 

ex)

const res = useQuery(['test'], () => axios.get('http://localhost:8080/test'));

 

 

그럼 내가 이걸 왜썼냐 , useinfitequery를 이용해서 무한 스크롤을 구현하기 위해 사용해보았다. 

ㅎ...자꾸 내가 왜쓰는지 상기 시켜줘야함 ,,ㅎㅎ

firebase에 저장해놓은 카드 데이터를 리스트로 화면에 보여주기 위해서 사용했다.

 

 

mport { collection,getDocs,QuerySnapshot,query,limit,startAfter, getDoc } from "firebase/firestore";
import { store } from "./firebase";
import { COLLECTIONS } from "@/constants";
import { Card } from "@/models/card";

//pageParam: 지금 보이고 있는 맨 마지막 요소 
export async function getCards(pageParam:QuerySnapshot<Card>){
    const cardQuery= 
        pageParam==null
            ?query(collection(store,COLLECTIONS.CARD),limit(10))
            :query(collection(store,COLLECTIONS.CARD),startAfter(pageParam),limit(10,)
        )

    const cardSnapshot  = await getDocs(cardQuery)
    return cardSnapshot.docs.map((doc)=>({
        id:doc.id,
        ...(doc.data() as Card),
    }))
    console.log('cardSnapshot',cardSnapshot)
}

위의  코드는 Firebase Firestore에서 카드 데이터를 페이지네이션 방식으로 가져오는 함수 getCards를 구현한 것으로  pageparam이라는 매개변수를 사용해서 firestore에서 데이터를 쿼리했다.   

 

 

    const cardQuery= 
        pageParam==null
            ?query(collection(store,COLLECTIONS.CARD),limit(10))
            :query(collection(store,COLLECTIONS.CARD),startAfter(pageParam),limit(10,)
        )

pageparam이 null인 경우 , 즉 첫번째 페이지일때 firestore의 collections.card컬렉션에서 처음 10개의 문서를 가져오도록하고, 다음 페이지를 불러올때는, pageparam이후의 문서들 중에서 10개의 문서를 가져오도록 코드를 구현했움!

 

 

 

그리고 이렇게 구현한 내용을 바탕으로, card list페이지에서 보여줄 수 있다. 

 const { 
    data, 
    fetchNextPage, 
    hasNextPage, 
    isFetchingNextPage 
  } = useInfiniteQuery(
    ['cards'],
    ({ pageParam = null }) => {
      console.log("pageParam", pageParam);
      return getCards(pageParam);  // getCards 함수에 pageParam을 전달합니다.
    },
    {
      getNextPageParam: (lastPage) => {
        console.log("lastPage", lastPage);
        return lastPage.lastVisible || undefined;  // 다음 페이지가 있는 경우 lastVisible을 반환합니다.
      },
    },
  );

 

여기서 사용한 함수나 메서드들에 대해서 간단하게 설명하자면!

 

pageaparam

useInfiteQuery가 현재 어떤 페이지에 있는지 확인 가능 

 

getNextPageParam & FetchNextPage

다음 페이지에 있는 데이터를 조회하기 위해 사용

 

getNextPageParam

다음 api을 요청할때 사용할 pageparam값을 정함

 

FetchNextPage

다음 페이지의 데이터를 호출할때 사용 

 

이거랑 정반대로 사용하는게 getPreviousPageParam과 fetchPreviousPage이다. 

 

 

hasNextPage & (hasPreviousPage)

next랑 page는 방향만 반대니까 hasNextPage에 대해서 말하자면 , 

사용 이유는 useInfitieQuery는 무한히 호출이 가능하지만, 호출되는 데이터를 한정하기 위해 사용한다. 

리턴 타입은 boolean이며, 

이 두 함수의 return 값에 다음 api 호출에 사용될 pageParam값이 정상적으로 담겨있을 경우 hasNextPage와 hasPreviousPage는 true로 저장되고  반대로 값이 담겨 있지 않은 경우는 false로 저장

그래서 결과가 있을때에 fetchPreviousPage나 fetchNextPage를 실행되게 하여 사용할 수 있다. 

 

 

 

끝끗끝!