[ 15 ] graphql 실습 , 개발자 도구 활용방법

graphql 실습 코드 

gql`` 로 요청할 데이터를 담아서 useMutation 의 매개변수로 넣는다.

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

const 나의그래프큐엘세팅 = gql`
  mutation {
    createBoard(writer: 123, title: "안녕하세요", contents: "반갑습니다") {
      _id
      number
      message
    }
  }
`;

export default function GraphqlMutationPage() {
  const [나의함수] = useMutation(나의그래프큐엘세팅);
  const onClickSubmit = async () => {
    const result = await 나의함수();
    console.log(result);
  };
  return <button onClick={onClickSubmit}>GraphQL-API 요청하기</button>;
}

 

개발자 도구 활용방법

 

Elements 탭 

화면의 요소 를 마우스로 확인하고, CSS 를 미리 적용해볼 수 있다.

 

Network 탭

API 통신 시 에러 메세지를 Preview 와 Response 에서 확인해 볼 수 있다.