next apollo example

NEXT & Apollo Beispiel

In diesem Beispiel wird das nächste APOLLO-Paket verwendet, das ideal ist, wenn Sie einen Teil der Zeremonie, die bei der Verwendung von Apollo in Ihrer nächsten.js-App beteiligt sind, weglegen möchten. Es zeigt auch meine bevorzugte CSS-in-JS-Lösung, Emotion.

Demo

Wie man benutzt

Installieren und ausführen

npm install
npm run dev

Stellen Sie es mit jetzt in der Cloud ein (Download)

now

Die Idee hinter dem Beispiel

Apollo ist ein GraphQL -Client, mit dem Sie die genauen Daten, die Sie benötigen, einfach von einem GraphQL -Server abfragen. Zusätzlich zum Abrufen und Mutieren von Daten analysiert Apollo Ihre Abfragen und deren Ergebnisse, um einen clientseitigen Cache Ihrer Daten zu erstellen, der auf dem neuesten Stand ist, wenn weitere Abfragen und Mutationen ausgeführt werden, wodurch mehr Ergebnisse vom Server erzielt werden.

In diesem einfachen Beispiel integrieren wir Apollo nahtlos in die nächste, indem wir unsere Seiten in eine Komponente höherer Ordnung (hoc) einwickeln. Mit dem HOC -Muster können wir einen zentralen Speicher von Abfrageergebnisdaten, die von Apollo in unsere React -Komponentenhierarchie erstellt wurden, in jeder Seite unserer nächsten Anwendung erstellt werden.

Wenn wir auf dem Server und in getInitialProps auf dem Server und in den GetInitialProps aufgerufen werden, rufen wir die Apollo -Methode getDataFromTree auf. Diese Methode gibt ein Versprechen zurück; An dem Punkt, an dem das Versprechen auflöst, ist unser Apollo -Client -Geschäft vollständig initialisiert.

Dieses Beispiel basiert auf Prisma + Nexus für sein GraphQL -Backend.