[Section04-02] graphql-mutation (& 에러를 해결하는 방법)

graphql 요청방식

 

const [실행함수] = useMutation()
실행함수()


const [실행함수] = useMutation(세팅해놓은 API)
실행함수()

 

 

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

// 세팅
const 나의그래프큐엘세팅 = gql`
  mutation {
    createBoard(writer: "작성자", title: "제목입니다.", contents: "내용입니다.") {
      _id
    }
  }
`;

export default function GraphqlMutationPage() {
  // useMutation 를 실행시키고 싶은 함수를 [] 안에 넣는다.
  // useMutation 초기값으로 세팅을 넣는다.
  const [나의함수] = useMutation(나의그래프큐엘세팅);

  const onClickSubmit = async () => {
    // 뭘 실행할지 괄호() 안에 입력 ==> 위에서 세팅했던 나의그래프큐엘세팅 을 요청함
    const result = await 나의함수();
    console.log(result);
  };

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

 

---

 

에러를 해결하는 방법

1. html/css 내용에 대한 부분

Elements탭 에서 확인

 

2. Javascript와 관련된 부분

Console 탭 (console.log 를 적극 활용하자!!)

 

3. API 요청

Network 탭

 

이름 부분에  빨간색 표시가 뜬 부분을 확인해서 눌러보자

 

- Headers(헤더) : 공통 헤더 (정보)

- Payload(페이로드) : 요청할 때 들어가는 데이터

- Response(응답) : 응답 결과 (이걸 잘 보고, error 의 message를 꼭 읽어봐야 한다.)

- Preview(미리보기) : Response 를 보기 쉽게 보여주는 것

 

한번 클릭 했는데 요청이 두번 날라가는 이유?

Type(유형) 부분을 확인해보면 한개는 preflight, 다른 한개는 fetch 로 되어있음.

 

1. preflight 로 가짜 요청(먼저 한번 요청해보는 것)을 한 뒤

2. fetch 로 진짜 요청을 한다.

그러니 우리가 집중해야 할건 fetch 요청!!