Global Cache สำหรับกราฟ Netlify พร้อม Upstash Redis

เมื่อวานนี้ Netlify ได้ประกาศคุณลักษณะใหม่ที่เรียกว่า Netlify Graph เมื่อเร็วๆ นี้เพื่อนร่วมงานของฉันได้เน้นส่วนที่ขาดหายไปที่คล้ายกันในรูปภาพ และ Netlify ได้ก้าวไปสู่การแก้ปัญหาที่ดี

โดยพื้นฐานแล้ว Netlify Graph ช่วยให้นักพัฒนาสร้างการเรียก GraphQL API สำหรับเว็บแอปของพวกเขา หลังจากเตรียมคำขอ GraphQL ใน Netlify Dashboard แล้ว คุณสามารถแทรกโค้ดไคลเอ็นต์ลงในโปรเจ็กต์ของคุณได้ในคลิกเดียว

มีข้อเสียในการใช้ฟังก์ชัน Netlify ร่วมกับบริการของบุคคลที่สาม คำขอจากฝั่งไคลเอ็นต์ไปที่ Netlify Backend (ฟังก์ชัน) ก่อนแล้วจึงส่งไปยังบริการของบุคคลที่สาม (ในตัวอย่างของเราคือ Spotify) การเดินทางครั้งนี้จะเพิ่มเวลาแฝงได้มากหากบริการเหล่านี้และผู้ใช้ปลายทางไม่ได้อยู่ในตำแหน่งทางภูมิศาสตร์เดียวกัน

หากเราสามารถแคชข้อมูลจากฟังก์ชัน Netlify ได้ เราก็สามารถลดเวลาแฝงได้ Upstash Global Redis Database อาจเป็นทางออกที่ดีในการแคชการเรียก Netlify API ด้วยการจำลองแบบหลายภูมิภาคของ Upstash Redis การตอบสนอง API สามารถแคช/จำลองแบบได้ทั่วโลก

มาสร้างแอปพลิเคชัน Spotify แบบง่ายๆ ที่เรียกใช้ Spotify API และแคชการเรียก API ใน Upstash Global Redis

มาปรับใช้ Next JS Starter App ใช้ Netlify Console นี่เป็นแอป Next.js ที่ง่ายมากที่สามารถปรับใช้ได้ด้วยการคลิกเพียงไม่กี่ครั้งจาก Netlify คุณสามารถตรวจสอบตัวเลือกอื่น ๆ สำหรับการปรับใช้แอป Next JS starter

หลังจากปรับใช้ขั้นตอน ให้โคลนที่เก็บตัวอย่างของคุณไปยังโลคัลและดำเนินการ netlify dev สั่งการ. ควรทำงานบน localhost:8888 คุณอาจต้องดำเนินการ netlify login หากเป็นครั้งแรกที่คุณตั้งค่า

ตอนนี้เราจะกำหนดค่าการรวม Netlify Graph-Spotify API ไปที่:

Netlify Console --> Sample App --> Graph --> Connect API or Service --> Spotify

ในหน้าการกำหนดค่า Spotify ให้เปิดใช้งาน Authentication และ Graph Explorer จะตรวจสอบสิทธิ์กับ Spotify สำหรับการผสานรวม API

ตอนนี้เราสามารถเล่นกับ GraphQL Playground ได้แล้ว คลิกที่ Start querying Spotify ปุ่ม. ตอนนี้เราต้องรัน netlify-cli ด้วยคำสั่งต่อไปนี้ในไดเร็กทอรีโครงการ

netlify dev --graph

หลังจาก CLI เสร็จสิ้น ให้ตรวจสอบส่วน Netlify Graph แล้วคุณจะเห็นเซสชันที่ใช้งานอยู่ คลิกที่เซสชัน และจะเปิดสภาพแวดล้อมสนามเด็กเล่นสำหรับ GraphQL API

สนามเด็กเล่นนี้น่ากลัว มีประโยชน์มากในการสร้างแบบสอบถาม GraphQL ที่เฉพาะเจาะจง ฉันได้สร้างการสืบค้น Spotify ที่ส่งคืน Featured Playlists อย่างรวดเร็ว

query SpotifyFeatured {
  spotify {
    featuredPlaylists {
      name
      images {
        url
      }
      description }}}

หลังจากที่คุณสร้างแบบสอบถาม ให้สร้างรหัสและฉีดไปยังโครงการของเรา

คลิก Actions --> Generate Handler

netlify-cli จะสร้าง SpotifyFeatured.js . โดยอัตโนมัติ ไฟล์ภายใต้ไดเร็กทอรี api และ SpotifyFeaturedForm.jsx ภายใต้ pages ไดเรกทอรี

SpotifyFeatured.js :นิยามฟังก์ชัน Netlify ที่ดึงข้อมูลจาก Netlify Backend --> Spotify API

SpotifyFeaturedForm.jsx :องค์ประกอบ React ซึ่งเป็นรูปแบบอย่างง่าย/ตัวอย่างที่เรียกใช้ฟังก์ชัน Netlify และส่งคืนการตอบกลับ

ฉันได้แก้ไขเฉพาะส่วน html/css ขององค์ประกอบนี้เพื่อมอบประสบการณ์ UI ที่ดีขึ้น ฉันจะแบ่งปันรหัสของฉันในตอนท้ายของโพสต์

รวม SpotifyFeaturedForm.jsx คอมโพเนนต์ของ index.js

import Spotify from './SpotifyFeaturedForm'
...
...
<Spotify title="Spotify Featured Playlist"/>

ตอนนี้ฉันมีปุ่มในหน้าหลักและสามารถรับการตอบกลับจาก Spotify API แคชการตอบกลับกันเถอะ

สร้างฐานข้อมูล Upstash Global จาก Upstash Console

เราจะแก้ไขโค้ดฟังก์ชัน Netlify ที่สร้างโดยอัตโนมัติ (SpotifyFeatured.js )ในโค้ดมีโค้ดที่ดึงข้อมูลจาก Netlify Backend/Spotify API:

const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({  }, {accessToken: accessToken});

ก่อนอื่นเราจะตรวจสอบการแคช Redis หากไม่มีอยู่ เราจะเรียกใช้บริการบุคคลที่สาม

ในการสื่อสารกับ redis ฉันใช้ไลบรารี Upstash Redis JS คุณสามารถรับข้อมูลประจำตัว Upstash Redis REST ได้จากหน้ารายละเอียดฐานข้อมูล

แทนที่ UPSTASH_REDIS_REST_URL . ของคุณ และ UPSTASH_REDIS_REST_PASSWORD ในข้อมูลโค้ด

redisClient.auth('UPSTASH_REDIS_REST_URL', 'UPSTASH_REDIS_REST_PASSWORD');
spotifyData = await redisClient.get('spotify-cache');
if (spotifyData.data == null) {
    spotifyData = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});
    if (spotifyData.errors) {
        console.error(JSON.stringify(spotifyData.errors, null, 2));
    } else {
        await redisClient.setex('spotify-cache', 300, JSON.stringify(spotifyData));
    }
} else {
    spotifyData = JSON.parse(spotifyData.data)
}
res.setHeader("Content-Type", "application/json");

return res.status(200).json({
    spotifyData
});

ในข้อมูลโค้ดด้านบน ขั้นแรกเราจะตรวจสอบว่ามีแคชอยู่ใน Upstash Redis หรือไม่ หากมีอยู่แล้ว ให้ใช้แคชที่ดึงมาจาก API ดั้งเดิมและบันทึกแคชไว้ที่ upstash ซึ่งเป็นข้อมูลโค้ดที่ง่ายมากและสามารถปรับปรุง/แก้ไขได้ อย่างตั้งใจ

ดังนั้นเราจึงเพิ่มลักษณะการทำงานของแคชทั่วโลกในคุณลักษณะ Netlify Graph ด้วยสองสามบรรทัด

บทสรุป

คุณลักษณะกราฟของ Netlify จะช่วยให้นักพัฒนาทั้งหมดสามารถรวมบริการ API บุคคลที่สามเข้ากับโค้ดได้อย่างง่ายดาย ตัวสำรวจ GraphQL ของ Netlify และการฉีดโค้ดช่วยได้มาก

ในทางกลับกัน หากคุณต้องการแคชการตอบสนอง API ฐานข้อมูล Upstash Global คือโซลูชันสำหรับการแคชการตอบสนอง การสร้างฐานข้อมูล Upstash Redis ทำได้โดยการคลิกเพียงไม่กี่ครั้ง

นี่คือโค้ดล่าสุดของตัวอย่างแอปพลิเคชัน