Working with Forms

This guide covers how to work with forms using Flowfull Clients.

BridgeForm Component

The BridgeForm component provides automatic form handling with validation and submission:

import { BridgeForm } from '@pubflow/react'; // or @pubflow/react-native

function CreateUserForm() {
  return (
    <BridgeForm
      endpoint="/api/users"
      method="POST"
      onSuccess={(data) => {
        console.log('User created:', data);
        // Navigate to user detail page
      }}
      onError={(error) => {
        console.error('Error:', error);
      }}
    >
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
      <button type="submit">Create User</button>
    </BridgeForm>
  );
}

Manual Form Handling

For more control, use useBridgeMutation directly:

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

function CreateUserForm() {
  const userService = useBridgeApi({ endpoint: 'users' });
  const { mutate: createUser, isLoading, error } = useBridgeMutation(
    userService,
    'create'
  );
  
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: ''
  });
  
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    
    const result = await createUser(
      { data: formData },
      {
        onSuccess: (data) => {
          console.log('User created:', data);
          // Reset form
          setFormData({ name: '', email: '', password: '' });
        }
      }
    );
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Name"
        required
      />
      <input
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        type="email"
        placeholder="Email"
        required
      />
      <input
        value={formData.password}
        onChange={(e) => setFormData({ ...formData, password: e.target.value })}
        type="password"
        placeholder="Password"
        required
      />
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Creating...' : 'Create User'}
      </button>
      {error && <div>Error: {error.message}</div>}
    </form>
  );
}

Update Forms

import { useEffect, useState } from 'react';
import { useBridgeApi, useBridgeQuery, useBridgeMutation } from '@pubflow/react';

function EditUserForm({ userId }: { userId: string }) {
  const userService = useBridgeApi({ endpoint: 'users' });
  
  // Fetch user data
  const { data: user, isLoading: isLoadingUser } = useBridgeQuery(
    userService,
    'get',
    { id: userId }
  );
  
  // Update mutation
  const { mutate: updateUser, isLoading: isUpdating } = useBridgeMutation(
    userService,
    'update'
  );
  
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });
  
  // Update form when user data is loaded
  useEffect(() => {
    if (user) {
      setFormData({
        name: user.name,
        email: user.email
      });
    }
  }, [user]);
  
  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    
    await updateUser(
      { id: userId, data: formData },
      {
        onSuccess: () => {
          console.log('User updated');
        }
      }
    );
  }
  
  if (isLoadingUser) return <div>Loading...</div>;
  
  return (
    <form onSubmit={handleSubmit}>
      <input
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        placeholder="Name"
      />
      <input
        value={formData.email}
        onChange={(e) => setFormData({ ...formData, email: e.target.value })}
        type="email"
        placeholder="Email"
      />
      <button type="submit" disabled={isUpdating}>
        {isUpdating ? 'Updating...' : 'Update User'}
      </button>
    </form>
  );
}

Next Steps

• Data Fetching - Learn about data fetching patterns
• API Reference - Complete components reference