GlobalDataResolver

globalDataResolver is designed to handle API calls required during the initial loading of the application. This function is executed by theme engine only once and it gets the applicationID and the fpi instance as arguments- and performs asynchronous calls to fetch essential data. The function calling is managed by the Skyfire Theme Engine; theme developers just need to define the function.

Example:

//helper/lib

export async function globalDataResolver({ fpi,applicationID  }) {
    return Promise.all([
        fpi.configuration.fetchApplication(),
        fpi.content.fetchLandingPage(),
        fpi.content.fetchAppSeo(),
        fpi.content?.fetchTags(),
        fpi.auth?.fetchPlatformData({id:applicationID}),
    ]).catch(console.log);

}

// Export it from index.jsx file

import { globalDataResolver } from "./helper/lib";

 return {
    globalDataResolver
    
    //other keys....
 }

Full argument reference

The example above destructures two keys, but the theme engine passes more. During server-side rendering the engine calls globalDataResolver with one object:

Key	Type	Contents
fpi	object	The Fynd Platform Interface instance
themeId	string	The identifier of the applied theme
applicationID	string	The identifier of the sales channel
cookies	object	themeCookie, userGroups, userAppLocationDetails, userStatus, and any extra cookies the platform is configured to forward
headers	object	userData, userStatus, userAgent, storeData, userGroups, experimentalFeatures, and any extra headers the platform is configured to forward
query	object	isEdit, previewId, navigationPreviewId

Read Request Context for what each value means and which outbound header carries it.

The client call is smaller

The engine calls globalDataResolver in the browser only when the page was not server-rendered. A page that arrives through server-side rendering does not call it again after hydration.

When the browser does call it, the object is much smaller:

{
  fpi,
  applicationID,
  cookies: {
    themeCookie,
    userAppLocationDetails,
  },
}

There is no themeId, no headers, and no query. Guard every read, and never assume a key is present:

export async function globalDataResolver({ fpi, applicationID, headers = {}, query = {} }) {
  const { userAgent } = headers; // undefined in the browser
}

Returning cookies

A resolver may return a cookies array. During server-side rendering the engine collects the arrays from both resolvers and sets them on the response.

export async function globalDataResolver({ fpi }) {
  await Promise.all([fpi.configuration.fetchApplication()]);

  return {
    cookies: [{ name: "theme_variant", value: "dark", options: { path: "/" } }],
  };
}

A return value is optional. A resolver that returns nothing is valid.