Giới thiệu
Trong bài viết trước của chuỗi bài này, chúng ta đã thiết lập xác thực với Supabase trong một ứng dụng React + TypeScript. Chúng ta đã đề cập đến quy trình đăng ký, đăng nhập và đăng xuất với phong cách thiết kế từ Tailwind CSS.
Trong bài viết này, chúng ta sẽ đi xa hơn và khám phá cách viết API tùy chỉnh bằng Supabase Edge Functions và tiêu thụ chúng trong React. Đây là lúc Supabase phát huy sức mạnh, vì bạn không chỉ bị giới hạn ở xác thực và cơ sở dữ liệu, mà bạn có thể mở rộng nó giống như một backend truyền thống.
Mục lục
- Edge Functions là gì?
- Bước 1: Cài đặt Supabase CLI
- Bước 2: Tạo một Edge Function
- Bước 3: Gọi Function từ React
- Bước 4: Bảo mật Edge Functions
- Trường hợp sử dụng trong thực tế
- Kết luận
- Câu hỏi thường gặp
Edge Functions là gì?
Supabase Edge Functions là các hàm không máy chủ được cung cấp bởi Deno, chạy ở rìa mạng, gần người dùng cuối, để xử lý các yêu cầu API, cá nhân hóa nội dung, hoặc xử lý logic động với độ trễ tối thiểu.
- Nhanh chóng: được triển khai toàn cầu đến rìa.
- Bảo mật: chạy với quyền truy cập dựa trên vai trò và khóa API.
- Linh hoạt: bạn có thể xử lý logic kinh doanh, API bên ngoài, webhook, hoặc thậm chí biến đổi dữ liệu trước khi nó đến frontend.
Bước 1: Cài đặt Supabase CLI
Đầu tiên, hãy cài đặt Supabase CLI nếu bạn chưa có:
npm install supabase --save-devĐăng nhập vào tài khoản Supabase của bạn:
npx supabase loginVà liên kết dự án của bạn:
npx supabase link --project-ref your-project-refBước 2: Tạo một Edge Function
Ở đây, chúng ta sẽ viết một API cơ bản để lấy danh sách tất cả người dùng. Hãy bắt đầu nào!
Tạo một hàm có tên là get-all-users:
npx supabase functions new get-all-usersĐiều này sẽ tạo ra một file functions/get-all-users/index.ts. Mở nó ra và thêm:
typescript
import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2";
// Trợ giúp header CORS
function getCorsHeaders(origin: string) {
return {
"Access-Control-Allow-Origin": origin,
"Access-Control-Allow-Methods": "GET, POST, OPTIONS",
"Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};
}
// Khởi tạo client Supabase với các biến môi trường
const supabase = createClient(
Deno.env.get("SUPABASE_URL") ?? "",
Deno.env.get("SUPABASE_ANON_KEY") ?? ""
);
serve(async (req) => {
const origin = req.headers.get("origin") || "*";
// Xử lý preflight CORS
if (req.method === "OPTIONS") {
return new Response(null, {
status: 204,
headers: getCorsHeaders(origin),
});
}
try {
// Lấy userId từ query params (ví dụ: /?userId=123)
const url = new URL(req.url);
const userId = url.searchParams.get("userId");
if (!userId) {
return new Response(JSON.stringify({ error: "Thiếu userId" }), {
status: 400,
headers: getCorsHeaders(origin),
});
}
// Truy vấn Supabase để lấy danh sách tất cả người dùng
const { data, error } = await supabase
.from("users")
.select("*")
.eq("auth_user_id", userId);
if (error) throw error;
return new Response(JSON.stringify(data), {
headers: {
"Content-Type": "application/json",
...getCorsHeaders(origin),
},
});
} catch (err) {
return new Response(JSON.stringify({ error: String(err.message) }), {
status: 500,
headers: getCorsHeaders(origin),
});
}
});Triển khai nó:
npx supabase functions deploy get-all-usersBước 3: Gọi Function từ React
Trong ứng dụng React của bạn, bạn có thể gọi hàm này bằng cách sử dụng client Supabase:
typescript
import { supabase } from "./supabaseClient";
export const getAllUsers = async () => {
const { data, error } = await supabase.functions.invoke("get-all-users");
if (error) {
console.error("Lỗi khi gọi get-all-users:", error);
return null;
}
return data;
};Và sử dụng nó trong component của bạn:
typescript
import React, { useEffect, useState } from "react";
import { getAllUsers } from "../api/users";
interface User {
id: string;
full_name: string;
email: string;
dob?: string;
profession?: string;
}
const Users: React.FC = () => {
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
const fetchAllUsers = async () => {
const data = await getAllUsers();
if (data) setUsers(data);
};
fetchAllUsers();
}, []);
return (
<div className="overflow-x-auto rounded-lg shadow-md border border-gray-200">
<table className="min-w-full border-collapse bg-white text-sm">
<thead>
<tr className="bg-gray-100 text-left">
<th className="px-4 py-2 border-b">Tên</th>
<th className="px-4 py-2 border-b">Email</th>
<th className="px-4 py-2 border-b">Ngày sinh</th>
<th className="px-4 py-2 border-b">Nghề nghiệp</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr
key={user.id}
className="hover:bg-gray-50 transition-colors duration-150"
>
<td className="px-4 py-2 border-b">{user.full_name}</td>
<td className="px-4 py-2 border-b">{user.email}</td>
<td className="px-4 py-2 border-b">{user.dob || "N/A"}</td>
<td className="px-4 py-2 border-b">{user.profession || "N/A"}</td>
</tr>
))}
</tbody>
</table>
</div>
);
};
export default Users;Bước 4: Bảo mật Edge Functions
Theo mặc định, các hàm được bảo mật và yêu cầu một token của vai trò dịch vụ hoặc người dùng đã xác thực.
Bạn có thể làm cho một hàm công khai bằng cách thêm điều này vào supabase/config.toml:
[functions.get-all-users]
verify_jwt = falseSau đó triển khai lại:
npx supabase functions deploy get-all-usersTrường hợp sử dụng trong thực tế
Edge Functions rất tuyệt vời cho:
- Gửi email giao dịch (ví dụ: SendGrid, Resend).
- Tích hợp API bên thứ ba một cách bảo mật.
- Chạy các tác vụ cron hoặc tác vụ theo lịch.
- Biến đổi dữ liệu tùy chỉnh trước khi lưu vào PostgreSQL.
Kết luận
Trong bài viết này, chúng ta đã học cách:
- Tạo và triển khai một Supabase Edge Function.
- Gọi nó từ một ứng dụng React + TypeScript.
- Bảo mật hoặc phơi bày nó tùy theo trường hợp sử dụng của bạn.
Edge Functions mang lại cho dự án Supabase của bạn sự linh hoạt của một backend hoàn chỉnh, đồng thời giữ được sự đơn giản của BaaS.
Trong bài tiếp theo, chúng ta sẽ khám phá Realtime Channels để xây dựng thông báo và cập nhật trực tiếp.
Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó với bạn bè lập trình viên của bạn!
Câu hỏi thường gặp
1. Edge Functions có thể sử dụng cho những trường hợp nào?
Edge Functions có thể được sử dụng cho nhiều tình huống, bao gồm gửi email, tích hợp API và chạy các tác vụ theo lịch.
2. Làm thế nào để bảo mật Edge Functions?
Bạn có thể bảo mật các Edge Functions bằng cách yêu cầu token xác thực từ người dùng hoặc vai trò dịch vụ.
3. Có thể gọi nhiều Edge Functions từ một ứng dụng không?
Có, bạn có thể gọi nhiều Edge Functions từ ứng dụng React của mình tùy theo nhu cầu của bạn.
