📁 useSWRInfinite | SWR

SWR은 pagination과 infinite loading과 같은 common UI pattern을 지원하는 API인 useSWRInfinite를 제공

🗒 useSWRInfinite

• 하나의 hook으로 여러 개의 요청을 트리거 할 수 있다.

// 기본 형태
import useSWRInfinite from 'swr/infinite'

// ...
const { data, error, isValidating, mutate, size, setsize } = useSWRInfinite(getKey, fetcher?, options?);

• useSWR과 유사한 형태
• getKey, fetcher, options를 반환하는 함수를 받음
• useSWR이 반환하는 모든 값(data, error, isValidating, mutate) + size, setSize(React state와 같은)를 반환

API

Parameters

• getKey : 현재 페이지의 인덱스(pageIndex)와 이 전 페이지의 데이터(previousPageData)를 받고 페이지의 키를 반환하는 함수
  • 각 페이지의 SWR 키를 얻기 위한 함수
  • fetcher에 의해 허용된 값을 반환
  • null이 반환된다면, 페이지의 요청이 시작되지 않음

const getKey = (pageIndex, previousPageData) => {
    // 끝에 도달하면 페이지를 요청하지 않음
    if(previousPageData && !previousPageData.length) return null;
    
    // SWR키 반환
    return `${API_ENDPOINT}?page=${pageIndex}&limit=10`;
}

• fetcher : 데이터를 가져오기 위한 함수를 반환하는 Promise로 SWR의 key를 받고 데이터를 반환하는 비동기 함수(useSWR의 fetcher와 동일)

• options : SWR hook을 위한 옵션 객체, useSWR이 지원하는 모든 옵션 + 아래의 네 개의 옵션

  • initialSize = 1 : 초기에 로드해야 하는 페이지 수
  • revalidateAll = false : 항상 모든 페이지의 갱신 시도
  • revalidateFirstPage = true : 항상 첫 페이지의 갱신 시도
  • persistSize = false : 첫 페이지의 키가 변경될 때, 페이지 크기를 1로 초기화하지 않음(initialSize가 설정된 경우 initialSize)

    ⚠︎ initialSize 옵션은 lifecycle에서 변경할 수 없다.

Return Values

• data : 주어진 키에 대한 데이터의 각 페이지의 response의 배열

// data 예시
[
  [
    { name: 'Alice', ... },
    { name: 'Bob', ... },
    { name: 'Cathy', ... },
    ...
  ],
  [
    { name: 'John', ... },
    { name: 'Paul', ... },
    { name: 'George', ... },
    ...
  ],
  ...
]

• error : fetcher가 던진 에러 또는 undefined(useSWR의 error와 동일)
• isValidating : 요청이나 갱신의 로딩 여부(useSWR의 isValidating와 동일)
• mutate
  • 캐시 된 데이터를 뮤테이트 하기 위한 함수
  • useSWR의 바인딩 될 mutate함수와 동일하지만 데이터 배열을 다룸
• size : 가져올 페이지 및 반환할 페이지의 수
• setSize : 가져올 페이지의 수를 설정

🗒 그래서 어떻게 하나요?

data의 구조 확인

• data의 구조를 확인하기 위해 console로 확인

useEffect(() => {
      console.log(data);
}, [data]);

• 배열 안에 배열 형태(2차원 배열)로 데이터가 나타난다.

• 다음 페이지의 데이터를 어떻게 받아오는지 확인
  ⇒ Return Values의 data 예시와 동일하게 나타남

pageIndex와 setSize의 관계

• setSize를 할 때 마다 getKey의 pageIndex와 데이터가 어떻게 나타나는지 console로 확인

⇒ console로 확인해보니 위의 설명들이 이해가 가기 시작한다.

• pageIndex의 초기값 = 0
• limit=10으로 설정하여 데이터가 10개씩 하나의 배열로 묶인다.
• setSize에 따라 하나의 배열로 묶인 10개의 데이터가 size만큼 나타난다.
  • setSize(1)이라면,
    • pageIndex=0인 getKey 호출
      ⇒ 1 개의 페이지를 가져온다.
  • setSize(3)이라면,
    • pageIndex=0인 getKey 호출
    • pageIndex=1인 getKey 호출
    • pageIndex=2인 getKey 호출
      ⇒ 3 개의 페이지를 가져온다.
  ⇒ setSize의 값 만큼 pageIndex가 하나씩 증가하면서 getKey가 호출되는 방식

data를 보여줘야지.. 어떻게?

• Array.flat()을 이용하여 2차원 배열을 1차원 배열로 바꿔주기
  • Array.flat()은 V8 브라우저 엔진에서 최적화 되어 있지 않아 성능이 떨어진다고 하니 다른 방법으로 사용하는 것을 추천드립니다.

• 1차원 배열이 된 데이터를 Array.prototype.map()을 사용하여 마무리🤓

참고

• SWR - 페이지네이션
• useSWRInfinite의 setSize, getKey 분석
• Array.prototype.flat() - MDN
• Array.flat() 은 느리다.