프론트엔드 개발/GraphQL

Apollo Client 와 Relay 를 비교해보자

프론트엔드에서 GrpahQL 를 다루기 위한 대표적인 라이브러리로는 Apollo Client와 Relay 가 있습니다.그 중에 저희는 Apollo Client 를 사용하고 있는데요. 처음에 Apollo 와 Relay 중 어느것을 하는가 비교했었을때 Next.js 와 SSR 기능과의 통합성을 좀 중점적으로 보았습니다.왜냐하면 그 전까지 React 로 CSR 만 사용하다가 이번 프로젝트에 Next.js 를 처음 도입하게된 것이었고. 고객 유입을 위한 SEO 가 중요하여 SSR를 적극 사용할 것으로 기대했기 때문입니다. Relay 는 SSR을 공식적으로 지원하지 않기에 별도로 복잡한 설정을 해주어야 하고. 성능 최적화. 캐시 자동관리 등에 중점적이어서 대규모 서비스에 적합하다는 말이 있었고.Apollo Cli..

Next.js 의 ServerSide 에서 Apollo Client Cache 데이터가 모든 사용자 간에 공유되는 이슈

마이페이지에 다른 사람의 정보가 보이는 문제가 발생했습니다!!! 회사에서 개발 중인 사이트의 마이페이지는 사용자의 정보를 Next.js getServerSideProps 에서 Apollo Client Query 로 가져온 다음에 캐시 데이터를 클라이언트 Apollo Client 인스턴스의 캐시와 병합시키고, 그 캐시 데이터를 클라이언트 단에서 뽑아서 화면에 보여주는 방식으로 개발 했었는데요. 이것은 rehydreate 를 하는 여러 방법 중에 보편적으로 알려진 방식입니다. 대부분 Next.js + Apollo 궁시렁 검색하면 이렇게 나올겁니다. ClientSide 에서 useQuery 사용시 _app.tsx 에서 pageProps 를 useApollo hook에 전달 useApollo 에서 initia..

Apollo Subscription 으로 GraphQL 서버와 WebSocket 통신하기

구독 백엔드 데이터의 변경 사항에 대해 클라이언트에 실시간으로 알리는데 유용합니다. Query,Mutation 과 달리 지속적인 연결을 유지해야 하기 때문에 graphql-ws 라이브러리를 통해 WebSocket으로 통신합니다. 구독은 이럴 때 사용합니다. 이 경우가 아니라면 쿼리를 사용하여 간헐적 폴링을 하거나 필요한 순간에만 쿼리 하세요. 또한 구독은 외부 데이터의 변경 사항을 구독하는 것입니다. 로컬 클라이언트 캐시의 변경사항 구독에 사용할 수 없습니다! 큰 개체에 대한 작은 증분 변경 큰 덩어리 객체에서 필요한 개별 필드의 업데이트가 발생했을때 가져오는 경우를 뜻합니다. 대기 시간이 짧은 실시간 업데이트 예를 들면 채팅 앱에서 실시간 메시지를 주고 받는 경우 Apollo Client 에서 지원하는..

React에서 Apollo Client 를 상태관리 라이브러리로 사용하기

오늘은 리액트에서 Apollo Client 를 사용하는 경우 Redux, Recoil, Jotai, Zustand 와 같은 상태관리 라이브러리를 사용하지 않고 Apollo Client 만을 사용하여 클라이언트 내부 상태관리하는 방법에 대해 알아보겠습니다. 주의할 점은 Apollo Client 가 GraphQL + 클라이언트 내부 상태관리도 가능하다는 것이지, GraphQL 를 사용하지 않는 환경에서 이미 잘 사용하고 있는 상태관리 라이브러리를 대체해서는 안됩니다 🙅‍♂️ 이미 다 아시겠지만, Apollo Client 를 통해 Apollo Server 에 Query를 요청하는 방식부터 살펴봅시다. Apollo Client 를 통해 서버에 Query 요청하는 방식 Apollo Client와 GraphQL ..

Apollo graphql 스키마와 리졸버에 대해 알아보자. 사용법

GraphQL API용 쿼리 언어이며 데이터에 대해 정의한 유형 시스템을 사용하여 쿼리를 실행하기 위한 서버 측 런타임입니다. 특정 데이터베이스 또는 스토리지 엔진에 연결되지 않으며 대신 기존 코드 및 데이터로 지원됩니다. 필요한 것을 요청하고 정확히 가져옵니다. 단일 요청으로 많은 리소스 가져올 수 있습니다. 구조 (Apollo 사용) 일단 자세한 설명에 앞서서 전체 구조가 이런 식으로 돌아간다는 이해하시고 읽으면 이해가 더 잘 될 겁니다. 프론트엔드 : Apollo Client 를 통해 스키마의 앤드포인트에서 필요한 데이터를 GraphQL 쿼리문으로 요청 백엔드 : Apollo Server 에 스키마, 리졸버, 데이터소스 를 구성 리졸버 : 데이터소스에서 데이터 가져와서 스키마 필드를 채워서 응답을 ..

Apollo 오디세이(ODYSSEY) graphql 강의

Apollo 오디세이 (ODYSSEY) 회사에서 다음 프로젝트 준비하면서 끝없는 수련을 하고 있습니다. 특히 다음 프로젝트에는 graphql 기술을 사용하기 때문에 서둘러서 공부해야 하는 상황입니다! 찾다보니 Apllo 형님들이 자체적으로 무료 강의를 제공해주시더군요. 그저 빛 ... 바로 Apollo 사 에서 제공하는 오디세이 (ODYSSEY) 라는 교육 플랫폼 입니다. https://www.apollographql.com/tutorials/browse GraphQL tutorials and resources - GraphQL Tutorials Side Quest: Intermediate Schema Design Enums, inputs, interfaces, and query fragments www..