next apollo example

مثال Next & Apollo

يستخدم هذا المثال حزمة apollo التالية التي تكون مثالية إذا كنت ترغب في التخلص من بعض الحفلات المعنية عند استخدام Apollo في تطبيق Next.js الخاص بك. كما أنه يتميز بحل CSS-in-JS المفضل لدي ، والعاطفة.

العرض التوضيحي

كيفية استخدام

تثبيته وتشغيله

npm install
npm run dev

نشرها على السحابة مع الآن (تنزيل)

now

الفكرة وراء المثال

Apollo هو عميل GraphQL يسمح لك بالاستعلام عن البيانات الدقيقة التي تحتاجها بسهولة من خادم GraphQL. بالإضافة إلى جلب البيانات والتحول ، يقوم Apollo بتحليل استفساراتك ونتائجها لبناء ذاكرة التخزين المؤقت من جانب العميل لبياناتك ، والتي يتم الحفاظ عليها حتى يتم تشغيل المزيد من الاستعلامات والطفرات ، مما يحقق المزيد من النتائج من الخادم.

في هذا المثال البسيط ، ندمج Apollo بسلاسة مع التالي من خلال لف صفحاتنا داخل مكون عالي الترتيب (HOC). باستخدام النمط المخصص ، يمكننا نقل متجر مركزي لبيانات نتائج الاستعلام التي تم إنشاؤها بواسطة Apollo في التسلسل الهرمي للمكون React المحدد داخل كل صفحة من تطبيقاتنا التالية.

في تحميل الصفحة الأولية ، بينما على الخادم وداخل getInitialProps ، نستدعي طريقة Apollo ، getDataFromTree . هذه الطريقة تُرجع وعدًا ؛ عند النقطة التي يحل فيها الوعد ، يتم تهيئة متجر عميل Apollo بالكامل.

يعتمد هذا المثال على Prisma + Nexus للواجهة الخلفية لـ GraphQL.