Global Data Resolver

The globalDataResolver handles the API calls needed once, when the application first loads — the same purpose it serves in the hosted Turbo theme. It is plain application code, defined in theme/helper/lib.js, returned alongside the FPI client from theme/index.jsx, and called directly and explicitly by theme/app.jsx before the app renders.

Definition

// theme/helper/lib.js
export async function globalDataResolver({ fpi, applicationID }) {
  const response = await fpi.executeGQL(GLOBAL_DATA);
  // ...fetches header, footer, application configuration, and currency/locale data
}

// theme/index.jsx
const { client } = new FPIClient(fpiOptions);
setupAutoRevalidation(client);

return {
  fpi: client,
  globalDataResolver,
  pageDataResolver,
};

Invocation

// theme/app.jsx
async function bootstrap() {
  const parsedTheme = await safeInitializeTheme({
    applicationID,
    applicationToken,
    storeInitialData,
  });
  const { fpi, globalDataResolver } = parsedTheme;

  attachGlobals({ fpi });
  await globalDataResolver?.({ fpi, applicationID });

  // Render only starts after global data has resolved
  const root = ReactDOM.createRoot(app);
  root.render(
    <ErrorBoundary>
      <HelmetProvider>
        <ReduxProvider store={fpi.store}>
          <FPIProvider value={fpi}>
            <RouterProvider router={routes} />
          </FPIProvider>
        </ReduxProvider>
      </HelmetProvider>
    </ErrorBoundary>,
  );
}

Because globalDataResolver runs entirely in the browser during bootstrap, it delays the first render until it resolves — keep it focused on data every page needs, and avoid adding slow or non-essential calls here.