Flowfull Clients

Appearance

Making API Calls ​

This guide covers how to make API calls to your backend using Flowfull Client.

HTTP Methods ​

Flowfull Client supports all standard HTTP methods:

typescript
import { createFlowfull } from '@pubflow/flowfull-client';

const api = createFlowfull('https://api.example.com');

// GET request
const users = await api.get('/users');

// POST request
const newUser = await api.post('/users', {
  name: 'John Doe',
  email: 'john@example.com'
});

// PUT request (full update)
const updated = await api.put('/users/123', {
  name: 'Jane Doe',
  email: 'jane@example.com'
});

// PATCH request (partial update)
const patched = await api.patch('/users/123', {
  name: 'Jane Smith'
});

// DELETE request
await api.delete('/users/123');

GET Requests ​

Basic GET ​

typescript
const users = await api.get('/users');
console.log(users);

GET with Query Parameters ​

typescript
const users = await api.get('/users', {
  params: {
    page: 1,
    limit: 10,
    status: 'active'
  }
});
// Requests: /users?page=1&limit=10&status=active

GET Single Item ​

typescript
const user = await api.get('/users/123');
console.log(user);

POST Requests ​

Create New Item ​

typescript
const newUser = await api.post('/users', {
  name: 'John Doe',
  email: 'john@example.com',
  role: 'user'
});

console.log('Created user:', newUser);

POST with Form Data ​

typescript
const formData = new FormData();
formData.append('name', 'John Doe');
formData.append('email', 'john@example.com');
formData.append('avatar', fileInput.files[0]);

const user = await api.post('/users', formData);

PUT Requests ​

Full update (replaces entire resource):

typescript
const updated = await api.put('/users/123', {
  name: 'Jane Doe',
  email: 'jane@example.com',
  role: 'admin'
});

PATCH Requests ​

Partial update (updates only specified fields):

typescript
const updated = await api.patch('/users/123', {
  name: 'Jane Smith' // Only update name
});

DELETE Requests ​

typescript
await api.delete('/users/123');
console.log('User deleted');

Query Builder ​

For complex queries, use the query builder:

typescript
const users = await api.query('/users')
  .filter('status', 'active')
  .filter('role', 'admin')
  .orderBy('created_at', 'desc')
  .limit(10)
  .execute();

Filter Operations ​

typescript
// Equal
.filter('status', 'active')

// Not equal
.filter('status', 'ne', 'inactive')

// Greater than
.filter('age', 'gt', 18)

// Less than
.filter('age', 'lt', 65)

// Greater than or equal
.filter('age', 'gte', 18)

// Less than or equal
.filter('age', 'lte', 65)

// Like (contains)
.filter('name', 'like', 'John')

// In array
.filter('role', 'in', ['admin', 'moderator'])

// Not in array
.filter('status', 'nin', ['banned', 'deleted'])

Sorting ​

typescript
// Ascending
.orderBy('name', 'asc')

// Descending
.orderBy('created_at', 'desc')

// Multiple sorts
.orderBy('status', 'asc')
.orderBy('name', 'asc')

Pagination ​

typescript
// Using limit and offset
.limit(10)
.offset(20)

// Using page
.page(3)
.limit(10)

Complete Example ​

typescript
const activeAdmins = await api.query('/users')
  .filter('status', 'active')
  .filter('role', 'admin')
  .filter('age', 'gte', 18)
  .orderBy('created_at', 'desc')
  .limit(20)
  .page(1)
  .execute();

Error Handling ​

typescript
try {
  const users = await api.get('/users');
  console.log(users);
} catch (error: any) {
  if (error.status === 401) {
    console.error('Unauthorized - please login');
  } else if (error.status === 404) {
    console.error('Not found');
  } else if (error.status === 500) {
    console.error('Server error');
  } else {
    console.error('Error:', error.message);
  }
}

Next Steps ​