API Gateway — Route Management & Function Binding

The API Gateway maps HTTP routes to your serverless functions. Define a base path, add routes for each HTTP method, and bind each route to a function.

// Build a User CRUD API (Step-by-Step)

Create these 4 functions, then create an API with base path /users and bind each route.

1. list-users → GET /

list-users.jstypescript
export const handler = async (event) => {
  // In production, query your database via a db-pool layer
  const users = [
    { id: 1, name: "Alice Johnson", email: "alice@example.com", role: "admin" },
    { id: 2, name: "Bob Smith", email: "bob@example.com", role: "developer" },
    { id: 3, name: "Carol White", email: "carol@example.com", role: "viewer" },
  ];

  const page = parseInt(event.queryStringParameters?.page || '1');
  const limit = parseInt(event.queryStringParameters?.limit || '10');
  const start = (page - 1) * limit;

  return {
    statusCode: 200,
    body: {
      users: users.slice(start, start + limit),
      total: users.length,
      page,
      limit
    }
  };
};

2. create-user → POST /

create-user.jstypescript
export const handler = async (event) => {
  const { name, email, role } = event.body;

  if (!name || !email) {
    return { statusCode: 400, body: { error: "name and email are required" } };
  }

  // Validate email format
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return { statusCode: 400, body: { error: "Invalid email format" } };
  }

  const newUser = {
    id: Date.now(),
    name,
    email,
    role: role || "viewer",
    created_at: new Date().toISOString()
  };

  return { statusCode: 201, body: newUser };
};

3. get-user → GET /:id

get-user.jstypescript
export const handler = async (event) => {
  const id = event.pathParameters?.id;
  if (!id) {
    return { statusCode: 400, body: { error: "Missing user ID" } };
  }

  // Simulated DB lookup
  const user = {
    id: parseInt(id),
    name: "Alice Johnson",
    email: "alice@example.com",
    role: "admin",
    created_at: "2024-01-15T10:30:00Z",
    last_login: "2024-06-01T14:22:00Z"
  };

  return { statusCode: 200, body: user };
};

4. delete-user → DELETE /:id

delete-user.jstypescript
export const handler = async (event) => {
  const id = event.pathParameters?.id;
  if (!id) {
    return { statusCode: 400, body: { error: "Missing user ID" } };
  }

  // In production: DELETE FROM users WHERE id = $1
  return {
    statusCode: 200,
    body: { deleted: true, id: parseInt(id) }
  };
};

// Route Configuration

Create the API with this route layout in the dashboard:

api-config.jsonjson
{
  "name": "User Management API",
  "basePath": "/users",
  "routes": [
    { "method": "GET",    "path": "/",    "function": "list-users" },
    { "method": "POST",   "path": "/",    "function": "create-user" },
    { "method": "GET",    "path": "/:id", "function": "get-user" },
    { "method": "DELETE", "path": "/:id", "function": "delete-user" }
  ]
}

// Test with curl

terminalbash
# List users with pagination
curl "https://moqapi.dev/api/invoke/fn/<api-id>/users?page=1&limit=10"

# Create a user
curl -X POST https://moqapi.dev/api/invoke/fn/<api-id>/users \
  -H "Content-Type: application/json" \
  -d '{"name": "Dave Wilson", "email": "dave@example.com", "role": "developer"}'

# Get a specific user
curl https://moqapi.dev/api/invoke/fn/<api-id>/users/42

# Delete a user
curl -X DELETE https://moqapi.dev/api/invoke/fn/<api-id>/users/42

// Frontend Integration (React)

use-api.tsxtypescript
// React hook to consume your moqapi API
const API_BASE = 'https://moqapi.dev/api/invoke/fn/<api-id>/users';

async function listUsers(page = 1) {
  const res = await fetch(API_BASE + '?page=' + page);
  return res.json();
}

async function createUser(data) {
  const res = await fetch(API_BASE, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });
  return res.json();
}

// Usage in React
function UsersPage() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    listUsers().then(data => setUsers(data.users));
  }, []);

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name} - {u.email}</li>)}
    </ul>
  );
}

// Management API Reference

GET/api/apisList all APIs
POST/api/apisCreate an API
POST/api/apis/:id/routesAdd route to API