GraphQL 1일차

#0.0 SETUP

• 프로젝트 폴더를 생성한다.
• github에 repository를 만들어준다.
• 해당 프로젝트에서 yarn init 을 해주고 질문들을 작성해준다.
• 이제 VSC에서 해당 폴더를 열고 github를 연결해준다.
• yarn add graphql-yoga graphql을 추다해준다.

#0.1 Problems solved by GraphQL

1. over-fetching
   필요한 데이터 이상을 받는 것.
   REST API의 경우, 데이터 테이블을 요청할 때 모든 필드를 받아 온다.
   예) user의 username만 필요하더라도 profile, email, etc. 를 모두 꺼내서 response로 보낸다.
   이러한 비효율적인 문제를 graphQL은 원하는 영역만 받아올 수 있어 효율적으로 해결가능하다.
2. under-fetching
   필요한 데이터를 받기 위해 1번 이상의 request를 보낸다.
   REST API의 경우 나뉘어진 테이블 만큼의 reqest를 보내고 각각의 response를 받는다.
   예) 앱 실행 시, feed 데이터, user데이터, notification데이터 etc. 모두 각각의 request를 보낸다.
   하지만 graphQL은 한 query에 원하는 영역만 받아 올 수 있다. graphQL에는 URL이라는 개념이 없다.

#0.2 Creating a GraphQL Server with GraphQL Yoga

• nodemon은 파일을 수정할 때마다 서버를 재시작해준다.
• yarn global add nodemon
• 해당폴더의 package.json에 추가해준다.

"scripts": {
    "start": "nodemon"
  }

• babel-node는 더 좋게 코드를 작성하게 만들어준다.
• yarn global add babel-cli
• 해당폴더의 package.json에 추가해준다.

"scripts": {
    "start": "nodemon --exec babel-node index.js"
  }

• babel환경을 설정해주어야 한다. 해당 폴더에 ".babelrc"라는 파일을 만들어준다.
• yarn add babel-cli babel-preset-env babel-preset-stage-3 --dev를 입력한 후에 ".babelrc"에 아래 코드를 넣는다.

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

#0.3 Creating the first Query and Resolver

• schema는 받거나 줄 정보에 대한 서술이다.
• "schema.graphql"파일을 만들어 준다.
• Query는 정보를 받아올 때 사용한다.
• Mutation은 정보를 변형할 때 서버나 DB나 메모리에서 정보를 바꾸는 작업을 한다.

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

• Resolvers는 query를 해결하는것으로 query가 DB에게 문제라면 우리는 query를 resolve해야한다.
• "resolvers.js"파일을 만든다.

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

export default resolvers;

• "index.js"파일은 아래와 같이 작성한다.

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

const server = new GraphQLServer({
    typeDefs: "graphql/schema.graphql",
    resolvers
});

server.start(()=>console.log("GraphQL server Running"));

• yarn start하면 실행

#0.4 Extending the Schema

Query에 객체를 넣어보자.

1. 새로운 타입을 만들어 줘야한다.

//schema.graphql
type joon{
    name: String!,
    age: Int!,
    gender: String!
}

type Query {
    person: joon!
}

2. resolvers.js에도 새로운 타입을 작성한다.

//resolvers.js
const joon = {
    name: "byungjoon",
    age: 23,
    gender: "male"
}

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

export default resolvers;

3. http://localhost:4000/에서 GraphQL-yoga안에 있는 playGround를 통해 Query가 받아오는 값을 볼 수 있다.
   

Query에 객체 배열을 넣어보자.

1. "db.js"파일을 배열 데이터베이스용으로 만든다.
2. "schema.graphql"의 type을 정의해준다.

//schema.graphql
type Person{
    id: Int!,
    name: String!,
    age: Int!,
    gender: String!
}

type Query {
    people: [Person]!
    person(id: Int!): Person 
}

//db.js
export const people = [
    {
        id: "0",
        name: "joon",
        age: 23,
        gender: "male"
    },
    {
        id: "1",
        name: "Minju",
        age: 24,
        gender: "female"
    },
  	.
  	.
  	.
];

3. resolvers.js도 수정해준다.

//resolvers.js
import { people } from "./db";

const resolvers = {
    Query: {
        people: () => people
    }
};
export default resolvers;