GraphQL 활용 서버구축을 위한 환경설정하기

프로젝트 만들 폴더를 만들고 그 안에서 yarn init 레퍼지토리 등등 설정을 하고

code . ---> vscode를 열수 있음

지금 현재 폴더에서 vscode 들어가서

git init .

git remote add origin https://github.com/nomadcoders/movieql

git pull origin master

 

yarn add graphql-yoga

yarn global add nodemon

 

.babelrc 파일을 만들어서 바벨을 설치 한다

---

//File: .babelrc

{

"presets": ["env", "stage-3"]

}

---

yarn add babel-cli babel-preset-env babel-preset-stage-3 --dev

추가적으로 바벨의 설치한다

---

//File: package.json

{
  "name": "movieql",
  "version": "1.0.0",
  "description": "Movie API with Graphql",
  "main": "index.js",
  "repository": "https://github.com/paradox1107/movieql",
  "author": "Nicloas Serrano Arevalo<nico@nomadcoders.co>",
  "license": "MIT",
  "dependencies": {
    "graphql-yoga": "^1.18.3"
  },
  "scripts":{
    "start": "nodemon" // index.js 파일을 주시하게된다. yarn start 할때마다 nodemon이 활성화된다
       // nodemon은 파일을 수정할때마다 서버를 재시작해줄것이다
  },
  "devDependencies": {		// 바벨을 설치하고 나면 아래의 4줄이 생성될것이다
    "babel-cli": "^6.26.0",
    "babel-node": "^0.0.1-security",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1"
  }
}

---

 

이제 준비 작업은 끝이 났다 

 

GraphQL로 해결할 수 있는 두가지 문제를 알아보자

1. Over-fetching

2. Under-fetching

 

 

/user/1/GET

 

* 예로 user의 이름을 웹에보여주고 싶다고 가정을 하자

* 하지만 일반적으로 지금까지 사용한 서버는 이름만 가져오는 것이 아니라

* 성이나 프로필사진같은 모든 유저들의 정보를 받게된다

* 이것을 Over-fetching라고 한다

* 즉, 내가 요청한 영역의 정보보다, 많은정보를 서버에서 받게되는 것을 말한다

 

* Under-fetching은 어떤 하나를 완성하기위해 내가 다른 요청들을 해야할 때 발생한다.

* 예를 들어 우리가 인스타그램의 앱을 시작하려면 많은 정보를 받게된다

* 즉, 아래의 코드처럼 3가지 요청이 3번 오고가야 앱이 시작된다

* 이것이 Under-fetching이다

* 이 문제를 해결하기 위해 GraphQL은 URL 체계가 존재하지 않는다

 

/feed/

/notifications/

/user/1/

 

/graphql // 위의 코드가 아닌 하나의 종점만 있을 뿐이다 이걸로 모든것이 가능해진다

 

// 아래의 GraphQL 언어를 만들어서 하나에 모든것을 담아서 보내고 받을 수 있다

---

{
  feed {
    comments
    likeNumber
  }
  Notifications {
    isRead
  }
  user {
    username
    profilepic
  }
}

---

// 위의 코드를 GraphQL에 보내고 밑의 코드가 GraphQL에서 보낸 java script Object이다

// 내가 요청한 것만 정확하게 보내주는 것을 알 수 있다

---

 

{
  feed: [
    {
      comments: 1,
      likeNumber: 20
    }
  ],
  notifications: [
    {
      isRead: true
    },
    {
      isRead: false
    }
  ],
  user: [
    {
      username: "kim",
      profilepic: "http"
    }
  ]
}