next apollo example

ถัดไป & Apollo ตัวอย่าง

ตัวอย่างนี้ใช้แพ็คเกจถัดไป-Apollo ซึ่งเหมาะอย่างยิ่งหากคุณต้องการเก็บพิธีบางอย่างที่เกี่ยวข้องเมื่อใช้ Apollo ในแอพถัดไปของคุณ นอกจากนี้ยังมีโซลูชัน CSS-in-JS ที่ฉันต้องการอารมณ์

การสาธิต

วิธีใช้

ติดตั้งและเรียกใช้

npm install
npm run dev

ปรับใช้กับคลาวด์ด้วยตอนนี้ (ดาวน์โหลด)

now

แนวคิดเบื้องหลังตัวอย่าง

Apollo เป็นไคลเอนต์ GraphQL ที่ช่วยให้คุณสามารถสอบถามข้อมูลที่แน่นอนที่คุณต้องการได้อย่างง่ายดายจากเซิร์ฟเวอร์ GraphQL นอกเหนือจากการดึงข้อมูลและการกลายพันธุ์แล้ว Apollo วิเคราะห์การสืบค้นของคุณและผลลัพธ์ของพวกเขาเพื่อสร้างแคชด้านไคลเอนต์ของข้อมูลของคุณซึ่งได้รับการปรับปรุงให้ทันสมัยอยู่เสมอเนื่องจากการสืบค้นและการกลายพันธุ์เพิ่มเติมจะเรียกใช้ผลลัพธ์เพิ่มเติมจากเซิร์ฟเวอร์

ในตัวอย่างง่ายๆนี้เรารวมอพอลโลเข้ากับถัดไปด้วยการห่อ หน้า ของเราภายในองค์ประกอบที่สูงกว่า (HOC) การใช้รูปแบบเฉพาะกิจเราสามารถส่งผ่านร้านค้ากลางของข้อมูลผลลัพธ์การสืบค้นที่สร้างโดย Apollo ลงในลำดับชั้นขององค์ประกอบปฏิกิริยาของเราที่กำหนดไว้ในแต่ละหน้าของแอปพลิเคชันถัดไปของเรา

ในการโหลดหน้าเริ่มต้นในขณะที่อยู่บนเซิร์ฟเวอร์และภายใน getInitialProps เราเรียกใช้วิธี Apollo, getDataFromTree วิธีนี้ส่งคืนสัญญา; ณ จุดที่สัญญาแก้ไขร้านค้าไคลเอนต์ Apollo ของเราเริ่มต้นอย่างสมบูรณ์

ตัวอย่างนี้อาศัย Prisma + Nexus สำหรับแบ็กเอนด์ GraphQL