GraphQL
1.[GraphQL] GraphQL이란?
GraphQL은 페이스북에서 만든 쿼리 언어로 Facebook, GitHub, Pinterest 등 다양한 서비스가 GraphQL을 사용하고 있으나, 국내에는 아직 GraphQL을 사용한 Open API는 많지않다. 이름에서 알 수 있듯이 Query Language인
2.[GraphQL] Apollo란?
Apollo는 대표적인 GraphQL의 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하게 된다. 공식 문서에서는 슈퍼그래프라고 소개되는데, 여기서 슈퍼그래프란 조직의 데이터와 서비스의 통합 네트워크를 구축하기 위한 개발자 플랫폼으로, 모두 단일
3.[GraphQL][NodeJS][Express] apollo-server 세팅하기 - NodeJS (apollo-server-express)
아래의 세팅방법은 NodeJS 기준으로 작성되었다. 라이브러리는 apollo-server-express (server-side), apollo-client (client-side) 두개를 사용한다.여기서 apollo-server 대신 apollo-server-expre
4.[GraphQL] Schema 등록하기
Schema -- apollo-server-express 서버를 생성했으면 서버에 resolver와 typeDef를 포함한 schema를 등록해야 한다. resolver와 typeDef에 대한 설명은 GraphQL이란? 포스팅 참조. TypeDef와 Resolver
5.[GraphQL][React] apollo-client 세팅하기 - React, Typescript
아래는 apollo-client의 세팅방식으로 React를 사용한 서버에 apollo-client를 적용하여 구성했다. 이 포스팅은 React를 활용하기만 할 뿐 apollo-client의 세팅을 위주로 작성되며 React관련 내용은 다루지 않는다. React 세팅방
6.[GraphQL][Express] CORS 설정하기 - apollo-server-express
apollo-client를 세팅한 후 apollo-server로 요청을 보내보면 아마 CORS에 의해 막힐 것이다. CORS란 브라우저가 보안적인 이유로 cross-origin HTTP 요청들을 제한하는 것이다. cross-origin 요청을 하려면 서버의 동의가 필
7.[GraphQL][React] apollo-client에 Header 설정하기 - JWT
앞선 apollo-client 세팅 방법 포스팅에서 클라이언트 서버를 생성하고 React 앱과 연동하였다. 개발을 하다보면 여기 구조를 바꿔야할 때가 있는데, 그 중 하나가 JsonWebToken (JWT)를 사용할 때 로그인 후 토큰을 발급 받고 이후 요청을 보낼 때
8.[GraphQL] react 훅 사용해서 쿼리 보내기 - useQuery, useLazyQuery, useMutation
react 시리즈에서 API 서버로 HTTP 요청을 보내기 위해 react-query를 사용하는 방법을 포스팅 했었는데, apollo를 사용하여 서버와 클라이언트를 연동할 때에도 비슷한 훅을 사용할 수 있다.이 훅들은 react-query 라이브러리가 아닌 @apoll