Supabase và GraphQL: Tích hợp hoàn hảo cho API hiện đại

import { serve } from "https://deno.land/[email protected]/http/server.ts";
import { graphql } from "https://deno.land/x/graphql/graphql.ts";

const typeDefs = `
  type Query {
    hello: String!
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello, GraphQL on Supabase Edge!",
  },
};

const schema = graphql.compileSchema(typeDefs, resolvers);

serve(async (req) => {
  if (req.method === "POST" && req.url.pathname === "/graphql") {
    const body = await req.json();
    const result = graphql.graphql(schema, body.query, body.variables);
    return new Response(JSON.stringify(result), {
      headers: { "Content-Type": "application/json" },
    });
  }
});

npx postgraphile -c postgres://postgres:password@host:5432/dbname

hasura migrate apply --endpoint http://localhost:8080

Ưu điểm:
– GraphQL API production-ready.
– Hỗ trợ subscription, relationships, custom resolvers.
– Dashboard quản lý schema trực quan.

Nhược điểm:
– Cần maintain thêm một service.
– Có thể phát sinh chi phí nếu scale lớn.

3. Thực hành: Tạo một GraphQL API đơn giản với Supabase Edge Functions

Giả sử bạn có một bảng users trong Supabase:

CREATE TABLE public.users (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT UNIQUE NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

Bạn muốn tạo GraphQL API để truy vấn danh sách users. Dưới đây là ví dụ đơn giản:

import { serve } from "https://deno.land/[email protected]/http/server.ts";
import { Pool } from "https://deno.land/x/postgres/mod.ts";
import { graphql, int, buildSchema } from "https://deno.land/x/graphql/graphql.ts";

const pool = new Pool(
  Deno.env.get("SUPABASE_DB_URL")!,
  {
    user: Deno.env.get("SUPABASE_DB_USER"),
    password: Deno.env.get("SUPABASE_DB_PASSWORD"),
  },
);

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
    created_at: String!
  }

type Query {
    users: [User!]!
    user(id: ID!): User
  }
`);

const root = {
  users: async () => {
    const client = await pool.connect();
    const result = await client.query("SELECT * FROM users");
    client.release();
    return result.rows;
  },
  user: async ({ id }: { id: string }) => {
    const client = await pool.connect();
    const result = await client.query("SELECT * FROM users WHERE id = $1", id);
    client.release();
    return result.rows[0];
  },
};

serve(async (req) => {
  if (req.method === "POST" && req.url.pathname === "/graphql") {
    const body = await req.json();
    const result = await graphql.execute(schema, body.query, root, null, body.variables);
    return new Response(JSON.stringify(result), {
      headers: { "Content-Type": "application/json" },
    });
  }
});

Lưu ý:
– Bạn cần set environment variables cho Supabase database URL, user, password.
– Nên dùng RLS của Supabase để bảo mật dữ liệu.
– Có thể tích hợp Supabase Auth để xác thực user trước khi truy vấn.

4. Mẹo và best practices

4.1 Bảo mật dữ liệu

– Luôn enable RLS trong Supabase và viết policy rõ ràng.
– Validate input trong resolver để tránh SQL injection.
– Sử dụng Supabase Auth token trong header để xác thực.

4.2 Performance

– Dùng connection pooling khi query PostgreSQL.
– Tránh N+1 query bằng cách batch load hoặc dùng DataLoader.
– Cache response nếu dữ liệu ít thay đổi.

4.3 Development

– Tự động generate schema từ PostgreSQL nếu có thể.
– Dùng GraphQL Playground hoặc Apollo Studio để test API.
– Version control cho schema và migration.

Kết luận: Tương lai của API hiện đại

Việc kết hợp Supabase và GraphQL mang lại một hệ sinh thái API hiện đại, linh hoạt và dễ mở rộng. Dù bạn chọn cách tích hợp nào – Edge Functions, PostGraphile, hay Hasura – điều quan trọng là hiểu rõ nhu cầu dự án và chọn giải pháp phù hợp.

Với sự phát triển không ngừng của cả hai công nghệ, tương lai của API backend sẽ ngày càng trở nên đơn giản, nhanh chóng và mạnh mẽ hơn. Nếu bạn đang xây dựng một ứng dụng mới, đừng ngần ngại thử nghiệm sự kết hợp này – biết đâu nó sẽ trở thành “bộ đôi hoàn hảo” cho dự án của bạn.