Skip to main content

​
Basic Usage

Get all configurations as a reactive object: 
import { useAllConfigs } from '@grainql/analytics-web/react';

function ConfigDashboard() {
  const { configs } = useAllConfigs();
  
  return (
    <div>
      {Object.entries(configs).map(([key, value]) => (
        <div key={key}>
          <strong>{key}:</strong> {value}
        </div>
      ))}
    </div>
  );
}
Perfect for when you need multiple configurations or want to iterate over all of them.

​
Return Values

const { configs, isRefreshing, error, refresh } = useAllConfigs();
configs: Object with all configuration key-value pairs isRefreshing: True while fetching fresh data error: Error object if fetch failed refresh: Function to manually refresh all configs

​
When to Use

Use useAllConfigs when you:
  • Need multiple configuration values
  • Want to build a configuration dashboard
  • Need to apply styles from multiple configs
  • Want to iterate over all available configs
Use useConfig when you:
  • Only need one or two specific values
  • Want to minimize re-renders (only updates when specific config changes)

​
Styling Example

Apply multiple configs for styling: 
function ThemedButton() {
  const { configs } = useAllConfigs();
  
  const styles = {
    backgroundColor: configs.button_bg_color || '#007bff',
    color: configs.button_text_color || 'white',
    borderRadius: configs.button_radius || '4px',
    fontSize: configs.button_font_size || '16px'
  };
  
  return (
    <button style={styles}>
      {configs.button_text || 'Click Me'}
    </button>
  );
}

​
Cache-First Loading

Like useConfig, this hook uses cache-first strategy: 
function Component() {
  const { configs, isRefreshing } = useAllConfigs();
  
  return (
    <div>
      <h1>{configs.hero_text || 'Welcome'}</h1>
      {isRefreshing && <span>Checking for updates...</span>}
    </div>
  );
}
Renders immediately with cached values, then refreshes in background.

​
Manual Refresh

Force refresh all configurations: 
function ConfigPanel() {
  const { configs, refresh } = useAllConfigs();
  
  return (
    <div>
      <button onClick={refresh}>Refresh All</button>
      <pre>{JSON.stringify(configs, null, 2)}</pre>
    </div>
  );
}

​
With Personalization

Pass properties to get personalized configuration set: 
function PersonalizedApp() {
  const { user } = useAuth();
  
  const { configs } = useAllConfigs({
    properties: {
      plan: user.plan,
      location: user.location
    }
  });
  
  return <div>Hero: {configs.hero_text}</div>;
}
All returned configurations are evaluated based on these properties.

​
Error Handling

Handle errors gracefully: 
function Component() {
  const { configs, error } = useAllConfigs();
  
  if (error) {
    return (
      <div>
        <p>Failed to load configurations</p>
        <p>Using defaults...</p>
      </div>
    );
  }
  
  return <div>{configs.hero_text}</div>;
}
Even if fetch fails, configs still contains cached/default values.

​
Configuration Dashboard Example

Build a dashboard to view all configs: 
function ConfigDashboard() {
  const { configs, isRefreshing, refresh } = useAllConfigs();
  
  return (
    <div>
      <h2>Current Configurations</h2>
      <button onClick={refresh} disabled={isRefreshing}>
        {isRefreshing ? 'Refreshing...' : 'Refresh'}
      </button>
      
      <table>
        <thead>
          <tr>
            <th>Key</th>
            <th>Value</th>
          </tr>
        </thead>
        <tbody>
          {Object.entries(configs).map(([key, value]) => (
            <tr key={key}>
              <td>{key}</td>
              <td>{value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

​
Multi-Config Form

Use configs to control a form: 
function DynamicForm() {
  const { configs } = useAllConfigs();
  
  const formConfig = {
    title: configs.form_title || 'Contact Us',
    submitText: configs.form_submit || 'Submit',
    showPhone: configs.form_show_phone === 'true',
    showAddress: configs.form_show_address === 'true'
  };
  
  return (
    <form>
      <h2>{formConfig.title}</h2>
      <input type="email" placeholder="Email" />
      {formConfig.showPhone && <input type="tel" placeholder="Phone" />}
      {formConfig.showAddress && <input type="text" placeholder="Address" />}
      <button type="submit">{formConfig.submitText}</button>
    </form>
  );
}

​
Performance Consideration

useAllConfigs causes re-renders when ANY configuration changes. If you only need specific values, use useConfig instead for better performance: 
// ✅ Better: Only re-renders when hero_text changes
function Hero() {
  const { value: heroText } = useConfig('hero_text');
  return <h1>{heroText}</h1>;
}

// ⚠️ Less optimal: Re-renders when any config changes
function Hero() {
  const { configs } = useAllConfigs();
  return <h1>{configs.hero_text}</h1>;
}

​
Comparing to useConfig

FeatureuseAllConfigsuseConfig
ReturnsAll configsSingle config
Re-rendersAny config changeSpecific config change
Use forMultiple values, iterationSingle or few values
PerformanceBroader re-rendersOptimized re-renders
Both are valid. Choose based on your needs.

​
Next Steps

useConfig

Get single configuration values

Remote Config

Learn about remote configuration

Personalization Guide

Build personalized experiences