인프런 커뮤니티 질문&답변

안녕하세요!

다음과 같이 hook이 선언되기 전에 if조건문이 위치하여 오류가 발생하였습니다. useMutation은 조건문이 실행되기 전에 선언해주면 해결되었는데 useQuery는 router를 사용하기 때문에 조건문보다 먼저 선언이 될 수 없었습니다.

그래서 조건문을 없애기 위해서 router.query.boardId 를 string타입으로 변환하여도 상관이 없나요?

1차 오류 발생

if (!router || typeof router.query.boardId !== "string") return <></>;

  const { data } = useQuery<
    Pick<IQuery, "fetchBoardComments">,
    IQueryFetchBoardCommentsArgs
  >(FETCH_BOARD_COMMENTS, {
    variables: { boardId: router.query.boardId },
  });

  const [deleteBoardComment] = useMutation<
    Pick<IMutation, "deleteBoardComment">,
    IMutationDeleteBoardCommentArgs
  >(DELETE_BOARD_COMMENT);

//오류 원인
React Hook "useMutation" is called conditionally. 
React Hooks must be called in the exact same order in every component render. 
Did you accidentally call a React Hook after an early return?  const { data } = useQuery<

//string으로 변환  
const { data } = useQuery<
 Pick<IQuery, "fetchBoardComments">,
 IQueryFetchBoardCommentsArgs>(FETCH_BOARD_COMMENTS, {
 variables: { boardId: String(router.query.boardId) },
});