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