[7日間-2]復習課題

課題の再記

作成者、コンテンツなどのボタンを入力する場合は、次の画面に値を適用します.アドレスは投稿IDでなければなりません.
作成者、タイトル、タイトル、IDアドレスを反映します.
*cssは授業の初日にやったので、熟練していません.後で修正します.

このように出てくる
1ページ目に必要な機能

データパケット-反応->状態

通信伝送-apollp->突然変異
->async/await、try/catchを使用します.

ページ-next->ルータ

感情->*既存のベースで作成されており、省略を優先しています.

作業手順

state、変異、ルータ機能のロード.

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

の完全な関数を作成します.

export default function(){

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

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

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:""
)

クリック時に適用される変異宣言.gqlで割り当てられた変数を()に入れます.

const buruma = useMutation(DRAGONBALL)

ルータ宣言は

ページ移動可能です.

const router = useRouter()

onChangeInput関数を宣言して、

入力ボックスに入力された値を検出します.**上に宣言したstateを利用!
概念を理解するためにスプレッドシートを無効にします.

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 적용.

をクリックすると、関数onClickPostが宣言されます.
クリックすると通信機能を使用し、async/await(通信完了待ち)とtry/catch(成功したかどうかを確認)を使用します.

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)
     }
}
//이부분 미흡하므로 여러번 작성해보자.

1ページ目はここまで