next apollo example

Contoh Berikutnya & Apollo

Contoh ini menggunakan paket Apollo berikutnya yang sangat ideal jika Anda ingin menyelipkan beberapa upacara yang terlibat saat menggunakan Apollo di aplikasi berikutnya.js Anda. Ini juga menampilkan solusi CSS-in-Js pilihan saya, emosi.

Demo

Cara menggunakan

Instal dan Jalankan

npm install
npm run dev

Menyebarkannya ke cloud dengan sekarang (unduh)

now

Ide di balik contoh

Apollo adalah klien GraphQL yang memungkinkan Anda untuk dengan mudah meminta data yang tepat yang Anda butuhkan dari server GraphQL. Selain mengambil dan bermutasi data, Apollo menganalisis pertanyaan Anda dan hasilnya untuk membangun cache sisi klien dari data Anda, yang terus diperbarui karena kueri dan mutasi lebih lanjut dijalankan, mengambil lebih banyak hasil dari server.

Dalam contoh sederhana ini, kami mengintegrasikan Apollo mulus dengan selanjutnya dengan membungkus halaman kami di dalam komponen tingkat tinggi (HOC). Menggunakan pola hoc kami dapat meneruskan data pusat hasil kueri yang dibuat oleh Apollo ke dalam hierarki komponen reaksi kami yang ditentukan di dalam setiap halaman aplikasi kami berikutnya.

Pada pemuatan halaman awal, saat di server dan di dalam getInitialProps , kami memohon metode Apollo, getDataFromTree . Metode ini mengembalikan janji; Pada titik di mana janji diselesaikan, toko klien Apollo kami sepenuhnya diinisialisasi.

Contoh ini bergantung pada prisma + nexus untuk backend graphQL -nya.