Page Data Resolver

pageDataResolver handles the API calls needed on every route change. The pageDataResolver is plain application code, defined in theme/helper/lib.js file, returned from the theme/index.jsx bootstrap function alongside globalDataResolver, and called directly by a useEffect inside theme/layouts/RootLayout.jsx whenever the current route or location changes.

Example

// theme/helper/lib.js
export async function pageDataResolver({ fpi, router, themeId }) {
  const state = fpi.store.getState();
  const pageValue = getPageSlug(router);

  if (!state?.auth?.user_data?.user_id) {
    // Lightweight auth check so pages can react to login state after navigation
    fpi.executeGQL(USER_DATA_QUERY);
  }
  // ...resolves the CMS page mapped to the current route slug, similar to
  // the hosted theme's fpi.theme.fetchPage(), when the slug has changed
}

Invocation

// theme/layouts/RootLayout.jsx
useEffect(() => {
  if (!fpi || !currentMatch) return;

  const filterQuery = Object.fromEntries(
    new URLSearchParams(location.search).entries(),
  );

  pageDataResolver({
    fpi,
    themeId,
    router: { ...currentMatch, filterQuery },
  });
}, [currentMatch, fpi, location.search, themeId]);

Because this runs client-side on every navigation (not on the server before HTML is generated), design pageDataResolver for data that's cheap to re-fetch on route change — such as the CMS page mapped to the current slug — rather than data specific to a single component, which should be fetched directly inside that component instead (see ServerFetch Function).