[ GraphQL ] graphql 초기세팅 & 뮤테이션(mutation) 사용하기

GRAPHQL

graphql 2년전인가 사알짝 깔짝깔짝대다가 어쩌다 다시 하게됐다.

정식으로 하는건 아니지만.. 그래도 하게 됐으니 좋다.

graphql을 작동시키려면 playground에서 실습이 가능한데,

이 쿼리문들을 vscode에서 사용하려면 apollo-client라는 라이브러리가 필요하다.

npm(혹은 yarn)으로 graphql 설치하면 된다.

통신을 날릴때 유알엘이 다 똑같다.

예를들어 fetch를 하던, create를 하던, update를 하던 다 타겟 유알엘이 http://example.co.kr/graphql 이므로

넥스트 pages 폴더안의 _app.js 에서 설정해주면 된다

import {ApolloClient, ApolloProvider, InMemoryCache} from '@apollo/client'

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

	return (
		<ApoloProvider client={client}>
			<Component {...pageProps}/>
		</ApolloProvider>
	)
}

mutation의 실행

우선은 하드코딩으로 어떤식으로 넣을 수 있는지 함 보자

//graphql 요청에 필요한 도구 불러오기
import { gql, useMutation } from '@apollo/client'; //@는 회사이름임
//javascript 입력 부분에 playground의 코드를 복사하여 아래와 같이 gql`` 사이에 붙여넣어 변수/상수를 만들어줌
const 나의그래프큐엘세팅 = gql`
  mutation {

      writer: "123"
      title: "제목입니다~~"
      contents: "내용이에요!!!"
    ) {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  //위에서 만든 gql 변수/상수를 활용하여, useMutation을 만들어줌
  const [나의함수] = useMutation(나의그래프큐엘세팅);
  // 버튼클릭했을 때 실행되는 함수에서 mutation 코드를 실행
  const onClickSubmit = async () => {
    const result = await 나의함수();
    console.log(result);
  };

  return (
    <>
      <button onClick={onClickSubmit}>GRAPHQL-API 동기요청</button>
    </>
  );
}

리액트 상단에 쿼리문을 작성하면 맨처음에 vscode에서 색깔이 달라지지 않는다.

그럼 가독성이 매우안좋아지므로 extention을 깔아줘야함

그때 사용하는 익스텐션은 GraphQL: Syntax Highlighting 임.

const 나의그래프큐엘세팅 = gql`
  mutation{
    createBoard(writer: "123", title: "제목입니다~~", contents: "내용이에요!!!"){
        _id
        number
        message
    }
  }
`;

근데 모든 개발이 그렇듯이

우리는 늘 변수로 값이 바뀌는걸 설정해줘야하기때문에.. 하드코딩으로 작성한 코드를 인자로 받아서

입력해주어야한다

GRAPHQL

mutation의 실행

Share this post