두번째 멘토링 준비 - 멘토님 숙제 하기

멘토님 숙제 : graghQL vs Axious

만약, Axious를 선택하면 에러 핸들링까지 어떻게 할 것인지 조사 

 

graghQL

 

정의

페이스북에서 처음 개발한 오픈소스 쿼리 언어 

Graph + Query Language

 

장점

- rest api에 비해서 시간 절감 

- 리액트랑 호환성이 좋음 

(라이브리러, 커뮤니티 지원)

- 리덕스 대체 가능(apollo랑 잘 쓰면 더 간단함)

- 내가 원하는 것만 요청할  수 있음 

 

특징

• GraphQL은 HTTP를 통해 API 서버로 요청을 보내고 응답을 받습니다.
• 응답을 받을 시, 데이터 결과를 JSON 형식으로 받습니다.
• GraphQL은 서버 개발자가 작성한 각 필드에 대응하는 resolver 함수로 각 필드의 데이터를 조회할 수 있습니다.
• GraphQL은 GraphQL 라이브러리가 조회 대상 schema가 유효한지 검사합니다.
• Query: 저장된 데이터 가져오기 (REST의 GET과 비슷합니다.)
• Mutation: 저장된 데이터 수정하기
• Subscription: 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송

기본 코드

/**쿼리(데이터조회)/
{
  hero {
    name
  }
}

/**결과/
{
  "data": {
    "hero": {
      "name": "R2-D2"
    }
  }
}

/**전달인자/
{
  human(id: "1000") {
    name
    height
  }
}

/**결과*/
{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 1.72
    }
  }
}

/**변수*/
query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

/**뮤테이션*/
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

/**리졸버*/
const db = require("./../db")
const resolvers = {
  Query: { // **Query :** 저장된 데이터 가져오기 (REST 에 GET 과 비슷합니다.)
		getUser: async (_, { email, pw }) => {
			db.findOne({
				where: { email, pw }
			}) ... // 실제 디비에서 데이터를 가져오는 로직을 작성합니다. 
			...
		}
  },
  Mutation: { // **Mutation :** 저장된 데이터 수정하기 ( Create , Update , Delete )
		createUser: async (_, { email, pw, name }) => {
			...
		}
  }
  Subscription: { // **Subscription :** 실시간 업데이트
    newUser: async () => {
      ...
		}
  }
};

 

 

 

 

Axious

axios 선택 axios Instatnce ( Error Handling )

axios. get('/user/12345') . catch(function (error) { if (error.

정의 
브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

 

Fetch API vs Axious

간단한 실습

npm install axios
/**설치하기/
axios.get("url"[,config])
/**get요청/