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

//section05/05-05-dynamic-routing-board-mutaton
import { gql, useMutation } from "@apollo/client";
import { useRouter } from "next/router";

const 나의그래프큐엘셋팅 = gql`
  mutation createBoard($writer: String, $title: String, $contents: String) {
    createBoard(writer: $writer, title: $title, contents: $contents) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const router = useRouter();

  const [myFunction] = useMutation(나의그래프큐엘셋팅);
  const onClickSubmit = async () => {
    try {
      // 코드 시도하다 실패하면 catch로 넘어감
      const result = await myFunction({
        variables: {
          //variables  === $ 역할을 함. 그렇다고 여기선 $를 쓰면 안됨
          writer: "훈이",
          title: "안녕하세요",
          contents: "반갑습니다.",
        },
      });
      console.log(result);
      console.log(result.data.createBoard.number);
      router.push(
        `/section05/05-05-dynamic-routing-board-mutation-moved/${result.data.createBoard.number}`
      );
    } catch (error) {
      alert(error.message);
    }
  };
  //한줄일땐 괄호 생략 가능
  return (
    <>
      <button onClick={onClickSubmit}>GRAPHQL-API 요청하기</button>
    </>
  );
}

//section05/05-05-dynamic-routing-board-mutation-moved/[number]
import { useQuery, gql } from "@apollo/client";
import { useRouter } from "next/router";
// 폴더 [qqq] 대괄호로 감 싸놓으면 폴더가 변수가됨
const FETCH_BOARD = gql`
  query fetchBoard($number: Int) {
    fetchBoard(number: $number) {
      number
      writer
      title
      contents
    }
  }
`;

export default function StaticRoutingMovedPage() {
  const router = useRouter();
  console.log( router);
  const { data } = useQuery(FETCH_BOARD, {
    variables: { number: Number(router.query.number) },
    //graphql fetchBoard에 자료가 없거나 null이면 오류가 뜸
  });

  console.log(data);

  return (
    <>
      <div> {router.query.number}번 게시글 </div>
      <div>작성자 : {data?.fetchBoard?.writer}</div>
      <div>제목 : {data?.fetchBoard?.title}</div>
      <div>내용 : {data?.fetchBoard?.contents}</div>
      {/* 자료가 없거나 null이 뜨면 fetchBoard에 옵셔널체이닝('?' 자료가 오면 다시 리 렌더링 해줌) 붙이기  */}
    </>
  );
}

게시물을 정상적으로 잘 등록이 됩니다 플레이그라운드에서 fetchboard 조회를 해봐도 잘 나옵니다.
네트워크 탭에 들어가도 아무것도 안나오고 콘솔에는 그저

on-demand-entries-client.js:86 GET http://localhost:3000/section05/05-05-dynamic-routing-board-mutation-moved/23131 404 (Not Found)
뭐가 문제일까요?