_app.js 작동원리 및 apollo-client 스코프체인

apollo-client setting

_app.js 코드

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

function MyApp({ Component, pageProps }){
	const client = new ApolloClient({
		uri: "http://example.codebootcamp.co.kr/graphql",
		cache: new InMemoryCache()
	})

	return (
		<ApolloProvider client={client}>
			<Component {...pageProps}/>		//Component 자리에 index.js가 들어와 index.js가 합쳐진 app.js가 실행됨
		</ApolloProvider>
	)
}

_app.js 작동원리

index.js(페이지)가 실행되는 것이 아닌 index.js가 app.js로 합쳐져 app.js가 실행되는 원리이다.

---

apollo-client로 graphql mutation 실행

1. mutation을 사용하기 전, graphql mutation을 실행하려는 페이지 상단에 apollo-client 초기 세팅

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

2. javascript 입력부분에 playground 코드를 입력해 변수와 상수 세팅

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

3. gql 변수와 상수를 이용해, useMutation 생성

// mutation 코드 생성
const [나의함수] = useMutation(CREATE_BOARD)

4. 게시물 등록 버튼을 클릭했을 때, 실행되는 함수에서 mutation 코드 실행

function handleClickPost(){

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

5. 문제점 확인
   게시물이 정상적으로 등록되지만, 항상 같은 게시물이 등록된다는 문제점이 있다.
   따라서 CREATE_BOARD 코드가 변경돼야 한다.

argument에 state값 추가

사용자가 입력한대로 DB에 값을 저장해야하기 때문에 값이 매번 바뀌어야한다. 이를 위해 사용자로부터 입력받은 값을 state에 저장해두었다. 이 state의 data를 argu에 그대로 넣어주면 된다.

변경 전

• graphql

const CREATE_BOARD = gql`
	mutation{
    	createBoard(
        	writer : "짱구",
            password : "1234".
            title : "ㅎㅇㅎㅇ",
            contents : "++"
        ){
        	message
        }
    }
`

• mutation

function onClickPost(){

	createBoard()
}

변경 후

• graphql

const CREATE_BOARD = gql`
	mutation zzzzz($aaa:String, $bbb:String, $ccc:Int, $ddd:String){
    	createBoard(
        	writer : $aaa,
            password : $bbb,
            title : $ccc,
            contents : $ddd
        	){
            	message
            }
    	}
`

• mutation

function onClickPost(){
	
    createBoard({
    	variables : {
        	aaa : "짱구",
            bbb : "1234",
            ccc : "ㅎㅇㅎㅇ",
            ddd : "++"
        	}
    	})
	}

graphql의 데이터는 최종적으로 등록하기 버튼을 눌렀을 때, 실행되는 onClickPost함수에서 실행되는 mutation에 넣어야 한다.

graphql mutation에 async / await 적용

REST-API / GRAPHQL-API를 사용하기 위해서는 요청에 대한 응답으로 받은 객체(JSON)를 변수에 담아서 사용하는 것..
응답 결과를 변수에 담아서 사용하려면 통신이 완료될 때까지 기다려야한다.

async / await를 활용해 기다리기

//mutation 동기식 처리
async function onClickPost(){
	const result = await createBoard({
    						variables : {
                            	aaa : "짱구"
                                bbb : "5살"
                                ccc : "---"
                                ddd : "+++"
                            }
    					})
     console.log(result)
	}
    
    return (
    	<button onClick={onClickPost}>게시물 등록</button>
    )

화살표 함수

// 비동기 통신
function 함수명() {
	// 서버에 요청하는 코드
}


// 동기 통신
async function 함수명
() {
	await // 서버에 요청하는 코드
}
--------------------------------------------------------------------------------
// 화살표 함수의 경우
const 함수명 = async () => {
	await // 서버에 요청하는 코드
}