Vue Storefront Next

# API Client

Installation

If you want to learn how to install the API Client check our Getting Started guide

API Client is a data layer of your eCommerce integration. It provides a friendly abstraction layer over network calls to your eCommerce platform.

It expresses each network request as a declarative method like getProduct or getCategory. By having this additional layer we can hide implementation details of how we get the data which gives you freedom of introducing major changes in this layer without influencing other parts of the app.

API Client by itself is a Vanilla JavaScript application and it doesn't require any frontend framework to run. It's usually not used directly in the UI and is responsible only for providing data to Composition Functions.

# Configuration

storing credentials

Never pass fragile data like API Client secrets as plain strings.

import { setup } from '@vue-storefront/about-you-api'

setup({
  api: {
    host: 'https://boston.backbone-api.demo.aboutyou.cloud/v1/',
    auth: {
      username: 'aboutyou',
      password: 'OmNErAb96Y5Qn75SFhXr'
    },
    shopId: 121
  }
})

setup accepts following properties:

  • api: ApiConfig
export interface ApiConfig {
  host: string;
  auth: {
    username: string;
    password: name;
  };
  shopId: number;
}

# AboutYou tokens handling

AboutYouCloud platform requires tokens to load data from the API. Cart and Wishlist tokens have to be generated on the frontend side and stored to prevent generating them multiple times. The token structure used in the theme is UUID concatenated with timestamp to prevent possible collisions.

An example token generator is stored in packages/about-you/theme/helpers/utils/generateToken.js and is being used in a following way:

import { generateToken } from '~/helpers/utils/generateToken';

const AYC_CART_TOKEN = 'vsf-ayc-cart-token';

export const getCartToken = context => {
  let token = context.$cookies.get(AYC_CART_TOKEN);

  if (token) {
    return token;
  }

  token = generateToken();

  context.$cookies.set(AYC_CART_TOKEN, token);

  return token;
};

# Methods

You can find detailed information about all API Client methods here

← Composables →