Backend에서 구성한 query와 mutation을 react에서 사용하는 방식은 크게 두 가지이다. 1. Query, Mutation 태그 이용 2. useQuery, useMutation Hook 이용 2번은 apollo/react-hook에서 제공하는 custom hook인데, 나는 이 프로젝트에서 hook을 적극적으로 활용할 ...

Blog 프로젝트에서는 graphql을 이용해 backend를 구축하기로 결정했고, 구체적으로는 apollo에서 지원하는 apollo-server를 이용하였다. 기존의 axios 등을 활용하는 restful API 방식에서는 요청을 보낼 때마다 원하는 request 헤더를 자유롭게 실어줄 수 있었는데, graphql을 이용할 때는 request header...

GraphQL의 서버 사이드 캐싱, 인증, 권한, 오류 처리, 오프라인 사용 등에 대한 공통 질문에 대한 해답을 알아봅니다.

GraphQL의 다양한 보안 측면 및 전략에 대하여 알아봅니다. 시간 제한, 최대 쿼리 깊이, 쿼리 복잡도, 쓰로틀링에 대하여 알아봅니다.

GraphQL 생태계에 대하여 알아보고, GraphiQL Playground, Introspection을 통하여 자동 생성되는 문서와 같은 관련 도구에 대하여 배웁니다.

Fragment, 쿼리 인자, Alias, 인터페이스, 그 이외의 SDL 기능과 같은 GraphQL의 심화 개념에 대하여 알아봅니다.

GraphQL 서버의 주요 개념에 대하여 배우고, 리졸버 함수를 사용하여 GraphQL 쿼리를 실행하는 법과 여러 요청을 일괄 처리하는 법을 알아봅니다.

이번 장에서는 GraphQL 클라이언트가 제공하는 핵심 개념, 추상화와 기능에 대하여 배웁니다.

최근 GraphQL을 이용한 프로젝트를 진행한 적이 있다. GraphQL에 관한 포스팅은 내 이전 velog를 확인하자. https://velog.io/@jayson/project-개.고.수-반려동물을-위한-커뮤니티 RESTful API와 다른 고유의 특징을 가지고 있는 GraphQL은 Quary와Mutation을 통해 요청을 보내 줄 수 있다. 대게 ...

최근 프론트엔드를 Angular로 전면 교체하면서 상태 관리 코드에 관한 고민이 많은 차에 많은 영감을 주는 좋은 글을 발견하여 (처음으로, 제대로) Mark Johnson님의 허락을 얻어 모자란 실력이나마 번역을 해봤습니다. 이에 관한 제 생각과 경험이 더 있는데 그 글은 따로 포스트를 작성하도록 하겠습니다ㅋ How GraphQL Replaces...

로컬 상태 관리 1. 상태로 만들어줘야 할 부분 - input - 변하는 부분 전부! (쇼핑몰을 예로들면 갯수나 가격, 옵션) - 유저의 입력정보 2. 상태 초기화 - cacheState.js 파일을 만들어 상태로 만들어줄 초기값을 설정한다. - 반드시 typename이 필요하다. - apollo cache의 모든 상태는 graphql의 type 시스템...

✨ 왜 nextjs + React + apollo-client 조합으로 SSR 구현을 하게되었다. 물론 98% 짜여진 코드에 2% 치명적인 코드를 수정해야하는 작업이었지만, 클라이언트에도, 서버에도 매우 치명적인 오류였기때문에 반드시 고쳐야만했다. 🔧🔨react-apollo는 이 프로젝트를 통해 처음 접하는 라이브러리였고, 아직 레퍼런스도 부족해서 영알...