GraphQL 사용법

1. graphql-yoga 설치

yarn add graphql-yoga

터미널 창에 위의 명령어를 실행시켜 graphql-yoga를 설치한다.

2. nodemon, babel 설치

yarn add nodemon

 yarn add babel-cli

nodemon은 파일이 수정될 때마다 서버를 자동으로 재시작시켜준다.

.babelrc 파일을 만들어 환경 설정을 해준다.

 

package.json에 명령어를 추가한다.

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

nodemon을 실행 시키는데 babel을 통해 변환을 거치고 index.js를 실행시켜 서버를 실행시킨다

 

3.index.js 파일 생성 및 실행

//index.js
import { GraphQLServer } from "graphql-yogo";

const server = new GraphQLServer({});
//서버를 만들 때 환경설정이 필요하다.
//typeDefs와 resolvers를 설정해야한다.

server.start(() => console.log("💻 Graphql Server Running"));

위의 코드에서는 GraphQL의 schema를 정의되지 않았기 때문에 에러가 나온다.
(schema란 사용자에게 보내거나 사용자로부터 받을 data에 대한 설명이다.)

// schema.graphql 파일 생성
// 이 파일에선 사용자가 무엇을 할지에 대해서 정의한다.

 type Query{
   name: String! (필수인 속성)
 }

사용자가 Query에 name(request)을 보내면 String(response)을 보낸다는 설명을한 것이다.

// resolvers.js 파일 생성
// 정의한 Query가 어떤 기능을 하는지 만들어 주는 것

const resolvers = {
  Query: {
    name: () => "my name is lee"
  }
};
export default resolvers;

어떤 사용자가 name으로 Query를 보내면 "my name is lee"을 반환하는 함수로 응답한다.
(schema가 data에 대한 설명이라면 resolvers는 기능에 대한 정의인 것 같다.)

//index.js
import { GraphQLServer } from "graphql-yogo";
import resolvers from "./graphql/resolvers"; // 정의한 resolvers를 import해 가져온다.

const server = new GraphQLServer({
  // typeDefs와 resolvers를 설정해준다.
  typeDefs: "graphql/schema.graphql",
  resolvers: resolvers
});

server.start(() => console.log("💻 Graphql Server Running"));

server를 만들 때 typeDefs와 resolvers를 실행할 경우 성공적으로 서버를 실행할 수 있게된다.

GraphQLServer 안에는 express가 내장되어 있기때문에 express의 메소드를 사용할 수 있다.(server.use(모듈))
`localhost:4000으로 이동하면 GraphQl Playground가 나온다.

Playrground를 통해 Query를 보내서 어떤 결과값이 나오는지, 어떤 Query가 있는지 등을 확인해 볼 수 있다.

 

GraphQL Schema, resolver  정의하는 방법

1.우선 필요한 묘듈인 merge-graphql-schemas와 graphql-tools, path를 설치한다.

 

2.schema.js 파일을 하나 생성한다.

// schema.js 코드 내용
import {
  fileLoader,
  mergeResolvers,
  mergeTypes
} from "merge-graphql-schemas";
import path from "path";
import { makeExecutableSchema } from "graphql-tools";

const allTypes = fileLoader(path.join(__dirname, "/api/**/*.graphql"));
// api 폴더 안에 모든 폴더에 모든 graphql 파일을 불러온다.

const allResolvers = fileLoader(path.join(__dirname, "/api/**/*.js"));
// api 폴더 안에 모든 폴더에 모든 js(resolver) 파일을 불러온다.

const schema = makeExecutableSchema({
  typeDefs: mergeTypes(allTypes),
  resolvers: mergeResolvers(allResolvers)
});
// schema 변수에 typeDefs, resolvers를 정의하여 담아주고 그것을 export 해준다.

export default schema;

3.api 폴더를 생성한다.

4.api 폴더 안에 Greetings 폴더를 생성한다.

5.Greetings 폴더 안에 sayHello.js, sayHello.graphql 파일을 생성한다.

// sayHello.js 파일
export default {
  Query: {
    sayHello: () => "Hello!"
  }
};

// sayHello.graphql 파일
type Query{
  sayHello: String!
}

6.server 코드를 수정한다.

// index.js 파일
import { GraphQLServer } from "graphql-yogo";
import schema from "./schema"; // export한 schema를 가져온다.

const server = new GraphQLServer({ schema });
// GraphQLServer의 type과 resolver를 정의하는 방법은
// typeDefs, resolvers를 각각 정의하는 방법과 schema로 한번에 정의하는 방법이 있다.

server.start({ port: 4000 }, () => console.log("💻 Graphql Server Running"));