해결된 질문
작성
·
355
0
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>
);
}
화면에는
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
요렇게 적혀있는데 어떤 에러일까요?
답변 1
0
안녕하세요! 우혁님!
코드를 꼼꼼히 잘 보내주셔서 문제를 쉽게 찾아볼 수 있었어요!
에러 메시지를 보시게 되면 useMutation 부분에서 에러가 있다고 알려주고 있어요!
=======================================================
=======================================================
그러면, useMutation 주변을 한 번 확인해 볼게요!
먼저, useMutation을 사용하기 위해서 아래의 코드를 import 해와야 겠죠?!
import { gql } from "@apollo/client";
export const CREATE_BOARD = gql`
mutation createBoard($createBoardInput: CreateBoardInput!) {
createBoard(createBoardInput: $createBoardInput) {
_id
}
}
`;
위 코드는 export default가 아닌, export로 내보내고 있기 때문에 import를 아래의 방식이 아닌, 중괄호'{ }' 방식으로 사용해 주셔야 겠어요!
답변 감사합니다! 헷갈렸네요 감사합니다!