useAllConfigs

useAllConfigs() returns every configuration value as a Record<string, string>. The first render shows the cached values or the defaults. The hook then fetches the current values and re-renders when any value changes. Read Remote configuration.

import { useAllConfigs } from '@grainql/analytics-web/react';

function ConfigList() {
  const { configs } = useAllConfigs();

  return (
    <ul>
      {Object.entries(configs).map(([key, value]) => (
        <li key={key}>
          {key}: {value}
        </li>
      ))}
    </ul>
  );
}

Signature

function useAllConfigs(options?: UseAllConfigsOptions): UseAllConfigsResult;

Options

Option	Type	Rule
`forceRefresh`	`boolean`	Optional. When `true`, the fetch skips the cache and reads from the API.
`immediateKeys`	`string[]`	Optional. The keys that the API returns at once. Default is `[]`.
`properties`	`Record<string, string>`	Optional. Properties that the dashboard rules evaluate. Read Personalization.

Result

Field	Type	Meaning
`configs`	`Record<string, string>`	Every configuration value by key.
`isRefreshing`	`boolean`	`true` while a fetch is in progress.
`error`	`Error \| null`	The error of the last fetch. `null` at the start of each fetch.
`refresh`	`() => Promise<void>`	Runs the fetch again with the same options.

Cache-first behavior

On the first render, the hook reads client.getAllConfigs(). The result comes from the cache and from defaultConfigurations. There is no loading state.
After mount, the hook calls client.fetchConfig with the options and replaces configs with the response.
The hook subscribes to the configuration change listener of the client. Any change to any key replaces configs and re-renders the component.
When the fetch fails, error holds the failure and configs keeps the cached or default values.

The hook fetches again when forceRefresh, immediateKeys, or properties change.

Define properties and immediateKeys outside the component or memoize them with useMemo. The hook compares them by reference. An object literal in the render body is a new object on every render, so the hook fetches on every render.

useAllConfigs or useConfig

	`useAllConfigs`	`useConfig`
Returns	Every value	One value
Re-renders when	Any key changes	Its own key changes
Use for	Many keys in one component, or iteration over all keys	One key, or a few keys

Read useConfig.

Several values in one component

function ThemedButton() {
  const { configs } = useAllConfigs();

  return (
    <button
      style={{
        backgroundColor: configs.button_bg_color ?? '#007bff',
        color: configs.button_text_color ?? 'white',
      }}
    >
      {configs.button_text ?? 'Continue'}
    </button>
  );
}

Refresh and errors

function ConfigPanel() {
  const { configs, isRefreshing, error, refresh } = useAllConfigs();

  return (
    <div>
      <button onClick={refresh} disabled={isRefreshing}>
        {isRefreshing ? 'Refreshing' : 'Refresh'}
      </button>
      {error && <p>Configuration fetch failed. The last known values are shown.</p>}
      <pre>{JSON.stringify(configs, null, 2)}</pre>
    </div>
  );
}

Start here

Install without code

Install with code

Track events

Dashboard

Remote configuration

Guides

React

Advanced

Signature

Options

Result

Cache-first behavior

useAllConfigs or useConfig

Several values in one component

Refresh and errors

​Signature

​Options

​Result

​Cache-first behavior

​useAllConfigs or useConfig

​Several values in one component

​Refresh and errors

Signature

Options

Result

Cache-first behavior

useAllConfigs or useConfig

Several values in one component

Refresh and errors