게시글 수정

onClickSubmit

게시글 등록하기 버튼을 누르면
백엔드에 mutation 보내고 응답을 받아와서
응답 result에 저장 후 게시글 상세 페이지로 이동

  const onClickSubmit = 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(`/boards/${result.data.createBoard._id}`)
      } catch (error) {
        alert(error.message)
      }
    }
  }

onClickMove

게시글 상세 페이지에서 수정하러 가기 버튼을 누르면
게시글 수정 페이지로 이동

const onClickMove = () => {
    router.push(`/boards/${router.query.Boardid}/edit`)
  }

onClickUpdate

수정 페이지에서 수정 후 게시글 상세 페이지로 돌려주기
즉, 수정 페이지에서 수정하기 버튼을 누르면
onClickUpdate 함수가 실행이 되면서
수정 mutation을 보내주고 게시글 상세 페이지로 이동

등록 페이지와 수정 페이지의 컴포넌트는 동일하므로
BoardWrite 컴포넌트의 input창에서 등록, 수정 모두 수행
등록값, 수정값 모두 writer, title, contents에 저장됨

updateBoard 함수의 variables에서 number는..
현재 이 컴포넌트는 수정 페이지에서 import하고 있는데
수정 페이지의 주소창은 [number]를 가짐
즉, router.query.number를 가져올 수 있음

컴포넌트가 하나로 합쳐져서 실행되므로
등록 페이지에서 router.query.number의 값은 undefined

router.query.number는 주소창에서 가져온 값이므로
문자열string이라 number로 변환해줘야함

수정mutation에서는 수정 요청을 보내놓고 수정 다 될때까지 기다려야하므로
async / await 사용

onClickSubmit / onClickUpdate 실패할 수도 있어서
try/catch 붙여주면 좋음

수정된 내용을 상세페이지에서 fetchBoard로 받아와서
수정 내용 확인 가능!

  const onClickUpdate = async () => {
    try {
      const result = await updateBoard({
        variables: {
          boardId: router.query.boardId,
          password,
          updateBoardInput: {
            title,
            contents
          },
        },
      })
      router.push(`/boards/${result.data.updateBoard._id}`)
    } catch(error) {
      alert(error.message)
    }
  };