[7日間-2]復習課題

課題の再記

import {useMutatiom, gql} from '@apollo/client'
import {useState} from 'react'
import {useRouter} from 'next/router'

export default function(){

  return(
  <>
   //컨텐츠는 길어서 생략.
  </>
  )
}

gqlデータを確認します.記入が必要なので、変異を調べる必要があります.

const DRAGONBALL = gql`
mutation ZZZ ($writer:String, $password: String, $title: String!, $contents:String! ){
  createBoard(
  	createBoardInput:
  	{
   	writer:$writer
    	password:$password
    	title:$title
    	contents:$contents
    })
  	{
      _id
      writer
      title
      contents
      
    }}

`

const [kakarot, UseKakarot] = useState(
	writer:""
  	password:""
  	title:""
	content:""
)

const buruma = useMutation(DRAGONBALL)

const router = useRouter()

function onChangeInput(event){
  const begita = {
    writer: kakarot.writer,
    password:kakarot.password,
    title: kakarot.title,
    contents: kakarot.content
  },[event.target.name]:event.target.value
}
//이부분 미흡하므로 여러번 작성해보자.

function onChangeInput(event){
  const begita = {...kakarot,
  [event.target.name]:event.target.value}
	setKakarot(begita)
//입력한 값을 state사용한 setKakarot 적용.

async function onClickPost(){
	try{
      const result = await buruma({
    	variables:{
            writer: kakarot.writer,
            password:kakarot.password,
            title: kakarot.title,
            contents: kakarot.content
          }        
     	})
      alert("성공")//이건 없어도됨
      console.log(kakarot.id)
      //안에 뭐가 들어가있는지 확인. 경로 확인을 위함.
      router.push(`/board/${result.data.createBoard._id}`)
      //반드시 먼저 경로 확인해보기.
     }catch(error){
     alert(error.message)
     }
}
//이부분 미흡하므로 여러번 작성해보자.