graphQL 배우기[1]

확장 프로그램은 Edit csv 라는 프로그램을 받는다.

구조

People.csv를 보면 이런식으로 id, first_name, last_name…. etc

사람들의 리스트와 내용들을 볼수 있는데
확장프로그램을 사용하면 내용들은 엑셀파일형식으로 편하게 볼수 있다.

npm i convert-csv-to-json

이후

npm start

index.js 에

const database = require('./database')
console.log(database.people)

database.people 찍어주면
아래와같이 people에 대한 내역을 보여준다!

이제 Apollo를 시작해보겠다.

npm i apollo-server
or
npm i graphql apollo-server

이제 index.js에

const database = require('./database')
console.log(database.people)
를 지우고

const database = require('./database')
const { ApolloServer, gql } = require('apollo-server')
const typeDefs = gql`
  type Query {
    teams: [Team]
  }
  type Team {
    id: Int
    manager: String
    office: String
    extension_number: String
    mascot: String
    cleaning_duty: String
    project: String
  }
`
const resolvers = {
  Query: {
    teams: () => database.teams
  }
}
const server = new ApolloServer({ typeDefs, resolvers })
server.listen().then(({ url }) => {
console.log(`🚀  Server ready at ${url}`)
})

를 복붙하고

npm start !

요렇게 로컬호스트 4000이 준비됐다고 뜨는데, 열어보면

실습가능한 사이트가 열린다

ApolloServer

• typeDef와 resolver를 인자로 받아 서버 생성

const { ApoloServer, gql } = require('apollo-server')

여기 아폴로 서버 클래스가 있다

이 클래스는 typeDefs와 resolvers를 인자로 받아서 이렇게 생성자로서 서버를 생성하고,

listen명령어로 실행을 해준다.

typeDef

typeDef 는 우리가 그래프큐엘에서 사용할 데이터들의 구조와 타입을 지정한것이다.

Team이라는 데이터가 어떤 항목들로 구성되어있는지 .. ? 그리고 이를 요청할 쿼리에도 어떤형식으로 요청이 들어가는지..? 이런 데이터의 구조가 선언되있다고 보면 되고,

resolver는

반환 입력 수정 삭제등등이런 액션들이 합수형태로 지정되있다고 보면 된다.

요청들을 테스트할수있을 뿐만아니라, 어떤 타입들이 지정되어있고 이것들을 어떤 명령어로 요청하는지 내용들을 체계적으로 살펴볼수 있다.