Flowfull Clients

Appearance

Making API Calls ​

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

Setup ​

First, create a Bridge API service using the useBridgeApi hook:

typescript
import { useBridgeApi } from '@pubflow/react'; // or @pubflow/react-native or @pubflow/nextjs

function MyComponent() {
  const userService = useBridgeApi({
    endpoint: 'users'
  });
  
  // Now you can use userService to make API calls
}

Query Data ​

Use useBridgeQuery to fetch data with automatic caching and revalidation:

List Items ​

typescript
import { useBridgeApi, useBridgeQuery } from '@pubflow/react';

function UserList() {
  const userService = useBridgeApi({ endpoint: 'users' });
  
  const { data, meta, isLoading, error, refetch } = useBridgeQuery(
    userService,
    'list',
    { 
      page: 1, 
      limit: 20,
      orderBy: 'name',
      orderDir: 'asc'
    }
  );
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h1>Users ({meta?.total})</h1>
      <ul>
        {data?.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

Get Single Item ​

typescript
function UserDetail({ userId }: { userId: string }) {
  const userService = useBridgeApi({ endpoint: 'users' });
  
  const { data: user, isLoading, error } = useBridgeQuery(
    userService,
    'get',
    { id: userId }
  );
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h1>{user?.name}</h1>
      <p>Email: {user?.email}</p>
    </div>
  );
}

Search Items ​

typescript
function UserSearch() {
  const [query, setQuery] = useState('');
  const userService = useBridgeApi({ endpoint: 'users' });
  
  const { data, isLoading } = useBridgeQuery(
    userService,
    'search',
    { 
      q: query,
      limit: 10
    }
  );
  
  return (
    <div>
      <input 
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search users..."
      />
      {isLoading ? (
        <div>Searching...</div>
      ) : (
        <ul>
          {data?.map(user => (
            <li key={user.id}>{user.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

Mutate Data ​

Use useBridgeMutation to create, update, or delete data:

Create Item ​

typescript
import { useBridgeApi, useBridgeMutation } from '@pubflow/react';

function CreateUser() {
  const userService = useBridgeApi({ endpoint: 'users' });
  const { mutate: createUser, isLoading, error } = useBridgeMutation(
    userService,
    'create'
  );
  
  async function handleSubmit(formData: any) {
    const result = await createUser(
      { data: formData },
      {
        onSuccess: (data) => {
          console.log('User created:', data);
        },
        onError: (error) => {
          console.error('Error:', error);
        }
      }
    );
  }
  
  return <form onSubmit={handleSubmit}>...</form>;
}

Update Item ​

typescript
function EditUser({ userId }: { userId: string }) {
  const userService = useBridgeApi({ endpoint: 'users' });
  const { mutate: updateUser, isLoading } = useBridgeMutation(
    userService,
    'update'
  );
  
  async function handleUpdate(formData: any) {
    await updateUser(
      { id: userId, data: formData },
      {
        onSuccess: () => {
          console.log('User updated');
        }
      }
    );
  }
  
  return <form onSubmit={handleUpdate}>...</form>;
}

Next Steps ​