Uncaught at new InvariantError (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\ts-invariant\lib\invariant.cjs:16:28)

at Object.invariant (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\ts-invariant\lib\invariant.cjs:28:15)

at parser (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\@apollo\client\react\parser\parser.cjs:34:23)

at Object.verifyDocumentType (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\@apollo\client\react\parser\parser.cjs:93:21)

at useMutation (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\@apollo\client\react\hooks\hooks.cjs:431:12)

at BoardWrite (webpack-internal:///./pages/src/components/units/board/write/BoardWrite.container.js:34:86)

at processChild (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3353:14)

at resolve (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)

at ReactDOMServerRenderer.render (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)

at ReactDOMServerRenderer.read (file://C:\Users\82109\OneDrive\바탕 화면\codecamp-frontend-mentee\freeboard_frontend\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)

콘솔창에는 이렇게 찍히고

콘테이너 코드입니다

import { useMutation } from "@apollo/client";
import { useRouter } from "next/router";
import { useState } from "react";
import CREATE_BOARD from "./BoardWrite.queries";
import BoardWriteUI from "./BoardWrite.presenter";

export default function BoardWrite() {
  const router = useRouter();
  //입력값 받는 훅
  const [writer, setWriter] = useState("");
  const [password, setPassword] = useState("");
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  //오류코드 받는 훅
  const [writerError, setWriterError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [titleError, setTitleError] = useState("");
  const [contentsError, setContentsError] = useState("");

  //입력값 저장하는 훅
  const [createBoard] = useMutation(CREATE_BOARD);

  //입력값(작성자) 받는곳 & 오류창 없애는곳
  function onChangeWriter(event) {
    setWriter(event.target.value);
    if (event.target.value !== "") {
      setWriterError("");
    }
  }

  function onChangePassword(event) {
    setPassword(event.target.value);
    if (event.target.value !== "") {
      setPasswordError("");
    }
  }

  function onChangeTitle(event) {
    setTitle(event.target.value);
    if (event.target.value !== "") {
      setTitleError("");
    }
  }

  function onChangeContents(event) {
    setContents(event.target.value);
    if (event.target.value !== "") {
      setContentsError("");
    }
  }

  //등록 함수
  const onClickInformation = async () => {
    if (!writer) {
      setWriterError("작성자를 입력해주세요");
    }
    if (!password) {
      setPasswordError("비밀번호를 입력해주세요");
    }
    if (!title) {
      setTitleError("제목을 입력해주세요");
    }
    if (!contents) {
      setContentsError("내용을 입력해주세요");
    }
    if (writer && password && title && contents) {
      try {
        const result = await createBoard({
          variables: {
            createBoardInput: {
              writer,
              password,
              title,
              contents,
            },
          },
        });
        console.log(result.data.createBoard._id);
        router.push(`/portfolio/boards/${result.data.createBoard._id}`);
      } catch (error) {
        alert(error.message);
      }
    }
  };

  return (
    <div>
      <BoardWriteUI
        aaa={onChangeWriter}
        bbb={onChangePassword}
        ccc={onChangeTitle}
        ddd={onChangeContents}
        eee={onClickInformation}
        aaaa={writerError}
        bbbb={passwordError}
        cccc={titleError}
        dddd={contentsError}
      />
    </div>
  );
}

유아이 코드입니다

import {
  Container,
  MainTitle,
  InformationBox,
  WriterBox,
  WriterInput,
  Title,
  TitleContents,
  TitleBox,
  Input,
  ContentsContent,
  AddressNumber,
  AddressBox,
  ButtonOne,
  AddressBtnBox,
  PicContentsBox,
  CheckBoxes,
  CheckBoxesContainer,
  CheckBoxSpan,
  OkBtn,
  UploadBtn,
  Address,
  ErrorText,
} from "./BoardWrite.styles";

export default function BoardWriteUI(props) {
  return (
    //html 자리

    <Container>
      <MainTitle>게시물 등록</MainTitle>
      <InformationBox>
        <WriterBox>
          <Title>작성자</Title>
          <WriterInput
            type="text"
            placeholder="이름을 적어주세요."
            onChange={props.aaa}
          ></WriterInput>
          <ErrorText>{props.aaaa}</ErrorText>
        </WriterBox>
        <WriterBox>
          <Title>비밀번호</Title>
          <WriterInput
            type="password"
            placeholder="비밀번호를 적어주세요."
            onChange={props.bbb}
          ></WriterInput>
          <ErrorText>{props.bbbb}</ErrorText>
        </WriterBox>
      </InformationBox>
      <TitleBox>
        <Title>제목</Title>
        <TitleContents
          type="text"
          placeholder="제목을 작성해주세요."
          onChange={props.ccc}
        ></TitleContents>
        <ErrorText>{props.cccc}</ErrorText>
      </TitleBox>
      <TitleBox>
        <Title>내용</Title>
        <ContentsContent
          type="text"
          placeholder="내용을 작성해주세요."
          onChange={props.ddd}
        ></ContentsContent>
        <ErrorText>{props.dddd}</ErrorText>
      </TitleBox>
      <AddressBox>
        <Title>주소</Title>
        <AddressBtnBox>
          <AddressNumber type="text" placeholder="07250"></AddressNumber>
          <ButtonOne>우편번호 검색</ButtonOne>
        </AddressBtnBox>
        <Address type="text"></Address>
        <Address type="text"></Address>
      </AddressBox>
      <TitleBox>
        <Title>유튜브</Title>
        <Input type="text" placeholder="링크를 복사해주세요."></Input>
      </TitleBox>
      <TitleBox>
        <Title>사진 첨부</Title>
        <PicContentsBox>
          <UploadBtn>+</UploadBtn>
          <UploadBtn>+</UploadBtn>
          <UploadBtn>+</UploadBtn>
        </PicContentsBox>
      </TitleBox>
      <TitleBox>
        <Title>메인 설정</Title>
        <CheckBoxesContainer>
          <CheckBoxes type="checkbox"></CheckBoxes>
          <CheckBoxSpan className="youtube">유튜브</CheckBoxSpan>
          <CheckBoxes type="checkbox"></CheckBoxes>
          <CheckBoxSpan className="youtube">사진</CheckBoxSpan>
        </CheckBoxesContainer>
      </TitleBox>
      <OkBtn onClick={props.eee}>등록하기</OkBtn>
    </Container>
  );
}

쿼리 코드입니다

import { gql } from "@apollo/client";

export const CREATE_BOARD = gql`
  mutation createBoard($createBoardInput: CreateBoardInput!) {
    createBoard(createBoardInput: $createBoardInput) {
      _id
    }
  }
`;

마지막으로 인덱스 코드입니다,

import BoardWrite from "../../../src/components/units/board/write/BoardWrite.container";

export default function board() {
  //자바스크립트 자리

  return (
    //html 자리
    <div>
      <BoardWrite />
    </div>
  );
}

화면에는

Server Error

Invariant Violation: Argument of undefined passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document

요렇게 적혀있는데 어떤 에러일까요?