24.09.19 팀프로젝트 트러블슈팅

1. 문제발생

내 로컬환경에서는 마이페이지의 feed가 무한스크롤로 잘 불러와지나, 팀원의 로컬환경에서는 불러와지지 않는 문제

2. 원인추론

팀원과 나의 json-server 버전이 달라 페이징 데이터 페칭관련 사용법이 달랐음

v1.0.0 / v0.17.4

1.0.0버전으로 사용하면 페이지 관련 데이터도 사용이 가능하나, 팀원이 사용하는 0.17.4버전에서는 해당 데이터를 제공해주지 않았음

  const getFeedsByPageNum = async ({ queryKey, pageParam = 1 }) => {
    const userId = localStorage.getItem("userId");
    const [_, page] = queryKey;
    const pageToFetch = page ?? pageParam;
    const response = await axios.get(`http://localhost:4001/feed?_page=${pageToFetch}&_per_page=5&userId=${userId}`);
    return response.data;
  };

  const {
    data: feeds,
    isLoading,
    isError
  } = useQuery({
    hasNextPage,
    fetchNextPage,
    isFetchingNextPage
  } = useInfiniteQuery({
    queryKey: ["feeds"],
    queryFn: getFeeds
    queryFn: getFeedsByPageNum,
    getNextPageParam: (lastPage) => {
      if (lastPage.next !== null) {
        return lastPage.next;
      }
    },
    select: (data) => {
      return data.pages.map((pageData) => pageData.data).flat();
    }
  });
  const { ref } = useInView({
    threshold: 1,
    onChange: (inView) => {
      if (!inView || !hasNextPage || isFetchingNextPage) return;
      fetchNextPage();
    }
  });

1.0.0에서는 페이지 관련 데이터를 제공해주기때문에 해당 코드로 작동하였으나, 0.17.4에서는 페이지 관련 데이터를 주지 않아 다른 방법이 필요했음

3. 해결방안

const getFeedsByPageNum = async ({ pageParam = 1 }) => {
  const userId = localStorage.getItem("userId");
  const response = await axios.get(
    `${import.meta.env.VITE_FEED_URL}/feed?_page=${pageParam}&_limit=5&userId=${userId}`
  );
  return response.data;
};

const {
  data: feeds,
  hasNextPage,
  fetchNextPage,
  isFetchingNextPage
} = useInfiniteQuery({
  queryKey: ["feeds"],
  queryFn: getFeedsByPageNum,
  getNextPageParam: (lastPage, pages) => {
    return lastPage.length === 5 ? pages.length + 1 : undefined;
  },
  select: (data) => data.pages.flat()
});

각 페이지당 최대 개수인 5를 비교하여 이전 받아온 데이터 개수가 5라면 page넘버에 1을 더해 다음 fetching을 한다.

4. 결과