Intro
현재 UOS공지사항의 백엔드 작업을 마무리하는 단계이다. Nestjs로 백엔드 서버를 작성하였다. API는 GraphQL을 사용하였다. UOS공지사항은 React Native를 사용하는 모바일 앱이 있고 앞으로 React를 사용하는 웹을 추가적으로 서비스할 예정이다.
클라이언트(React, React Native)에서의 데이터 요청을 새로운 서버(graphql)에 맞춰서 수정을 진행하려한다.
클라이언트에서 graphql을 잘(?)사용하기 위해 고민한 내용을 글로 적어보려고 한다.
별도의 graphql client가 필요할까?
기본적으로 graphql은 HTTP POST Method로 요청을 보낸다. body에 query와 variables을 담아서 요청을 보내면 된다.
fetch('/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query,
variables,
}),
}).then(response => {
return response.json();
});따라서 단순히 graphql의 Query와 Mutation을 사용할때는 별도의 라이브러리가 필요가 없다.
하지만 별도의 graphql라이브러리를 사용하는것에 대한 이점도 있다.
- local state의 관리
- 서버에서 받은 데이터의 caching
- UI 프레임워크(React)와의 통합
- 편리한 graphql query의 작성
위와 같은 기능을 제공하는 react에서의 graphql 라이브러리는 relay, apollo client가 대표적이다.
별도의 graphql 라이브러리를 사용할 경우 caching작업을 통해 불필요한 network request를 줄일 수 있고 라이브러리 자체의 local state를 활용해서 장기적으로는 redux에 대한 의존을 줄일 수 있기 때문에 relay나 apollo client와 같은 별도 라이브러리를 사용하려고 한다.
다음글에서 relay와 apollo client의 공식 문서를 참고해서 각 프레임워크에 대한 특성과 장단점에 대해 알아보겠다.
