같은 API 두 번 요청을 합니다.

크롬 개발자 도구에서 페이로드 확인을 하면 fetchBoards가 두번 요청을 합니다.

시작점을 확인을 해보면 createUploadLink.js에서 빈 값으로 요청을 하고

두 번째 요청에서는 제대로 index.tsx에서 값을 넣고 refetch를 진행을 합니다.

fetchBoards가 1,3번 이고 fetchBoardsCount가 2번 입니다.

사용하는데 있어 아무런 문제 없이 사용이 가능한데 왜 이런 현상이 있는지 해결을 하고 싶습니다.

첫 마운트가 되거나 API요청을 하면 불필요한 fetchBoards, fetchBoardsCount가 createUploadLink.js에서 요청이 가는데

ApolloClient Setting 부분에서 요청이 가는 걸 확인 했습니다.

const uploadLink = createUploadLink({
    uri: "http://backend-practice.codebootcamp.co.kr/graphql",
  });

  const client = new ApolloClient({
    link: ApolloLink.from([uploadLink]),
    cache: new InMemoryCache(),
  });

refetch하는 전체 코드입니다.

// test - refetch 문제
export default function Hom(): JSX.Element {
  const { data, refetch } = useQueryFetchBoards();
  const { data: dataBoardsCount, refetch: refetchBoardsCount } =
    useQueryFetchBoardsCount();
  const router = useRouter();
  const render = useRef(false);

  useEffect(() => {
    // 첫 마운트 실행 막음
    if (!render.current) {
      render.current = true;
      console.log("처음 실행됨");
      return;
    }

    const search = String(router.query.search);
    const page = Number(router.query.page) || 1;
    if (search === "undefined") {
      void refetch({ page });
      console.log("검색X");
    } else {
      void refetch({ page, search });
      void refetchBoardsCount({ search });
      console.log("검색O");
    }
    console.log("Hom Search: ", search);
  }, [router.query]);

  return (
    <>
      <SearchBar />
      {data?.fetchBoards.map((el, index) => (
        <div key={index}>{el.title}</div>
      ))}
      <Pagination count={dataBoardsCount?.fetchBoardsCount} />
    </>
  );
}

여기서 <SearchBar /> , <Pagination />는 router.push에서 query로 ?search= , ?page= 쿼리스트링 만드는 역할만 하고 있고 전체 부모 컴포넌트에서 useEffetch로 refetch하고 있습니다.

"next": "13",

"react": "^18.2.0",

"apollo-upload-client": "^17.0.0",

입니다.