next apollo example

Próximo e Apollo Exemplo

Este exemplo utiliza o pacote Apollo Next, que é ideal se você deseja guardar parte da cerimônia envolvida ao usar a Apollo em seu aplicativo Next.js. Ele também apresenta minha solução preferida de CSS-in-JS, Emotion.

Demonstração

Como usar

Instale -o e corra

npm install
npm run dev

Implantá -lo na nuvem com agora (download)

now

A ideia por trás do exemplo

A Apollo é um cliente GraphQL que permite consultar facilmente os dados exatos necessários de um servidor grafql. Além de buscar e mutações de dados, a Apollo analisa suas consultas e seus resultados para construir um cache do lado do cliente de seus dados, que é mantido atualizado à medida que outras perguntas e mutações são executadas, buscando mais resultados do servidor.

Neste exemplo simples, integramos a Apollo sem problemas ao Next, envolvendo nossas páginas dentro de um componente de ordem superior (HOC). Usando o padrão hoc, podemos passar um armazenamento central de dados de resultados de consulta criados pelo Apollo em nossa hierarquia de componentes do React definidos em cada página do nosso próximo aplicativo.

No carregamento inicial da página, enquanto estiver no servidor e no getInitialProps interno, invocamos o método Apollo, getDataFromTree . Este método retorna uma promessa; No ponto em que a promessa resolve, nossa loja de clientes Apollo é completamente inicializada.

Este exemplo depende do PRISMA + Nexus para o back -end do GraphQL.