Hôm qua, Netlify công bố tính năng mới gọi là Netlify Graph. Đóng góp của đồng nghiệp gần đây đã làm nổi bật mảnh ghép còn thiếu và Netlify đã tiến bước tốt نحو giải pháp.
Về cơ bản, Netlify Graph giúp các nhà phát triển xây dựng các lệnh gọi GraphQL API cho ứng dụng web. Sau khi chuẩn bị các yêu cầu GraphQL trong Netlify Dashboard, bạn có thể chèn mã client vào dự án chỉ với một cú nhấp chuột.
Có một nhược điểm khi sử dụng Netlify Functions cùng dịch vụ thứ 3. Yêu cầu từ client trước tiên đi đến Netlify Backend (Functions) sau đó đến dịch vụ thứ 3 (ví dụ: Spotify). Hành trình này làm tăng độ trễ đáng kể nếu các dịch vụ và người dùng cuối không ở cùng vị trí địa lý.
Nếu chúng ta có thể cache dữ liệu từ Netlify functions thì có thể giảm thiểu độ trễ. Cơ sở dữ liệu Redis Toàn cầu Upstash có thể là giải pháp tốt để cache các lời gọi API Netlify. Nhờ sao chép đa vùng của Upstash Redis, phản hồi API có thể được cache/sao chép toàn cầu.
Hãy tạo một ứng dụng Spotify đơn giản gọi Spotify API và cache các lời gọi API trong Upstash Global Redis.
Triển khai Next JS Starter App qua Netlify Console. Đây là ứng dụng Next.js đơn giản có thể triển khai bằng vài cú nhấp chuột. Bạn có thể xem các tùy chọn khác để triển khai Next JS Starter App.
Sau các bước triển khai, clone repository mẫu về local và chạy netlify dev. Sẽ hoạt động trên localhost:8888. Có thể cần chạy netlify login nếu lần đầu thiết lập.
Cấu hình tích hợp Netlify Graph-Spotify API:
Netlify Console → Sample App → Graph → Connect API or Service → Spotify
Trong trang cấu hình Spotify, bật Authentication và Graph Explorer, nó sẽ xác thực với Spotify cho tích hợp API.
Bây giờ có thể dùng GraphQL Playground. Nhấn nút Start querying Spotify. Chạy netlify-cli với lệnh sau trong thư mục dự án:
netlify dev --graphSau khi CLI hoàn tất, kiểm tra phần Netlify Graph, bạn sẽ thấy phiên hoạt động. Nhấp vào phiên, nó sẽ mở môi trường playground cho GraphQL API.
Playground này tuyệt vời. Rất hữu ích để tạo truy vấn GraphQL cụ thể. Tôi nhanh chóng tạo truy vấn Spotify trả về Featured Playlists:
query SpotifyFeatured {
spotify {
featuredPlaylists {
name
images { url }
description
}
}
}Sau khi xây dựng truy vấn, hãy tạo mã và chèn vào dự án.
Nhấp Actions → Generate Handler
netlify-cli sẽ tự động tạo file SpotifyFeatured.js trong thư mục api và SpotifyFeaturedForm.jsx trong thư mục pages.
SpotifyFeatured.js: Định nghĩa Netlify function lấy dữ liệu từ Netlify Backend → Spotify APISpotifyFeaturedForm.jsx: Component React là form ví dụ gọi Netlify Function và trả về phản hồi.
Tôi chỉ chỉnh sửa phần HTML/CSS của component này để có trải nghiệm UI tốt hơn. Sẽ chia sẻ mã ở cuối bài.
Thêm component SpotifyFeaturedForm.jsx vào index.js:
import Spotify from './SpotifyFeaturedForm'
// ...
<Spotify title="Spotify Featured Playlist"/>Bây giờ có nút trên trang chính và có thể lấy phản hồi từ Spotify API. Hãy cache các phản hồi.
Tạo Cơ sở dữ liệu Toàn cầu Upstash từ Upstash Console
Sửa code Netlify Function tự động tạo (SpotifyFeatured.js). Trong code có đoạn lấy dữ liệu từ Netlify Backend/Spotify API:
const { errors, data } = await NetlifyGraph.fetchSpotifyFeatured({}, {accessToken: accessToken});Trước tiên kiểm tra Redis cache, nếu không tồn tại thì gọi dịch vụ thứ 3.
Để giao tiếp với Redis, tôi dùng Thư viện Upstash Redis JS. Lấy thông tin REST Credentials từ trang chi tiết database.
Thay thế UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_PASSWORD trong đoạn code:
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 });Trong code trên, đầu tiên kiểm tra cache có tồn tại trong Upstash Redis. Nếu có thì dùng cache, ngược lại lấy từ API gốc và lưu cache vào Upstash. Đoạn code rất đơn giản và có thể cải tiến theo mục đích.
Vậy là chúng ta đã thêm hành vi cache toàn cầu cho tính năng Netlify Graph chỉ với vài dòng code.
Kết luận
Tính năng Netlify Graph sẽ giúp các nhà phát triển dễ dàng tích hợp dịch vụ API thứ 3 vào mã của họ. GraphQL explorer và chèn mã của Netlify giúp rất nhiều.
Mặt khác, nếu bạn muốn cache các phản hồi API thì Cơ sở dữ liệu Toàn cầu Upstash là giải pháp cho việc cache phản hồi. Tạo cơ sở dữ liệu Upstash Redis chỉ cần vài cú nhấp chuột.
Đây là mã mới nhất của ứng dụng ví dụ