[React] GraphQL, axios

GraphQL

What's GraphQL?

• 요청하는 data를 선언적으로 기술하는 쿼리. POST로 요청한 데이터를 모두 담아 한 응답으로 돌려줌.
• request의 body부분에 어떤 요청을 하는가에 따라 수정, 삭제 요청도 가능 모두 POST로 요청함.

GraphQL query 예시

여러 depth의 정보를 하나의 request로 요청 가능

query findRepos($login: String!) {
  user(login: $login) { //변수 $login은 요청할때 담아서 보냄
    id
    login
    name
    location
    avatar_url: avatarUrl //가져오는 data alias도 가능
    repositories(first: 100) {
      totalCount
      nodes {
        name
      }
    }
  }
}

GraphQL response 예시

GraphQL은 query로 요청한 정보만 반환한다.

{
  "data": {
    "user": {
      "id": "MDQ6VXNlcjc5NTkyNjA0",
      "login": "hyew-kim",
      "name": "Kim Hyewon",
      "location": null,
      "avatar_url": "https://avatars.githubusercontent.com/u/79592604?u=9cf807612ce5121bb2018cb4a85b3ff599357128&v=4",
      "repositories": {
        "totalCount": 33,
        "nodes": [
          {
            "name": "prgrms-fejs"
          },
          {
            "name": "42_piscine"
          },
          {
            "name": "printf"
          }, ...
       ]}
     }
   }
}

Axios

What's Axios?

• Promise 기반의 HTTP 비동기 통신 라이브러리, HTTP method모두 지원
• 인스턴스 커스텀 설정 가능
• 요청 취소 및 타임아웃 설정 가능

사용법

body가 아닌 data속성 사용

• axios.get(url,[,config])
• axios.post(url[,data[,config]])
• axios.delete(URL,[,config])
• axios.put(url[, data[, config]])

response

자동으로 JSON형식으로 변환되어 response가 온다. status가 200이고 statusText가 ‘OK’이면 성공이다.

{
  // `data`는 서버가 제공한 응답(데이터)입니다.
  data: {},

  // `status`는 서버 응답의 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
  headers: {},

  // `config`는 요청에 대해 `axios`에 설정된 구성(config)입니다.
  config: {},

  // `request`는 응답을 생성한 요청입니다.
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
  request: {}
}

참고 자료

• https://yamoo9.github.io/axios/guide/response-schema.html
• https://www.youtube.com/watch?v=oLQeFkhRqzU
• https://inpa.tistory.com/entry/AXIOS-📚-설치-사용#axios-vs-fetch [👨‍💻 Dev Scroll:티스토리]
• https://axios-http.com/kr/docs/interceptors
• https://www.npmjs.com/package/graphql-request#usage