Routing (Static/Dynamic)

Dynamic Routing 게시글 작성

dynamic-routing-board-mutation

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

const CREATE_BOARD = gql`
  mutation createBoard($writer: String, $title: String, $contents:String ){   #변수의 타입 적는 곳
   createBoard(writer:$writer, title:$title, contents :$contents){            # 실제 우리가 전달할 변수 적는 곳
      _id
      number
      message
   }
  } 
`

export default function GraphqlMutationPage(){

   const router = useRouter()

   const [writer, setWriter] = useState("")
   const [title, setTitle] = useState("")
   const [contents, setContents] = useState("")

   const [나의함수] = useMutation(CREATE_BOARD)

   const onClickSubmit = async () =>{

      try {
         const result = await 나의함수({
            variables:{ //variables : 이게 $역할
               writer: writer,
               title: title,
               contents : contents
            }
         })
         console.log(result)
         alert(result.data.createBoard.message)
         result.data.createBoard.number
         /*router.push("/10-dynamic-routed-board-mutation/" + result.data.createBoard.number)*/
         router.push(`/10-dynamic-routed-board-mutation/${result.data.createBoard.number}`)  /* 템플릿 리터럴 */
      } catch (error){
         // try에 있는 내용을 시도하다가 실패하면, 아랫줄 모두 무시하고 catch가 실행됨
         console.log (error.message)
         alert(error.message)
      }

   }

   const onChangeWriter = (event) =>{
      setWriter( event.target.value )
   }

   const onChangeTitle = (event) =>{
      setTitle( event.target.value )
   }

   const onChangeContents = (event) =>{
      setContents( event.target.value )
   }


   return (
      <>
         작성자 : <input type='text' onChange={onChangeWriter}/>
         제목 : <input type='text' onChange={onChangeTitle}/>
         내용 : <input type='text' onChange={onChangeContents}/>
         <button onClick={onClickSubmit}>GRAPHQL-API(동기)요청하기</button>
      </>
   );
};

dynamic-routed-board-mutation[number]

import React from 'react';
import {useQuery, gql} from '@apollo/client'
import { useRouter } from 'next/router';

const FETCH_BOARD = gql`
   query fetchBoard($number:Int){
      fetchBoard(number:$number){
         writer
         title
         contents
      }
   }
`

export default function StaticRoutedPage(){

   const router = useRouter()
   console.log(router)
   console.log(router.query.number)


   const {data} = useQuery(FETCH_BOARD, {
      variables : {number : Number(router.query.number)}
   })


   return (
      <>
         <div>{router.query.number}번 게시글로 이동 완료</div>
         <div>작성자 : {data ? data.fetchBoard.writer : "로딩 중.."}</div>
         <div>제목 : {data && data.fetchBoard.title}</div>
         <div>내용 : {data?.fetchBoard.contents}</div>
      </>
   )
}

try ~ catch문을 통해 성공에 대한 처리와 실패에 대한 처리를 나누어 작업

💡💡💡 dynamic 폴더 속 정보를 가져오려면??

다이나믹 폴더의 파라미터는 router.query를 통해 접근한다.
query는 dynamic router의 파라미터를 포함한 조회가 가능한 정보를 담은 객체

💻 실행결과

---

Dynamic Routing 페이지 이동

dynamic-routing-board-query

import React from 'react';
import { useState } from 'react';
import { useRouter } from 'next/router';


export default function StaticRoutingPage(){

   const router = useRouter()

   const onClickMove1 = () => {
      router.push("/dynamic-routed-board-query/1")
   }
   const onClickMove2 = () => {
      router.push("/dynamic-routed-board-query/2")
   }
   const onClickMove3 = () => {
>       router.push("/dynamic-routed-board-query/3")
   }
   const onClickMove100 = () => {
      router.push("/dynamic-routed-board-query/100")
   }

   return (
      <>
         <button onClick={onClickMove1}>1번 게시글로 이동</button><br/>
         <button onClick={onClickMove2}>2번 게시글로 이동</button><br/>
         <button onClick={onClickMove3}>3번 게시글로 이동</button><br/>
         <button onClick={onClickMove100}>100번 게시글로 이동</button><br/>
      </>
   );
};

dynamic-routed-board-query > [qqq]

import React from 'react';
import {useQuery, gql} from '@apollo/client'
import { useRouter } from 'next/router';

const FETCH_BOARD = gql`
   query fetchBoard($number:Int){
      fetchBoard(number:$number){
         writer
         title
         contents
      }
   }
`

export default function StaticRoutedPage(){

   const router = useRouter()
   console.log(router)
   console.log(router.query.qqq)


   const {data} = useQuery(FETCH_BOARD, {
      variables : {number : Number(router.query.qqq)}
   })

   console.log("========")
   console.log(data)
   console.log("========")

   return (
      <>
         <div>{router.query.qqq}번 게시글로 이동 완료</div>
         <div>작성자 : {data ? data.fetchBoard.writer : "로딩 중.."}</div>
         <div>제목 : {data && data.fetchBoard.title}</div>
         <div>내용 : {data?.fetchBoard.contents}</div>
      </>
   );
};

💻 실행결과

---

Static Routing 페이지 이동

static-routing-board-query

import { useRouter } from 'next/router';
import React from 'react';



export default function StaticRoutingPage(){

   const router = useRouter()

   const onClickMove1 = () =>{
      router.push("/0523-static-routed-board-query/1")
   }
   const onClickMove2 = () =>{
      router.push("/0523-static-routed-board-query/2")
   }
   const onClickMove3 = () =>{
      router.push("/0523-static-routed-board-query/3")
   }

   return (
      <>
         <button onClick={onClickMove1}>1번 게시글 이동하기</button>
         <button onClick={onClickMove2}>2번 게시글 이동하기</button>
         <button onClick={onClickMove3}>3반 게시글 이동하기</button>
      </>
   );
};

static-routed-board-query > 1 (2,3 동일)

import { useQuery, gql } from '@apollo/client';
import React from 'react';


// FETCH_BOARD => 조회
const FETCH_BOARD = gql`
   query fetchBoard($number:Int){   
      fetchBoard(number :$number){
         writer
         title
         contents
      }
   }
`

export default function StaticRoutedPage(){
   const {data} = useQuery(FETCH_BOARD, {
      variables : {number : 1}
   })

   console.log(data)

   return (
      <>
         <div>1번 게시글로 이동 완료</div>
         <div>작성자 : {data ? data.fetchBoard.writer : "로딩 중.."}</div>
         <div>제목 : {data && data.fetchBoard.title}</div>
         <div>내용 : {data?.fetchBoard.contents}</div>
      </>
   );
};

💻 실행결과