inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

포트폴리오 리뷰 (boards 수정 2편)

UPDATE_BOARD 400error

해결된 질문

413

김무연

작성한 질문수 12

0

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}
  />
}

react node.js seo graphql next.js

답변 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