04. graphql

Graphql

GraphQL은 페이스북에서 만든 쿼리 언어다.
gql은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적.

Rest-API와 비교

REST API는 URL, METHOD등을 조합하기 때문에 다양한 Endpoint가 존재 합니다. 반면, gql은 단 하나의 Endpoint가 존재 합니다. 또한, gql API에서는 불러오는 데이터의 종류를 쿼리 조합을 통해서 결정 합니다. 예를 들면, REST API에서는 각 Endpoint마다 데이터베이스 SQL 쿼리가 달라지는 반면, gql API는 gql 스키마의 타입마다 데이터베이스 SQL 쿼리가 달라집니다.

"API"는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체
"ENDPOINT"란 API가 서버에서 리소스에 접근할 수 있도록 가능하게 하는 URL이다

GraphQl vscode에 적용하기

playground 에서 실습했던 내용의 코드를 vscode에서 적용하기 위해서는 apollo-client라는 도구가 필요하다.

_app.js 에 들어가서 아래와 같이 입력을 한다.

graphql 요청에 필요한 도구 불러오기

import { useMutation, gql } from '@apollo/client'

graphql 코드 생성

const CREATE_BOARD = gql`
	mutation {
		createBoard(
			writer: "훈이",
			password: "1234",
			title: "안녕하세요 훈이에요",
			contents: "반갑습니다"
		){
			message
		}
	}

mutation 코드 생성

const [createBoard] = useMutation(CREATE_BOARD)

게시물 등록 버튼을 클릭했을 때 실행되는 함수에서 mutation 코드를 실행해 줍니다.

function handleClickPost(){
	createBoard({
		variables: {
                    aaa: "훈이",
                    bbb: "1234",
                    ccc: "안녕하세요 훈이에요",
                    ddd: "반갑습니다"
        	}
	})
}
return (
	<button onClick={handleClickPost}>게시물 등록</button>
)

async / await 적용하기

async와 await는 비동기를 동기로 바꿔주는 명령어이다.

// mutation에 동기식 처리
async function handleClickPost(){
  const result = await createBoard({
    variables: {
        aaa: "훈이",
        bbb: "1234",
        ccc: "안녕하세요 훈이에요",
        ddd: "반갑습니다"
    	}
  	})
		// 결과물 확인하기
		console.log(result)
}
return (
	<button onClick={handleClickPost}>게시물 등록</button>
)

프로필 만들기

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

const CREATE_BOARD = gql`   
    mutation createBoard ($writer:String, $title: String, $contents : String){
        createBoard(writer: $writer, title: $title, contents: $contents){
            number
            message
        }
    }
`;


export default function GraphqlMutationBorad3Page() {
    const [creatBoard] = useMutation(CREATE_BOARD)
    const [myWriter, setMyWriter] = useState("")
    const [myTitle, setMyTitle] = useState("")
    const [myContents, setMyContents] = useState("")

    function onChangeMyWriter(event) {
        setMyWriter(event.target.value)
    }

    function onChangeMyTitle(event) {
        setMyTitle(event.target.value)
    }

    function onChangeMyContents(event) {
        setMyContents(event.target.value)
    }



    async function aaa() {
        const result = await creatBoard({
            variables: { writer: myWriter, title: myTitle, contents: myContents }
        })
        console.log(result)
        console.log(result.data.createBoard.number)
    }
    return (
        <>
            작성자 : <input type="text" onChange={onChangeMyWriter} /> <br />
            제목 : <input type="text" onChange={onChangeMyTitle} /> <br />
            내용 : <input type="text" onChange={onChangeMyContents} /> <br />
            <button onClick={aaa}>GRAPHQL-API 요청하기</button>
        </>
    )
}

상품 만들기

import { useMutation, gql } from "@apollo/client"
import { useState } from "react"

const CREATE_PRODUCT = gql`
        mutation createProduct ($seller : String, $createProductInput : CreateProductInput!) {
            createProduct(
              seller:$seller, 
              createProductInput : $createProductInput
            ){
                _id
              number
              message
            }
        }
    `

export default function GraphqlMutationProductPage() {
  const [createProduct] = useMutation(CREATE_PRODUCT)
  const [productSeller, setproductSeller] = useState("")
  const [productName, setproductName] = useState("")
  const [productDetail, setproductDetail] = useState("")
  const [productPrice, setproductPrice] = useState("")

  function onChangeproductSeller(event) {
    setproductSeller(event.target.value)
  }
  function onChangeproductName(event) {
    setproductName(event.target.value)
  }
  function onChangeproductDetail(event) {
    setproductDetail(event.target.value)
  }
  function onChangeproductPrice(event) {
    setproductPrice(event.target.value)
  }

  async function onClickSubmit() {
    const result = await createProduct({
      variables: {
        seller: productSeller, createProductInput: {
          name: productName,
          detail: productDetail,
          price: Number(productPrice)
        }
      }
    })
    console.log(result.data.createProduct._id)
  }

  return (
    <>
      판매자 :< input type="text" onChange={onChangeproductSeller} />
      상품명 : <input type="text" onChange={onChangeproductName} />
      상품상세 : <input type="text" onChange={onChangeproductDetail} />
      상품가격 : <input type="text" onChange={onChangeproductPrice} />
      <button onClick={onClickSubmit}>상품 등록하기!!</button>
    </>
  )
}