GraphQL 이란? ( GraphQL API )
Node.js를 이용해, 데이터베이스에 접근하는 나만의 명령어를 만들고 (Query, Mutation, TypeDefs, resolvers )
CRUD 요청, 응답을 더 효과적으로 처리할 수 있게 해주는 API ( 연결다리 )
GraphQL의 필요성
스키마를 통해, 사용자만의 명령어를 만들고 사용할 수 있다.
번들 크기가 줄어, 클라이언트 속도가 빠르다!
아폴로 스튜디오를 이용해, 작성한 코드를 쉽게 테스팅 해볼 수 있다.
REST API 와의 차이점 ( 장점! )
GraphQL은 필요한 정보만 선택해서 가져올 수 있다.
- REST API는 필요한 정보를 가져오기위해서, 쓸데없는 정보도 같이 가져와야하는 Over-fetching 문제가 있다.
GraphQL은 하나의 요청으로 여러개의 데이터를 한번에 가져올 수 있다.
- REST API는 여러개의 데이터를 가져오려면, 여러개의 요청이 필요하는 Under-fetching 문제가 있다.
Apollo란?
GraphQL이 적용된 프로젝트를 쉽게 만들 수 있게 해주는 Node.js 패키지
ApolloServer : GraphQL이 적용된 서버를 쉽게 만들어줌
ApolloClient : GraphQL을 통해, 클라이언트상의 LocalState를 이용할 수 있게 만들어줌
GraphQL, ApolloServer 설치
npm i graphql apollo-server
// graphql : 그래프큐엘을 사용하기 위한 패키지
// apollo-server : 아폴로 서버를 사용하기 위한 패키지GraphQL 스키마 만들기 (Schema)
// index.js
// 서버와 클라이언트에서 주고 받을 데이터 형식 지정하기
const typeDefs = gql`
// Book 객체의 형식을 지정 (title, author를 포함한다)
type Book {
title: String
author: String
}
// Query에는, 우리가 서버에서 데이터를 가져올때 사용할 명령어의 형식을 지정해준다. (중요)
type Query {
// [Book]데이터를 불러올때 사용할 명령어(Query)를 "books"로 지정
books: [Book]
}
`;
데이터 세트 만들기
// index.js 내용추가
// 실제로 사용할 데이터 추가하기
const books = [
{
title: 'The Awakening',
author: 'Kate Chopin',
},
{
title: 'City of Glass',
author: 'Paul Auster',
},
];
// 스키마에서 지정한 형식과 동일하게 작성되어야 한다!
Resolvers 만들기
// index.js 내용 추가
// books 쿼리 입력시, 아까만든 books 데이터 세트 불러오기
const resolvers = {
Query: {
books: () => books,
},
};
Apollo-GraphQL 서버 만들기
// index.js 내용추가
// Schema로 데이터 형식을 지정하고, resolvers로 실제데이터 처리를 하는 ApolloServer 만들기.
const server = new ApolloServer({ typeDefs, resolvers });
// server를 감시하고 있다가, 실행되면 콘솔창에 알림메시지를 보내줌
server.listen().then(({ url }) => {
console.log(`🚀 Server ready at ${url}`);
});
Node.js로 서버 실행하기
node index.js실행결과
🚀 Server ready at http://localhost:4000/
GraphQL Playground란?
GraphQL의 명령어(쿼리, 뮤테이션등)들을, 브라우저 환경에서 테스트 해볼 수 있도록 해주는 도구
서버에서 데이터 불러오기
// GraphQL Playground
// 데이터를 불러오기 위해 Query를 사용한다.
{
books {
title
author
}
}실행결과
서버로 데이터 보내기
1. Schema 수정하기 ( 사용할 명령어 형식 정하기 )
// index.js
// 서버와 클라이언트에서 주고 받을 데이터 형식 지정하기
const typeDefs = gql`
type Book {
title: String
author: String
}
type Query {
books: [Book]
}
// Mutation에는, 우리가 서버에서 데이터를 추가, 수정, 삭제할때 사용할 명령어의 형식을 지정해준다.
type Mutation {
// title인자를 받아오고, 정상적으로 받아왔는지 확인하는 Bool값을 출력하기 위한 형식 지정
// createBook, deleteBook이라는 명령어(Mutation)를 사용할 것이라고 지정
// "!"를 사용해, 데이터를 필수적으로 받아온다 ( 없으면 에러 출력 )
createBook(title: String!): Boolean
deleteBook(title: String!): Boolean
`;2. Resolvers 수정하기 ( 명령어 기능 만들기 )
// index.js 내용 추가
// books 쿼리 입력시, 아까만든 books 데이터 세트 불러오기
const resolvers = {
Query: {
books: () => books,
},
// Schema에서 지정한 형식에 맞춰, Mutation명령에에 맞는 작업을 실행시켜준다.
Mutation: {
// Mutation은 기본적으로 두번째 인자에 정보들(args)을 받아온다. (중요!)
createBook: (_,args) => {
// 받아온정보들 출력하기 ( 나중에 데이터를 추가할 기능이 들어갈 부분 )
console.log(args);
// Bool값 돌려주기
return true
},
deleteBook: (_,args) => {
console.log(args);
return true
}
}
};
// Mutation 인자 정보 : (root, args, context, info)
3. Playground에서 Mutation명령어 실행
mutation {
createBook(title:"추가할 책 제목 입력")
}
반응형
