[Rest-API/GraphQL] axios/Apollo-Client 사용하는 방법 (get/mutation)

axios | Rest-API

import axios from 'axios'

import해온다.

export default function RestGet(){
    const [aaa, setAaa] = useState("")
    
    const zzz = async () => {
        const result = await axios.get('https://koreanjson.com/posts/1')
        console.log(result.data.title)
        setAaa(result.data.title)
    }
    
    zzz()

    return (
        <>
            <button onClick={zzz}>REST-API 요청하기 ( ° ͜ʖ °)</button>
            <div>{aaa}</div>
        </>
    )

}

사용한다.

참 쉽죠?

apollo-client | GraphQL-API

여기는 상대적으로 할 일이 좀 더 많다.

_app.js

Next.js의 pages 기본 세팅 안에 포함되어있는 파일. 해당 서비스에 접속하면 _app.js가 가장 먼저 실행되고 그 이후에 index.js 파일이 실행된다. 이것은 폴더 내에 들어있는 index.js들에도 동일하게 적용된다.

import '../styles/globals.css'

function MyApp({ Component, pageProps }){
	return <Component {...pageProps} />
}

export default MyApp

// 기본코드

여기서 return <Component{...pageProps}/>의 Component는 앞으로 열 페이지 컴포넌트들을 말하는 것이다.

import '../styles/globals.css' // 필요없으면 지워도 무방
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client'

function MyApp({ Component, pageProps }){

	// ApolloClient 설정 - 가이드가 필요한 경우 Docs 참고
    const client = new ApolloClient({
    	uri: "api URL",
        cache: new InMemoryCache()
    })
    
	return (
    	<ApolloProvider client={client}>
        	<Component {...pageProps} />
        </ApolloProvider>
    )
}

export default MyApp

// 세팅 완료된 코드

이렇게 하면 Apollo-client를 이용해 GraphQL을 사용하기 위한 _app.js 설정은 끝났다.

API 기본 세팅이 포함된 ApolloProvider로 대상 컴포넌트를 감싸주면 된다.

GraphQL 실습

// Example)
const [실행함수] = useMutation(CREATE_BOARD)

// CREATE_BOARD
mutation{
    createBoard(name:"철수",age:13,school:"다람쥐초등학교"){
        message
    }
}

graphQL은 CRUD 중 Read를 제외한Create, Update, Delete를 mutation 형태로 요청할 수 있게 설계되어있다.

Apollo client를 이용해 graphQL mutation 요청을 보내려면 useMutation 명령어를 사용해 실행함수를 만들어주면 된다.

기본적인 코드의 형태는 다음과 같다.