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 { createApiClient } from '@vue-storefront/commercetools-api'

const { client, api, config } = createApiClient({
  api: {
    uri: 'https://api.commercetools.com/vsf-ct-dev/graphql',
    authHost: 'https://auth.sphere.io',
    projectKey: 'vsf-ct-dev',
    clientId: 'xlea3xo3vcavMN5kmDlFP4nu',
    clientSecret: process.env.CT_CLIENT_SECRET,
    scopes: [
      'create_anonymous_token:vsf-ct-dev',
      'manage_my_orders:vsf-ct-dev',
      'manage_my_profile:vsf-ct-dev',
      'manage_my_shopping_lists:vsf-ct-dev',
      'manage_my_payments:vsf-ct-dev',
      'view_products:vsf-ct-dev',
      'view_published_products:vsf-ct-dev'
    ]
  }
})

createApiClient accepts following properties:

  • api: ApiConfig
export interface ApiConfig {
  uri: string;
  authHost: string;
  projectKey: string;
  clientId: string;
  clientSecret: string;
  scopes: string[];
}
  • customOptions?: ApolloClientOptions<TCacheShape>
  • currency?: string
  • locale?: string
  • languageMap?: object
  • acceptLanguage?: string[]
  • country?: string
  • countries?: LocaleItem[]
export interface LocaleItem {
  name: string;
  label: string;
}
  • currencies?: LocaleItem[]
  • locales?: LocaleItem[]
  • cookies?: CookiesConfig
export interface CookiesConfig {
  currencyCookieName: string;
  countryCookieName: string;
  localeCookieName: string;
}
  • auth?: Auth
export interface Auth {
  onTokenChange?: (token: Token) => void;
  onTokenRead?: () => string;
  onTokenRemove?: () => void;
}

# Localisation

Commercetools supports querying localised fields via an array of accepted languages - acceptLanguage.

acceptLanguage: ['en-gb', 'en-us']

If you supply a languageMap during setup this will be used to map a locale to the accepted languages.

languageMap: {
  'en-gb': ['en-gb', 'en-us'],
  'en-us': ['en-us', 'en-gb'],
}

← Composables →