[TIL]11/26

SangBooom·2021년 11월 26일

TIL

Graph QL

sql과 gql은 서로 목적이 다르다.

sql은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이고
gql은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적이다.

프로젝트 시작

필요 스택 : nodejs

rest api가 기존에 서버와 주고받는 형식,방식이였는데 어떤 rest api의 단점을 보완하기 위해 왜 graph ql이 나왔는지 알아보자.

https://ssungkang.tistory.com/entry/WEB-GraphQL-REST-API%EC%9D%98-%EB%8C%80%EC%B2%B4

기존 형식과 방식은 URI 형식 + 요청 방식 이였다.

query는 rest api의 get과 비슷하게 동작한다
mutation은 rest api의 update, delete와 동작한다

graph ql의 강점

1. 필요한 정보들만 선택하여 받아올 수 있다.

Overfetching 문제 해결
데이터 전송량 감소

2. 여러 계층의 정보들을 한번에 받아올 수 있다.

Underfetching 문제 해결 (다양한 정보들을 한꺼번에 받아올 수 있음)
요청 횟수 감소

3. 하나의 endpoint에서 모든 요청을 처리할 수 있다.

하나의 uri에서 post로 모든 요청 가능

Apollo

graph ql는 쿼리 언어이기 때문에 명세, 형식일 뿐이다 이걸로 서비스를 만들려면
graph ql을 구현할 솔루션이 필요하다.

https://graphql.org/code/

그럼 이 많은 솔루션 중에 많은 사람들이 Apollo를 사용하는 이유는 뭘까?

백엔드와 프론트엔드 모두 제공
간편하고 쉬운 설정
다양한 기능들을 제공

Apollo Server를 활용해 백엔드 서버를 제작하고
Apollo Client와 react를 활용해 프론트엔드 웹을 제작하면 된다.

https://github.com/sangbooom/graphql-apollo-react

https://www.yalco.kr/@graphql-apollo/2-1/

// index.js
const database = require("./database");
const { ApolloServer, gql } = require("apollo-server");
const typeDefs = gql`
	type Query {
		teams: [Team]
	}
	type Team {
		id: Int
		manager: String
		office: String
		extension_number: String
		mascot: String
		cleaning_duty: String
		project: String
	}
`;
const resolvers = {
	Query: {
		teams: () => database.teams,
	},
};
const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
	console.log(`🚀  Server ready at ${url}`);
});