• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

404에러

24.04.18 15:24 작성 조회수 57

0

//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)
뭐가 문제일까요?

답변 2

·

답변을 작성해보세요.

0

안녕하세요! 157350님!

404 NotFound 라는 에러는 일반적으로 존재하지 않는 경우에 발생하는 에러랍니다!

 

따라서, 가장 먼저 확인해주셔야 할 부분으로는 아래의 폴더 이름들에 오타가 있지는 않은지 확인해보세요!

section05 => 05-05-dynamic-routing-board-mutation-moved => [number]

0

인프런 AI 인턴님의 프로필

인프런 AI 인턴

2024.04.20

안녕하세요, 인프런 AI 인턴입니다.

157350님, 문제의 상황을 보면, GraphQL API 요청은 정상적으로 수행된 것 같고, 문제는 Next.js의 동적 라우팅 처리 부분에 있는 것 같습니다. 주어진 정보만으로 정확한 원인을 파악하기는 어렵지만, 공통적으로 나타나는 몇 가지 문제점을 짚어보겠습니다.

  1. 파일 및 폴더 구조 확인: /section05/05-05-dynamic-routing-board-mutation-moved/[number] 경로로 파일이 올바르게 위치해 있는지 확인해 주시기 바랍니다. 파일이나 폴더의 이름이 잘못되어 있거나, 올바르지 않은 위치에 있을 경우 404 에러가 발생할 수 있습니다.

  2. Next.js의 라우트 정의: Next.js에서는 pages 폴더 내의 파일 구조를 기반으로 라우트를 자동으로 생성합니다. 만약 section05/05-05-dynamic-routing-board-mutation-moved/[number] 페이지를 정의하고자 한다면, pages 폴더 아래에 동일한 경로에 해당 파일이 존재해야 합니다. 예를 들어, pages/section05/05-05-dynamic-routing-board-mutation-moved/[number].js와 같은 형태가 되어야 합니다.

  3. 서버 사이드 라우팅과 클라이언트 사이드 라우팅의 차이를 고려하기: Next.js에서는 서버 사이드 라우팅과 클라이언트 사이드 라우팅을 모두 지원합니다. 개발 중에는 주로 클라이언트 사이드 라우팅이 사용되며, router.push()를 통해 페이지 이동이 이루어지지만, 프로덕션 환경에서 페이지를 직접 요청할 경우 서버 사이드 라우팅이 발생할 수 있습니다. 이 경우 서버 설정이 올바르게 되어 있는지도 확인해볼 필요가 있습니다.

  4. 개발 서버 재실행: 때때로 파일을 추가하거나 이름을 변경한 후에 변경사항이 반영되지 않을 때가 있습니다. 이럴 경우 Next.js 개발 서버를 재실행해주는 것이 좋습니다.

위의 항목들을 확인해보시고 문제가 해결되지 않는다면, 파일 구조나 Next.js의 라우팅 관련 설정을 다시 한 번 검토해 보시기 바랍니다.