Redux-saga를 공부하고 나니 GraphQL과 Apollo의 조합에 관한 학습 의욕이 상승했다. 그리고 면접을 볼 때도 GraphQL을 쓰는 곳이 대다수여서 꼭 배워야겠다는 생각이 들었다.
먼저 GraphQL은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어이며, 서버에서는 하나의 endpoint를 가지고 있다.
그렇다면 기존의 원하는 데이터를 받기 위해 여러개의 endpoint를 필요로 하던 경우는 어떻게 대처할까?
A. 프론트단에서 query, mutation을 이용해서 원하는 정보를 정확히 요청해서 해결할 수 있다! 따라서 over-fetching이나 under-fetching의 문제도 해결된다.
여기에 apollo client를 이용하면 redux의 사용빈도까지 줄일 수 있다. (유튜브의 니꼴라스 영상을 보면 아예 대체도 될 수 있다하고, 네이버도 두 조합으로 사용빈도를 줄였다고 한다.)
GraphQL 시작하기
- 먼저 GraphQL을 시작하기 전에 yarn 으로 패키지를 설치한다.
yarn add graphql-yoga - graphql-yoga는 CRA처럼 GraphQL 서버를 구성하기 쉽게 해준다.
2. 사용할 데이터를 정의한다. 보통은 DB에서 호출하겠지만 여기서는 연습으로 테스트 데이터를 만들었다.
export const users = [
{
id: 1,
name: 'JJAGU',
age: 365
},
{
id: 2,
name: 'DALSO',
age: 12
}
]3. graphql 폴더를 만들고, typeDefs.js, resolvers.js를 생성한다.
- typeDefs.js
type: User{
id: Int!
name: String!
age: Int!
}
type Query {
users: [User!]!
user(name: String!): User
}
type Mutation {
addUser(name: String!, age: Int!): Users!
}typeDef에서는 Schema 구조와 Query문 그리고 Mutation을 정의한다.
위에서는 Person이라는 Schema를 정의했다. Person 데이터에서는 id와 name, age의 정보를 받을 수 있다. !는 Not nullable을 뜻한다.
Query은 select하는 역할을 한다. people과 person 두 가지가 있는데, people은 Person을 배열로 받으며, 무조건 값이 있다는 뜻이다. person은 String 데이터 형의 name을 인자로 받아서 일치하는 Person을 반환하는데, 일치하는 데이터가 없을 경우 null을 반환한다.
Mutation은 그 외의 데이터를 수정할 때 사용한다. addPerson은 name과 age를 입력받고, 생성된 객체를 다시 반환한다.
- resolvers.js
import {users} from './users';
const resolvers = {
Query: {
users: () => users;
user: (_, { name }) => {
return users.filters( user => user.name === name)[0]
}
},
Mutation: {
addUser: (_, {name, age}) => {
if(users.find(user.name) === name) return null
const newUsers = {
id: users.length + 1, name, age
}
users.push(newUsers )
return newUsers
}
}
}resolvers에서는 Query, Mutation에서 처리를 객체로 정의한다.
이제 graphql-server를 위한 준비는 끝났고, index.js에서 GraphQLServer를 생성하면 된다.
- index.js
import { GraphQLServer } from 'graphql-yoga'
import resolvers from './graphql/resolvers'
const server = new GraphQLServer({
typeDefs,
resolvers
});
server.start(() => console.log('graphql server is running :)'))yarn start로 실행시키고 나서 localhost:4000으로 접근하면 graphql playground가 실행된다.
우리가 구현한 query, mutation문을 사용하는 방법은 다음과 같고, 사용하려는 속성만 적어주면 된다.
query{
users {
id
name
age
}
}query{
user(name: "JJAGU"){
id
name
age
}
}mutation{
addUser(name: "IU", age: 28){
id
}
}- 만약 typeDef에서 mutation의 return값을 Boolean!으로 해놨으면 mutation문만 작성해도 된다. ex) mutation{ addUser(name: “IU”, age: 28) }
오늘은 api를 이용해서 GraphQL까지 공부했다. (movie api사용한건 저작권으로 못올림!) 내일은 면접보고 시간되면 Apollo Client까지 해봐야겠다.
아 그리고 프론트엔드 기술면접도 정리해야지… 에효 맘아푸다……ㅠ_ㅠ
