GraphQL 시작하기(1)

< GraphQL >

그래프QL(영어: GraphQL)[1]은 페이스북이 2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다.[2] 그래프QL은 REST 및 부속 웹서비스 아키텍쳐를 대체할 수 있다.[1] 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다. 그래프QL은 사용자가 어떤 데이터가 필요한 지 명시할 수 있게 해 주는 강타입 언어이다. 이러한 구조를 통해 불필요한 데이터를 받게 되거나 필요한 데이터를 받지 못하는 문제를 피할 수 있다.

주요 그래프QL 클라이언트로는 아폴로 클라이언트[3]와 Relay[4] 등이 있다. 그래프QL 서버는 여러 언어로 구현되어 있는데, 자바스크립트, 파이썬[5], 루비, 자바, C#, 스칼라, 고, 엘릭서, 얼랭, PHP, 클로져 등의 언어로 구현되어 있다.

- 위키 펌-

 

뭐라는지 모르겠다.

 

특징만 살펴보자면 RESTAPI를 사용하지 않고 

쿼리 (JSON 객체같이 생겨먹은) 를 이용해서 원하는 데이터만 가져오는 친구라고 한다.

(예를 들어 /user/1 GET 시에 user의 모든 정보를 가져왔다. 하지만 GraphQL은 user의 name 혹은 user의 email만 가져 올 수 있고, 이는 경제적이다. 이를 통해 OverFetching UnderFetching을 해결한다.)

그리고 우리는 그 중 graphql-yoga라는 버전을 사용하려 한다.

< 오늘의 주인공 >

graphql-yoga는 '쉽게 설치하는데 중점을 둔 완전한 기능을 갖춘 GraphQL 서버" 이다.

설치 : yarn add graphql-yoga

git 주소 : https://github.com/prisma/graphql-yoga

 

서버를 시작하기 위해서는 GrapQLServer 객체를 불러오고 start 메소드를 이용하면 된다.

import { GraphQLServer } from 'graphql-yoga'

const server = new GraphQLServer({});

server.start(() => console.log('Server is running on localhost:4000'));

이 때 GraphQLServer에서 생성자 변수 두가지를 받는데

첫번째로 typeDefs

두번째로 resolvers

< 타입을 살펴보자 , 그리고 스키마가 없다면 필수적이란다. >

typeDefs는 하는 역할이 스키마를 생성하는것과 비슷하다.

어떤 속성을 가질지 그리고 그 속성이 어떤 타입일지 선언한다.

 

resolvers는 테이블에 값을 입력하는 것과 같다.

속성 값을 선언하고, 우리가 다음에 그것을 요청한다.

 

코드는 이렇게 된다.

import { GraphQLServer } from 'graphql-yoga'

const typeDefs = `
    type Query{
        hello: String
    }
`;

const resolvers = {
  Query: {
    hello: () => "Hi"
  }
};

const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

typeDefs는 문자열이며 type Query 라는 이름으로 hello를 선언하였고 이는 String을 타입으로 가진다고 한다.

resolvers는 Query라는 객체로 hello를 요청시에 Hi(String)을 반환하는 함수를 실행한다.

 

아마 일반적으로 우리는 "Hi"와 같은 String보단 Object위주로 리턴할 것이다.

 

일단 이 이전에 파일 구조를 좀 변경 해보자

//index.js
import { GraphQLServer } from "graphql-yoga";
import resolvers from "./graphql/resolvers.js"; // 추가된 코드

const server = new GraphQLServer({
  typeDefs: "graphql/scheme.graphql", // 추가된 코드
  resolvers // 추가된 코드
});
server.start(() => console.log("Server is running on localhost:4000"));

//resolvers.js
const resolvers = {
  Query: {
    name: () => moon
  }
};

export default resolvers;


//scheme.graphql
type Query {
  name: String!
}

꽤 괜찮아 진거 같다. 이제 객체를 리턴하는 쿼리를 만들어보자.

//scheme.graphql
type User {
  name: String!
  age: Int!
  gender: String
}

type Query {
  person: User!
}

일단 name대신 person이라는 키로 이름을 변경했다.

그리고 person은 User라는 객체를 리턴한다.

const moon = {
  name: () => `Moon`,
  age: () => `18`,
  gender: () => `male`
};

const resolvers = {
  Query: {
    person: () => moon
  }
};

export default resolvers;

타입(객체?)Query의 person을 리턴하면 타입(객체?)User를 리턴한다.

이때 User라는 객체라고 따로 선언할 필요 없이 User타입과 키가 같은 객체를 생성하면 User객체를 생성하게 되는 것인거 같다.