UPDATE_BOARD 400error
useForm 이용해서 하고있는데 update_board를 할때 계속 try에서 catch(error)로 넘어가네요 ㅠ
presenter.js
import * as S from "./BoardWriter.styles";
export default function BoardWriteUI(props) {
return (
<S.Wrapper onSubmit={props.isEdit?
props.handleSubmit(props.onClickUpdate, props.onInValid) :
props.handleSubmit(props.onValid, props.onInValid)}>
<S.Title>{props.isEdit? "게시글 수정": "게시글 등록"}</S.Title>
<S.WriterWrapper>
<S.InputWrapper>
<S.Label>작성자</S.Label>
<S.Writer {...props.register("writer", {
validate : (value) => value ? true:"작성자를 작성해주세요."}
)}
onChange={e => props.onChangeWriter(e)}
type="text" placeholder="이름을 적어주세요."/>
<S.Error>{props.errors.writer?.message}</S.Error>
</S.InputWrapper>
<S.InputWrapper>
<S.Label>비밀번호</S.Label>
<S.Password {...props.register("password", {
validate : (value) => value? true: "비밀번호를 작성해주세요."}
)}
onChange={e => props.onChangePassword(e)}
type="password" placeholder="비밀번호를 작성해주세요." />
<S.Error>{props.errors.password?.message}</S.Error>
</S.InputWrapper>
</S.WriterWrapper>
<S.InputWrapper>
<S.Label>제목</S.Label>
<S.Subject {...props.register("title", {
validate : (value) => value? true: "제목을 작성해주세요."}
)}
onChange = {e => props.onChangeTitle(e)}
type="text" placeholder="제목을 작성해주세요." />
<S.Error>{props.errors.title?.message}</S.Error>
</S.InputWrapper>
<S.InputWrapper>
<S.Label>내용</S.Label>
<S.Contents {...props.register("contents", {
validate : (value) => value? true: "내용을 작성해주세요."}
)}
onChange={e => props.onChangeContents(e)}
placeholder="내용을 작성해주세요." />
<S.Error>{props.errors.contents?.message}</S.Error>
</S.InputWrapper>
<S.InputWrapper>
<S.Label>주소</S.Label>
<S.ZipcodeWrapper>
<S.Zipcode {...props.register("boardAddress")} placeholder="07250" />
<S.SearchButton>우편번호 검색</S.SearchButton>
</S.ZipcodeWrapper>
<S.Address />
<S.Address />
</S.InputWrapper>
<S.InputWrapper>
<S.Label>유튜브</S.Label>
<S.Youtube {...props.register("youtubeUrl")} placeholder="링크를 복사해주세요." />
</S.InputWrapper>
<S.ImageWrapper>
<S.Label>사진첨부</S.Label>
<S.UploadButton>+</S.UploadButton>
<S.UploadButton>+</S.UploadButton>
<S.UploadButton>+</S.UploadButton>
</S.ImageWrapper>
<S.OptionWrapper>
<S.Label>메인설정</S.Label>
<S.RadioButton type="radio" id="youtube" name="radio-button" />
<S.RadioLabel htmlFor="youtube">유튜브</S.RadioLabel>
<S.RadioButton type="radio" id="image" name="radio-button" />
<S.RadioLabel htmlFor="image">사진</S.RadioLabel>
</S.OptionWrapper>
<S.ButtonWrapper>
<S.SubmitButton
isActive={props.isActive}
type="submit">{props.isEdit? "수정하기": "등록하기"}</S.SubmitButton>
</S.ButtonWrapper>
</S.Wrapper>
);
}
quires.js
import { gql } from '@apollo/client'
export const CREATE_BOARD = gql`
mutation createBoard($createBoardInput: CreateBoardInput!) {
createBoard(createBoardInput : $createBoardInput){
_id
}
}
`
export const UPDATE_BOARD = gql`
mutation updateBoard($updateBoardInput: updateBoardInput!, $password: String, $boardId: ID!) {
updateBoard(updateBoardInput: $updateBoardInput, password: $password, boardId: $boardId) {
_id
}
}
`container.js
import { useState } from 'react'
import { useForm } from 'react-hook-form';
import { useRouter } from 'next/router';
import { useMutation } from '@apollo/client'
import BoardWriteUI from './BoardWriter.presenter';
import { CREATE_BOARD, UPDATE_BOARD } from './BoardWriter.queries';
export default function BoardsWriteContainer(props) {
const router = useRouter()
const [isActive, setIsActive] = useState(true)
const [createBoard] = useMutation(CREATE_BOARD)
const [updateBoard] = useMutation(UPDATE_BOARD)
const {
register,
watch,
handleSubmit,
formState: { errors }
} = useForm();
const onChangeWriter = (e) => {
e.target.value && watch("password") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true)
}
const onChangePassword = (e) => {
e.target.value && watch("writer") && watch("title") && watch("contents") ? setIsActive(false) : setIsActive(true)
}
const onChangeTitle = (e) => {
e.target.value && watch("password") && watch("writer") && watch("contents") ? setIsActive(false) : setIsActive(true)
}
const onChangeContents = (e) => {
e.target.value && watch("password") && watch("title") && watch("writer") ? setIsActive(false) : setIsActive(true)
}
const onValid = async (data) => {
try {
const result = await createBoard({
variables: {
createBoardInput: {
writer: data.writer,
title: data.title,
password: data.password,
contents: data.contents,
}
}
})
console.log(result.data.createBoard._id)
alert("게시물이 정상적으로 등록되었습니다.")
router.push(`/boards/${result.data.createBoard._id}`)
} catch(error) {
alert(error.message)
}
}
const onInValid = (error) => {
console.log("에러입니다", error)
}
const onClickUpdate = async (data) => {
try {
const result = await updateBoard({
variables: {
updateBoardInput : {
title: data.title,
contents: data.contents
},
password : data.password,
boardId : router.query.boardid,
}
})
console.log(result)
// router.push(`/boards/${router.query.boadid}`)
} catch(error) {
console.log(error)
}
}
return <BoardWriteUI
onValid = {onValid}
oninValid = {onInValid}
register = {register}
handleSubmit = {handleSubmit}
errors = {errors}
onChangeContents = {onChangeContents}
onChangeTitle = {onChangeTitle}
onChangePassword = {onChangePassword}
onChangeWriter = {onChangeWriter}
onClickUpdate = {onClickUpdate}
isActive={isActive}
isEdit={props.isEdit}
/>
}
답변 1
0
안녕하세요! 무연님!
현재 올려주신 코드를 확인해 보니, 오타 등의 문제는 아닌 것 같아요!
Network 탭의 에러 메시지를 확인하여 문제를 해결해 보는게 좋을 것 같아요!
fetchBoardsOfMine, fetchBoardsCountOfMine 에러 문의드립니다
0
40
1
댓글 기능 구현 중 질문드립니다.
0
67
1
쿠폰코드 발급
0
140
2
example 서버 플레이그라운드, API 접속 모두 안됩니다.
0
87
2
문의드립니다!! ㅠㅠ
0
104
2
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
0
78
2
_app.js 작성 이후로 에러가 발생하네요
0
95
2
학습자료
0
71
2
학습자료가 안열립니다.
0
51
2
플레이 그라운드 퀴즈 문제 질문이 있습니다.
0
61
0
기존강의 구매자, 업데이트 끝인가요?
0
110
3
업데이트 버전 수강
0
89
2
완벽한 프론트엔드
0
136
2
나만의 쇼핑몰 샘플 페이지 접속 확인부탁드립니다.
0
84
1
graphql 접속이 안됩니다.
0
101
2
const, let 사용 질문 드립니다.
0
71
2
싸이월드 만들기 1탄 피드백 부탁드립니다.
0
122
2
회원가입 과제 피드백 부탁드립니다.
0
81
2
styled.span / styled.input "CSS 자동완성"
0
47
1
쿠폰 발급 관련
0
167
2
서버 502 error
0
247
2
쿠폰 다시 부탁드려도 될가여?
0
140
2
a태그 패딩했을때 왜 크기가 줄어들지 않고 늘어나나요
0
185
2
2분 44초 질문
0
132
3





