🤨 useSWRInfinite 사용기

특정 게시글의 댓글을 가져올 때 한 번에 모든 댓글을 가져오는 것보단 일부분 나눠서 가져오는 것이 더 맞다고 생각하여 useSWRInfinite를 사용했습니다.

👇 useSWRInfinite 사용 예시

• 공식문서 - useSWRInfinite
• 공식문서 - useSWRInfinite의 options

import useSWRInfinite from 'swr/infinite'

// getKey 사용 형태
// 현재 페이지 + 1과 이전 페이지에 대한 정보를 반환
const getKey = (pageIndex, previousPageData) => {
  // 이전 페이지의 정보를 이용해서 더 불러온 데이터가 없다면 null을 반환해서 추가적으로 요청을 해도 더 이상 받을 데이터가 없음을 명시
  if (previousPageData && !previousPageData.length) return null // 끝에 도달
  
  // 더 받을 데이터가 존재한다면 요청할 url을 반환함
  return `/users?page=${pageIndex}&limit=10`     
};

// ...
// fetcher는 useSWR()과 동일하고, option은 기존값 + 추가 4개의 값이 더 존재함 ( 자세한건 공식문서 참고 )
const { data, error, isValidating, mutate, size, setSize } = useSWRInfinite<ResponseType>(
  getKey, fetcher?, options?
);

// === data의 반환 형태 ===
// 반환 형태가 useSWR()과 다르기 때문에 사용하거나 mutate()를 이용할 때 인지하고 사용해야 타입 오류 없이 사용할 수 있다.
// useSWR()은 그냥 ResponseType 형태로 반환하고
// useSWRInfinite()는 이차원 배열 내부에 ResponseType이 들어가 있는 형태다.
[
  [
  	// ResponseType 형태
  ],
  [
  	// ResponseType 형태
  ],
  // ...
]

👏 프로젝트 적용 예시

// 2022/05/02 - 댓글 offset - by 1-blue
const [offset, setOffset] = useState(10);
// 2022/05/02 - 댓글 추가 패치 가능 여부 - by 1-blue
const [hasMoreComment, setHasMoreComment] = useState(true);
// 2022/05/02 - 댓글들 순차적 요청 - by 1-blue
const {
  data: commentsResponse,
  setSize,
  mutate: commentsMutate,
  isValidating: commentsLoading,
} = useSWRInfinite<CommentsResponse>(
  router.query.title
    ? (pageIndex, previousPageData) => {
        // 이 부분을 추가로 작성한 이유는 받아오는 데이터가 offset의 개수 이하라면 당연히 추가적으로 받아올 데이터가 없다고 판단해서 추가함
      	// 10개씩 받아오다가 6개를 받아왔다면 당연히 그 다음 받아올 데이터는 없어서 최대한 추가적인 요청을 하지 않게 함
        if (previousPageData && previousPageData.comments.length !== offset) {
          setHasMoreComment(false);
          return null;
        }
        if (previousPageData && !previousPageData.comments.length) {
          setHasMoreComment(false);
          return null;
         }
        return `/api/post/${router.query.title}/comment?page=${pageIndex}&offset=${offset}`;
      }
    : () => null
);

// 댓글 추가 mutate() 사용
commentsMutate(
  (prev) =>
    prev && [
      {
        ok: true,
        comments: [
          {
            idx: Date.now(),
            contents: body.comment,
            postIdx: postIdx,
            createdAt: new Date(Date.now()),
            updatedAt: new Date(Date.now()),
            user: me!,
            commentIdx: undefined,
          },
        ],
      },
      ...prev,
    ],
  false
);
// 댓글 삭제 mutate() 사용
commentsMutate(
  (prev) =>
    prev &&
    prev.map(({ comments }) => ({
      ok: true,
      comments: comments.filter((comment) => comment.idx !== commentIdx),
    })),
  false
);

// 댓글 타입
type Comment = {
  idx: number;
  contents: string;
  createdAt: Date;
  updatedAt: Date;

  postIdx: number;
  commentIdx?: number;
};
interface ICommentWithUser extends Comment {
  user: {
    id: number;
    name: string;
    avatar: string;
    introduction?: string;
  }
}
type CommentsResponse = {
  ok: boolean;
  comments: ICommentWithUser[];
}

👋 UX 향상을 위한 코드 적용

현재 프로젝트에 적용한 방식은 추가로 요청할 댓글이 있는 경우 버튼을 클릭하면 데이터를 받아오는 방식을 적용했습니다.
만들고 나서 공식문서를 보니 현재 페이지의 다음 페이지를 미리 가져와서 유저가 다음 페이지로 넘어갈 때 더 빠르게 이동할 수 있도록 구현하는 예시가 있어서 그것을 보고 조금 변형해서 적용했습니다.

만약 버튼에 마우스가 올라왔을 경우( 클릭 이전에 ) 미리 데이터를 패치하고 이후에 클릭하면 가져온 데이터를 바로 보여주는 방법을 사용해서 유저가 조금이라도 빠르게 서비스를 사용할 수 있도록 구현했습니다.

• 실제 적용 코드 ( 나중에 깃헙에 올리면 추가함 )

😶 참고 링크

• useSWRInfinite
• 이전 프로젝트(blemarket)에서 사용한 코드