35일차 프론트엔드 공부 - Graphql

- 프론트엔드 공부 35일차 -

동기 vs 비동기

 

동기 

서버 컴퓨터가 작업이 끝날 때까지 기다리는 통신

 

비동기

서버 컴퓨터가 작업이 끝날 때까지 기다리지 않는 통신, 서버에 요청(등록, 수정, 삭제 등) 저장이 될 때까지 기다리지 않고 다른 작업 진행

동기 통신을 위해서는 async 와 awiat를 사용해야한다.

ex)

async function 함수이름() {
const data = await axios.get(url)
console.log(data) 
}

 

import axios from "axios";

export default function RestGetPage() {
  function onClickAsync() {
    const result = axios.get("https://koreanjson.com/posts/1");
    console.log(result);
  }

  //   async function onClickSync() {
  //     const result = await axios.get("https://koreanjson.com/posts/1");
  //     console.log(result);
  //     console.log(result.data.title);
  //   }

  const onClickSync = async () => {
    const result = await axios.get("https://koreanjson.com/posts/1");
    console.log(result);
    console.log(result.data.title);
  };

  return (
    <div>
      <button onClick={onClickAsync}>REST-API(비동기) 요청하기</button>
      <button onClick={onClickSync}>REST-API(동기) 요청하기</button>
    </div>
  );
}

 

비동기 버튼을 눌렀을 때

 

동기 버튼을 눌렀을 때

 

 

URN, URL, URI

 

URI : https://google.com?search=짱구#aaa 

URL : https://google.com?search=짱구

URN : google.com?search=짱구#aaa 

 

 

Mutation 실습

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

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

export default function GraphqlMutationPage() {

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

  const [createBoard] = useMutation(CREATE_PRODUCT);

  const onClickSubmit = async () => {
    const result = await createBoard({
      variables: {
        // variables는 $와 같은 역할을함
        writer: writer,
        title: title,
        contents: contents,
      },
    });
    console.log(result);
  }

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

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

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

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

서버에 등록된 모습

const CREATE_PRODUCT = gql`

  mutation createBoard($writer: String, $title: String, $contents: String) {

    createBoard(writer: $writer, title: $title, contents: $contents) {

      _id

      number

      message

    }

  }

`;

 

mutation createBoard($writer: String, $title: String, $contents: String) : 변수 타입 적는 곳

createBoard(writer: $writer, title: $title, contents: $contents) : 실제로 우리가 전달할 변수 적는 곳