next apollo example

다음과 아폴로 예

This example utilizes the next-apollo package which is ideal if you want to tuck away some of the ceremony involved when using Apollo in your Next.js app. 또한 내가 선호하는 CSS-in-JS 솔루션, 감정을 특징으로합니다.

데모

사용 방법

설치하고 실행하십시오

npm install
npm run dev

지금 클라우드에 배포 (다운로드)

now

예제의 아이디어

Apollo는 GraphQL 서버에서 필요한 정확한 데이터를 쉽게 쿼리 할 수있는 GraphQL 클라이언트입니다. Apollo는 데이터를 가져오고 돌연변이하는 것 외에도 쿼리와 결과를 분석하여 추가 쿼리 및 돌연변이가 실행되면서 최신 상태로 유지되어 서버에서 더 많은 결과를 가져 오는 데이터의 클라이언트 측 캐시를 구성합니다.

이 간단한 예에서, 우리는 Apollo를 HOC (Highoder Component ) 안에 포장하여 다음과 완벽하게 통합합니다. HOC 패턴을 사용하여 APOLLO가 생성 한 쿼리 결과 데이터의 중앙 저장소를 다음 응용 프로그램의 각 페이지 내에 정의 된 REACT 구성 요소 계층으로 전달할 수 있습니다.

초기 페이지로드에서 서버와 내부 getInitialProps 에서 Apollo 메소드 인 getDataFromTree 호출합니다. 이 방법은 약속을 반환합니다. 약속이 해결되는 시점에서 Apollo Client Store는 완전히 초기화됩니다.

이 예제는 GraphQL 백엔드의 Prisma + Nexus에 의존합니다.