동기 , 비동기

쉽게 말해 비동기의 예를 들면 지금 우리는 게임다운 받으면서 카톡을 하고 있다.이게 비동기다.
동기는 게임다운이 완료될때 까지 기다렸다가 카톡을 하는거 보고 동기라고 한다.

자바스크립트는 동기방식으로 작동한다고 보면된다.
그러면 여기서 응? 이라고 할수 있는데 자바스크립트 라이브러리 axios라는 녀석이 자바스크립트의 비동기 식으로 바꿔준다.

const data = axios.get('https://koreanjson.com/posts/1');
console.log(data);

위코드를 보면 비동기식으로 작동을 하는데 밑에 콘솔로그를 찍어보면 promis라고 확인된다.
나중에 데이터를 주겠다고 약속만 한 상태이다.

const data = await axios.get('https://koreanjson.com/posts/1');
console.log(data);

위코드는 data라는 변수에 데이터가 입력되기 까지 기다렸다가 console.log가 실행될것것이다.

코드로 풀어보자

import axios from 'axios';
import{useState} from 'react';

export default function RestGetPge(){
    
    const [data, setData] = useState("");

    const callRestApi = () => {
       const result = axios.get("https://koreanjson.com/posts/1");
       console.log(result);
    //    console.log(result.data.title)
    //    setData(result.data.title);
   }
    return(
        <>
        <button onClick={callRestApi}>api불러오기</button>
        {/* <div>{data}</div>  */}
       </>    
    )
}

위코드는 restAPI 방식이다.
api데이터를 불러 올수 있는 버튼 하나를 만들어 줬다.

결과는?

밑 코드는 동기식으로 바꿔줬다.

import axios from 'axios';
import{useState} from 'react';

export default function RestGetPge(){
    
    const [data, setData] = useState("");

    const callRestApi = async() => {

       const result = await axios.get("https://koreanjson.com/posts/1");
       console.log(result);
       console.log(result.data.title)
       setData(result.data.title);
   }
    return(
        <>
        <button onClick={callRestApi}>api불러오기</button>
        <div>{data}</div> 
       </>    
    )
}

위 사진처럼 api데이터를 확인할수 있다.

Graphql

사용하기 앞서 셋팅부터 해주자!

app.js

import '../styles/globals.css';
import{ApolloClient,ApolloProvider,InMemoryCache} from '@apollo/client';

function MyApp({ Component, pageProps }) {

    const client = new ApolloClient({
      uri: '주소', // 백엔드 컴퓨터
      cache: new InMemoryCache() // 메모리저장
    })
    return (
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>  
    )
  }
export default MyApp

index.js

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

const CREATE_BOARD = gql`
    mutation{
            createBoard( writer:"박경찬" , title:"졸리당", contents:"배고프당"){
            _id
            number
            message
        }
    }   
`
export default function GraphqlMutationPage(){
    
    const [data, setData] = useState("");
    const [callApi] = useMutation(CREATE_BOARD);

    const callGrapQlApi= async() => {
    //const result = await axios.get("https://koreanjson.com/posts/1"); //restApi방식
    const result = await callApi(); //graphql
    console.log(result);
    setData(result.data.createBoard.message)
    //setData(result.data.title);
   }
    return(
        <>
        <button onClick={callGrapQlApi}>Graphql-API 요청하기!!</button>
        <div>{data}</div> 
       </>    
    )
}

위코드는 graphqlapi 를 요청 했다
CREATE_BOARD 에 graphql 양식을 그대로 복사 붙여 넣기 했다.
await 를 사용해서 callApi가 하는일이 다 끝날수 있도록 기다렸다가 성공메시지를 확인할수 있도록
setData에 저장했다.

결과는 아래와 같다.

다른방법도 보자

// import axios from 'axios';
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
        }
    }   
`
//개발자가 필요한 데이터만 가지고 올수가 있다. 
//axios 사용하면서 3가지의 데이터를 받고 싶을땐 api사용 요청을 3번이나 해야한다. 
//3개를 하나로 묶어서 한번만 보내게 된다.
export default function GraphqlMutationPage(){
    
    const [data, setData] = useState("");
    const [callApi] = useMutation(CREATE_BOARD);
    const [writer,setWriter] = useState("");
    const [title,setTitle] = useState("");
    const [contents,setContents] = useState("");

    const callGrapQlApi = async() => {

        //const result = await axios.get("https://koreanjson.com/posts/1"); //restApi방식
        const result = await callApi({
            variables:{
                writer: writer,
                title: title,
                contents: contents
            } // 마치 함수처럼 쏘오오옥 들어간다 어디로? 여기루 =>  myMutation($writer:String, $title:String, $contents:String) 
        }); //graphql
        console.log(result);
        setData(result.data.createBoard.message)
        //setData(result.data.title);

   }

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

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

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

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

이전에 했던 방식은 무조건 확정된 데이터를 DB로 보내는 방법이지만 지금은 유저가 입력하는 값을 동적으로
DB로 보내주고 있다.

추가된 코드들 보면 varibles:{} 양식이 CREATE_BOARD랑 비슷해졌다.
그리고 CREATE_BOARD 가 변경된 양식을 보면 없던 데이터 타입이 생겼다.

결과확인해보자