next apollo example

Exemple suivant & Apollo

Cet exemple utilise le package d'apollo suivant qui est idéal si vous souhaitez ranger une partie de la cérémonie impliquée lorsque vous utilisez Apollo dans votre application Next.js. Il présente également ma solution CSS-in-JS préférée, l'émotion.

Démo

Comment utiliser

Installez-le et exécutez

npm install
npm run dev

Déployez-le dans le cloud avec maintenant (téléchargement)

now

L'idée derrière l'exemple

Apollo est un client GraphQL qui vous permet de demander facilement les données exactes dont vous avez besoin à partir d'un serveur GraphQL. En plus de récupérer et de muter les données, Apollo analyse vos requêtes et leurs résultats pour construire un cache côté client de vos données, qui est tenu à jour car d'autres requêtes et mutations sont exécutées, récupérant plus de résultats du serveur.

Dans cet exemple simple, nous intégrons Apollo de manière transparente avec Next en enveloppez nos pages à l'intérieur d'un composant d'ordre supérieur (HOC). En utilisant le modèle HOC, nous pouvons transmettre une boutique centrale de données de résultats de requête créées par Apollo dans notre hiérarchie de composants React définie à l'intérieur de chaque page de notre prochaine application.

Sur le chargement initial de la page, sur le serveur et à l'intérieur getInitialProps , nous invoquons la méthode Apollo, getDataFromTree . Cette méthode renvoie une promesse; Au moment où la promesse se résout, notre magasin de clients Apollo est complètement initialisé.

Cet exemple repose sur Prisma + Nexus pour son backend GraphQL.