GraphQL Backend

GraphQL

graph ql-yoga

• Graphql Server
• 쉽게 설치할 수 있는 데에 중점을 두어 완전한 기능을 제공
• create-react-app의 명령어와 거의 비슷

yarn add graphql-yoga

GraphQL Advantages

1. Over-fetching
   • 요청할 영역의 정보보다 더 많은 정보를 서버에서 받는 일
   • 쓸데없는 정보까지 서버에서 받는 일
2. Under-fetching
   • 하나의 정보를(또는 화면을) 완성하기 위해 여러 번 서버에 요청을 하는 일

Creating a GraphQL Server using GraphQL Yaga

// 수정사항이 있을 때마다 서버 재시작
yarn add nodemon
yarn global add babel-cli
yarn global add babel-cli --ignore-engines
yarn add babel-cli babel-preset-env babel-preset-stage-3 --dev

// 코드를 더 좋게 작성하게 만들어줌(require -> import)
yarn add babel-node --dev

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

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

const server = new GraphQLServer({});

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

// .babelrc(환경설정)
{
"presets": ["env","stage-3"]
}

Extending the Schema

Resolvers

• Query를 resolve(해결)하는 것

// /graphql/schema.graphql 파일 추가
type Person {
 name: String!
 age: Int!
 gender: String!
}

type  Query {
 people: [Person]! // type: string, required
 person(id: Int!): Person
}

// index.js
import resolvers from "./graphql/resolvers";

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

// /graphql.resolvers.js
const people = [
 {
  name: "test",
  age: 18,
  gender: "female"
 }
];
  
const resolvers = {
 Query: {
  // name Query를 보내면 test를 반환하도록 함수로 답함
  people:() => people
 }
};
  
export default resolvers;

playground

• DB를 테스트 해주는 것
• graphql-yoga에 따라오는 것
• localhost:4000/graphql 한 번 보기

Mutation

• DB 상태가 변할 때 사용하는 것
• 원하는 만큼 정의 가능

Defining / Creating / Delete Mutation

defining
creating
deleting

Wrapping a REST API with GraphQL(GraphQL에서 REST API를 어떻게 감싸는지)

• 사용할 API는 YTS API(토렌트에서 사용)
• 오래된 서버를 가지고 있거나 GraphQL을 넣을 수 없을 대 사용하는 방법

yarn add node-fetch

참고

movieql
graphql-yaga
node-fetch