next apollo example

Siguiente ejemplo de Apollo

Este ejemplo utiliza el paquete Next-Apollo que es ideal si desea obtener parte de la ceremonia involucrada cuando usa Apollo en su aplicación Next.js. También presenta mi solución CSS-in-JS preferida, emoción.

Manifestación

Cómo usar

Instalarlo y ejecutar

npm install
npm run dev

Implementarlo en la nube con ahora (descargar)

now

La idea detrás del ejemplo

Apollo es un cliente GraphQL que le permite consultar fácilmente los datos exactos que necesita de un servidor GraphQL. Además de obtener datos de obtención y mutación, Apollo analiza sus consultas y sus resultados para construir un caché del lado del cliente de sus datos, que se mantiene actualizado a medida que se ejecutan consultas y mutaciones adicionales, obteniendo más resultados del servidor.

En este simple ejemplo, integramos a Apolo a la perfección con el siguiente envolviendo nuestras páginas dentro de un componente de orden superior (HOC). Usando el patrón HOC, podemos transmitir una tienda central de datos de resultados de consulta creados por Apollo en nuestra jerarquía de componentes React definida dentro de cada página de nuestra próxima aplicación.

En la carga inicial de la página, mientras que en el servidor y el interior getInitialProps , invocamos el método Apollo, getDataFromTree . Este método devuelve una promesa; En el punto en que se resuelve la promesa, nuestra tienda de clientes Apollo se inicializa por completo.

Este ejemplo se basa en Prisma + Nexus para su backend GraphQL.