# useChannel

# Features

useChannel composable can be used to:

  • fetch channels list
  • get places from channels
  • get address string from channel
  • get store times string

# API

  • search - function for fetching channels data. When invoked, it requests data from the API and populates channels property. This method accepts a single params object. The params has the following option:

    • id: string

    • limit?: number

    • offset?: number

    • customQuery?: CustomQuery

      type CustomQuery = {
  channels: string
}

  • change - function for changing channels cookie. When invoked, it changes the Browsers cookie and stores the data into currency object. This method accepts the ChannelId as parameter and returns void.

  • channel: ComputedProperty<string> - reactive data containing the active currency from Cookies or default.

  • channels: ComputedProperty<Channel[]> - reactive data object containing the response from the backend.

    export enum ChannelRole {
  InventorySupply = 'InventorySupply',
  ProductDistribution = 'ProductDistribution',
  OrderExport = 'OrderExport',
  OrderImport = 'OrderImport',
  Primary = 'Primary'
}

export type Channel = Versioned & ReviewTarget & {
  __typename?: 'Channel';
  id: Scalars['String'];
  version: Scalars['Long'];
  key: Scalars['String'];
  roles: Array<ChannelRole>;
  name?: Maybe<Scalars['String']>;
  nameAllLocales?: Maybe<Array<LocalizedString>>;
  description?: Maybe<Scalars['String']>;
  descriptionAllLocales?: Maybe<Array<LocalizedString>>;
  address?: Maybe<Address>;
  geoLocation?: Maybe<GeometryInput>;
  createdAt: Scalars['DateTime'];
  lastModifiedAt: Scalars['DateTime'];
  reviewRatingStatistics?: Maybe<ReviewRatingStatistics>;
  custom?: Maybe<CustomFieldsType>;
  createdBy?: Maybe<Initiator>;
  lastModifiedBy?: Maybe<Initiator>;
};

  • loading: boolean - reactive object containing information about loading state of search method.

  • error: UseChannelErrors - reactive object containing the error message, if search failed for any reason.

    interface UseChannelErrors {
  search: Error;
}

# Getters

  • getChannelAddress - return channel address as string

  • getStoreTimes - return channel time as string

  • getPlacesFromChannels - return array of AgnosticPlace from channels

    interface AgnosticPlace extends Channel {
  addressLine: string;
  openingHours: string;
  storeName: string;
}

interface ChannelGetters {
  getChannelAddress: (channel: Channel) => string;
  getStoreTimes: (channel: Channel) => string | null;
  getPlacesFromChannels: (channels: Channel[]) => Array<AgnosticPlace>;
}

# Example

import { onSSR } from '@vue-storefront/core';
import { useChannel, channelGetters } from '@vsf-enterprise/commercetools';

export default {
  setup() {
    const {
      channels,
      search,
      loading,
      error
    } = useChannel('<CACHE_ID>');

    onSSR(async () => {
      await search();
    });

    return {
      places: computed(() => channelGetters.getPlacesFromChannels(channels.value)),
      loading,
      error
    };
  }
};
← useCategory
useCurrency →