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