[Next] Next + react-query prefetchInfiniteQuery에서 계속 같은 page가 반복되고 새로 fetching 안 되는 에러

Ell!·2022년 6월 13일
2

next

목록 보기
4/7

에러 내용

Next js와 react-query를 함께 사용하여 Infinite Query의 첫 부분을 prefetch 시동중이었다. 어디서 에러가 났는지 제대로 알려주지 않아서 일일히 콘솔을 찍어가면 찾아낸 결과..

중간에 로딩이 길지만, 서버에서는 제대로 prefetch를 하나 그 뒤 클라이언트에서다시 fetching을 할 때 문제가 발생하는 것 같았다.

const useFeedListQuery = ({ keyword, category, search_type, uniqueID }) => {
  const fetchFeedList = async ({ pageParam = 0 }) => {
    //console.log(pageParam);  
    
    💥문제 발생!! pageParam이 null

    const response = await FeedAPI.getFeedList(
      keyword,
      category,
      search_type,
      uniqueID,
      pageParam,
    );

    const result = response.data;
    return {
      result: result.result || {}, // result?
      nextPage: pageParam + 1,
      isLastPage: result.is_last,
    };
  };

  const feedListQuery = useInfiniteQuery(
    [queryKey.FEED_LIST, keyword, category, search_type],
    fetchFeedList,
    {
      getNextPageParam: (lastPage, pages) => {
        if (!lastPage.isLastPage) return lastPage.nextPage;
        return undefined;
      },
      refetchOnWindowFocus: false,
      refetchOnMount: true,
      refetchOnReconnect: true,
      retry: 1,
      cacheTime: 60 * 1000,
    },
  );

  return feedListQuery;
};

feedListQuery의 pageParam이 계속 null로 나왔다. 분명 없을 때는 0을 부여한다고 했는데도 자꾸 저러니 참. 문제는 서버 prefetch를 제외한 클라이언트에서만 data fetching을 하면 문제가 없다는 것. 디버깅이 어려운 서버가 문제였다ㅠㅜ

해결

우선 구글링 + react-query의 issue tab에서 열심히 서칭을 했지만, 딱히 나와 비슷한 문제를 겪는 사람은 없는 것 같았다. (대부분이 Json 파싱에 대한 문제였다.)

그러던 중 pageParam의 undefined 문제를 직접 숫자를 넣어서 해결하려는 사람의 글을 찾았다. (그사람도 결국 JSON 파싱으로 문제를 해결한 것 같았다. 난 왜 안돼)

그래서 찾은 방법은 다음과 같다.

서버의 getServerSideProps 안에서 prefetch를 할 때 다음 함수를 넣어준다.

  queryClient.setQueryData(
    [queryKey.FEED_LIST, keyword, category, search_type],
    {
      pages: queryClient.getQueryData([
        queryKey.FEED_LIST,
        keyword,
        category,
        search_type,
      ]).pages,
      pageParams: [0],
    },
  );

setQueryData로 직접 pageParams의 undefined를 0으로 바꿔주었다.

그렇게 해서

return {
    props: {
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), // https://github.com/TanStack/query/issues/1458
    },
  };

리턴해주면 해결.!!! 감격스럽다🤣

(아 undefined 문제를 해결해주었으니 JSON parge, stringify는 지워줘도 된다.)

profile
더 나은 서비스를 고민하는 프론트엔드 개발자.

0개의 댓글