Skip to main content

Optimization Changes

We have made some UX improvements to HAPI Elements with version 2.8. We have added a cache object to some of the state modules we have like contract and product. The cache ensures that the data is not refetched from HAPI Backend on subsequent calls thus ensures faster load times of the page for the end user.


For example, when user fills in the posting requirements for a contract channel and they proceed to the order-review step, the form for posting requirements would reload inside an accordion and make a request to HAPI Backend to get the array of posting requirements and options for select fields again. For channels that have lots of posting requirements (a few totalling 5MBs of data or more) and options of posting requirement select fields (some totalling thousands of options), there will be a huge increase in UX where the end user sees the form much quickly.


For this change we have introduced the following sub-state submodules:

These sub-state submodules work the same way as our regular State submodules and are shown in the Playground exactly the same as State submodules but as State Cache.


The only difference from regular state variables is that you access them with moduleName.state.cache.variable with .cache added after .state instead of moduleName.state.variable. State Cache variables also have .value getter and .onChange() callback listener and can be set directly as moduleName.state.cache.variable = VALUE


An example of how you can utilize a variable in the cache:

Loading...


Additions​

State Cache Variables​

  • window.hapi.contract.state.cache.postingRequirementOptionsMap A Javascript Map that caches posting requirement options with the key corresponding to the parameters passed to function window.hapi.contract.service.getContractPostingRequirementOptionsFromCacheOrAPI so that if the function is invoked with the same set of arguments and the cache has a value, the data from the cache is returned

  • window.hapi.product.state.cache.productsSupportingContractsMap A Javascript Map that caches the channel data of a contract that has the posting_requirements array with key corresponding to the parameters passed to function window.hapi.product.service.getProductSupportingContractsFromCacheOrAPI so that if the function is invoked with the same set of arguments and the cache has a value, the data from the cache is returned

    • Type can be found as ProductProductsSupportingContractsMap in the product types.ts
info

Key of both Maps is a stringified JSON of the arguments passed to the service functions. For example:


window.hapi.product.state.cache.productsSupportingContractsMap.value.get(KEY HERE) is stringified json of an array consisting of the arguments passed to the function window.hapi.product.service.getProductSupportingContractsFromCacheOrAPI with type ProductServiceGetProductSupportingContractsFromCacheOrAPIHandler in product service.types.ts and the actual type can be found in product types.ts as ProductProductsSupportingContractsPayload

const mapKey = JSON.stringify([productChannelId])

Service Functions​

  • window.hapi.contract.service.getContractPostingRequirementOptionsFromCacheOrAPI A function that uses window.hapi.contract.service.getContractPostingRequirementOptions under the hood but sets the cache the first time it is called then returns data from cache on subsequent calls if the arguments of the function are the same
    • The arguments of the function are stringified in exact order they are passed to the function and set as the key of the Map when setting the value returned by the backend so that if function is invoked with same set of arguments and the cache has a value, the data from the cache is returned
    • Type can be found as ContractServiceGetContractPostingRequirementOptionsFromCacheOrAPIHandler in contract service.types.ts
  • window.hapi.product.service.getProductSupportingContractsFromCacheOrAPI A function that uses window.hapi.product.api.getProductSupportingContracts under the hood and sets the cache the first time it is called then returns data from cache on subsequent calls if the arguments of the function are the same
    • The arguments of the function are stringified in exact order they are passed to the function and set as the key of the Map when setting the value returned by the backend so that if function is invoked with same set of arguments and the cache has a value, the data from the cache is returned
    • Type can be found as ProductServiceGetProductSupportingContractsFromCacheOrAPIHandler in product service.types.ts