graphQL 초기세팅

1. apollo-server 설치

$ npm init -y
$ npm i apollo-server graphql

2. nodemon 설치

$ npm i nodemon -D

3. server.js 파일 생성

$ touch server.js

 4. package.json 파일 script 설정

type: module 을 설정하는 이유는 server.js 에 gql과 ApolloServer를 import 해줘야 하기 때문이다.

1. script의 test를 원하는 변수명으로 아래와 같이 변경한다.
scripts : {
	"dev" : "nodemon server.js"
    }
    
2. 맨 아레에 type을 설정
"type" : "module"

 5. server.js 에 ApolloServer , gql import 시켜주기

import {ApolloServer, gql} from 'apollo-server';

6. server 만들기

# server.js

import {ApolloServer, gql} from 'apollo-server';

const server = new ApolloServer({})
server.listen().then(({url}) => {
    console.log(`Running on ${url}`)
})

위와 같이 작성 후에는 schema or modules or typeDefs 를 가져야 한다는 에러가 발생함.

throw Error('Apollo Server requires either an existing schema, modules or typeDefs');

그 이유는 graphql은 data의 shape를 미리 알고 있어야 하기 때문이다.

그래서 우리는 graphql server 에게 해당 서버에 있는 data들의 type을 알려주어야 한다.

7. type Query 설정 

Query 이름은 본인이 원하는 이름으로 바꿀 수 있다.

아래의 코드에서 보이는 text, hello 를 rest api 형식으로 표현하자면

get /text

get /hello

라고 표현할 수 있다.

해당 type을 설정한 후에는 비로소 apollo-server 가 정상 작동 되는 것을 확인 할 수 있다.

#server.js

import {ApolloServer, gql} from 'apollo-server';

// gql에는 '' 이 아닌 `` 로 type을 적어줘야함(gql SDL)
const typeDefs = gql`
    type Query {
        text: String
        hello: String
    }
`;

const server = new ApolloServer({typeDefs})
server.listen().then(({url}) => {
    console.log(`Running on ${url}`)
})

 

8. graphQL 접속

서버가 정상 구동되면 localhost:4000 으로 진입할 수 있는데, 해당 주소로 들어가게 되면 다음과 같은 화면을 만나 볼 수 있게 된다.

왼쪽의 Query는 우리가 작성한 코드의 root를 말하는 것이며, Root 아래의 Fields 들은 우리들이 설정한 type에 대해 정의되고 있다.

 

graphql의 설치는 여기까지 마치며 다음 글에서는 graphql의 설정 및 사용방법에 대해 작성하도록 하겠다.