Flowfull Clients

Appearance

Multi-Instance Configuration ​

Learn how to configure and use multiple Pubflow instances in your application.

Why Multi-Instance? ​

Multi-instance support allows you to:

  • Connect to multiple backends simultaneously
  • Separate concerns (e.g., main API vs analytics API)
  • Use different authentication for different services
  • Implement microservices architecture

Configuration ​

Basic Setup ​

typescript
import { PubflowProvider } from '@pubflow/react';

function App() {
  return (
    <PubflowProvider
      instances={[
        {
          id: 'main',
          baseUrl: 'https://api.example.com',
          bridgeBasePath: '/bridge',
          authBasePath: '/auth'
        },
        {
          id: 'analytics',
          baseUrl: 'https://analytics.example.com',
          bridgeBasePath: '/data-api',
          authBasePath: '/auth'
        },
        {
          id: 'payments',
          baseUrl: 'https://payments.example.com',
          bridgeBasePath: '/bridge',
          authBasePath: '/auth'
        }
      ]}
      defaultInstance="main"
    >
      <YourApp />
    </PubflowProvider>
  );
}

Single Config (Alternative) ​

typescript
<PubflowProvider
  config={{
    baseUrl: 'https://api.example.com',
    bridgeBasePath: '/bridge'
  }}
>
  <YourApp />
</PubflowProvider>

Using Multiple Instances ​

With Hooks ​

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

function Dashboard() {
  // Use main instance (default)
  const { user } = useAuth();
  
  // Use analytics instance
  const { user: analyticsUser } = useAuth('analytics');
  
  // Fetch from main API
  const mainService = useBridgeApi({ endpoint: 'users' });
  const { data: users } = useBridgeQuery(mainService, 'list', { limit: 10 });
  
  // Fetch from analytics API
  const analyticsService = useBridgeApi({ endpoint: 'events' }, 'analytics');
  const { data: events } = useBridgeQuery(analyticsService, 'list', { limit: 10 });
  
  return (
    <div>
      <h1>Main Users: {users?.length}</h1>
      <h1>Analytics Events: {events?.length}</h1>
    </div>
  );
}

With Components ​

typescript
import { BridgeView } from '@pubflow/react';

function AdminPanel() {
  return (
    <>
      {/* Check auth on main instance */}
      <BridgeView allowedTypes={['admin']}>
        <MainAdminContent />
      </BridgeView>
      
      {/* Check auth on analytics instance */}
      <BridgeView allowedTypes={['analyst']} instanceId="analytics">
        <AnalyticsContent />
      </BridgeView>
    </>
  );
}

Separate Authentication ​

Each instance can have its own authentication:

typescript
import { useAuth } from '@pubflow/react';

function MultiAuthExample() {
  const { user: mainUser, login: mainLogin } = useAuth();
  const { user: analyticsUser, login: analyticsLogin } = useAuth('analytics');
  
  async function handleMainLogin() {
    await mainLogin({ email: 'user@example.com', password: 'pass' });
  }
  
  async function handleAnalyticsLogin() {
    await analyticsLogin({ email: 'analyst@example.com', password: 'pass' });
  }
  
  return (
    <div>
      <div>
        <h2>Main API</h2>
        {mainUser ? (
          <p>Logged in as {mainUser.name}</p>
        ) : (
          <button onClick={handleMainLogin}>Login to Main</button>
        )}
      </div>
      
      <div>
        <h2>Analytics API</h2>
        {analyticsUser ? (
          <p>Logged in as {analyticsUser.name}</p>
        ) : (
          <button onClick={handleAnalyticsLogin}>Login to Analytics</button>
        )}
      </div>
    </div>
  );
}

Environment Variables ​

Use environment variables for different environments:

typescript
// .env.local
VITE_MAIN_API_URL=https://api.example.com
VITE_ANALYTICS_API_URL=https://analytics.example.com
VITE_PAYMENTS_API_URL=https://payments.example.com
typescript
<PubflowProvider
  instances={[
    {
      id: 'main',
      baseUrl: import.meta.env.VITE_MAIN_API_URL
    },
    {
      id: 'analytics',
      baseUrl: import.meta.env.VITE_ANALYTICS_API_URL
    },
    {
      id: 'payments',
      baseUrl: import.meta.env.VITE_PAYMENTS_API_URL
    }
  ]}
  defaultInstance="main"
>
  <App />
</PubflowProvider>

Real-World Example ​

typescript
// DadosBall game with separate game server and auth server
import { PubflowProvider } from '@pubflow/react-native';

function App() {
  return (
    <PubflowProvider
      instances={[
        {
          id: 'auth',
          baseUrl: process.env.EXPO_PUBLIC_AUTH_URL!,
          bridgeBasePath: '/bridge',
          authBasePath: '/auth'
        },
        {
          id: 'game',
          baseUrl: process.env.EXPO_PUBLIC_GAME_URL!,
          bridgeBasePath: '/api'
        }
      ]}
      defaultInstance="auth"
    >
      <GameApp />
    </PubflowProvider>
  );
}

// Use in components
function GameLobby() {
  const { user } = useAuth('auth'); // Auth from auth server
  const gameService = useBridgeApi({ endpoint: 'games' }, 'game'); // Games from game server
  
  const { data: games } = useBridgeQuery(gameService, 'list', { limit: 10 });
  
  return <div>{/* Game lobby UI */}</div>;
}

Next Steps ​