Shop Connector

hubble PWA Shop Connector

API Client

To fetch data from your e-commerce system, hubble provides you a helper class called ApiClientopen in new window. It sets some default headers, accepts POST request data and handles errors if your shop shouldn't be reachable.


import ApiClient from '@/utils/api-client';

let response = await new ApiClient(this.$config).apiCall({
    action: 'get',
    endpoint: 'store-api/context',
    contextToken: contextToken,


You can configure the api base url and access-key in the .env file.

API_BASE_URL            = 'http://localhost'

Data mapping

To simply fetch data from the api is not enough because our components expect a different data schema. Therefore the reponse data need to be mapped first. Take a look at the Api Client Helperopen in new window you can see the list of mapped entities.


import { mappingProduct } from '@/utils/api-mapping-helper';

const product = mappingProduct(;
Last Updated: