useCategory(id?: string)

The useCategory() composable allows for loading and storing category hierarchies.

Be careful about shared state

You should pass a unique ID as a parameter to avoid state conflicts when using multiple instances of this composable. Every instance with the same ID (or those that lack it) will share the same state, even on different pages.

categories

The main data object populated by the load() method.

Type

const categories: ComputedRef<CategoryHierarchy[]>;

References: CategoryHierarchy

loading

Indicates whether any of the composable methods is in progress.

Type

const loading: ComputedRef<boolean>;

error

Contains errors thrown by any of the composable methods.

Type

const error: ComputedRef<UseCategoryError>;

References: UseCategoryError

load()

Fetches a category with a given id and saves it to the categories property as a single-element array. Under the hood, it sends a request to the getCategory API endpoint.

Type

interface LoadCategoryProps extends BaseProps {
  id: string;
}
async function load(props: LoadCategoryProps): Promise<void>;

References: LoadCategoryProps, BaseProps

Example

In the following example, we are loading a category with id equal to 1 and specifying the fields which should be returned with the response. We are also extracting the category from the categories array by using a computed property. Finally, we are exposing the property to the templates by returning it from the setup() method.

import { computed } from '@nuxtjs/composition-api';
import { onSSR } from '@vue-storefront/core';
import { useCategory } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { categories, load: loadCategory } = useCategory('unique-id');
    const category = computed(() => categories.value[0]);
    onSSR(async () => {
      await loadCategory({ id: '1', fields: 'id,name,url' });
    });
    return { category };
  }
};

loadAll()

Fetches all categories defined for the current catalog and saves them to the categories property. Under the hood, it sends a request to the getCatalogVersion API endpoint. The actual categories are extracted from the CatalogVersion response.

Type

type LoadAllCategoriesProps = BaseProps;
async function loadAll(props?: LoadAllCategoriesProps): Promise<void>;

References: LoadAllCategoriesProps, BaseProps

Example

In the following example, we are fetching all categories defined for the current catalog. We are also specifying the fields to be returned in the response. Finally, we are exposing the categories property to the templates by returning it from the setup() method.

import { onSSR } from '@vue-storefront/core';
import { useCategory } from '@vsf-enterprise/sapcc';
export default {
  setup() {
    const { categories, loadAll: loadCategories } = useCategory('unique-id');
    onSSR(async () => {
      await loadCategories({ fields: 'categories(id,name,url)' });
    });
    return { categories };
  }
};

Get your fields right!

Notice that our fields include categories in the example above. It is necessary since loadAll() requests a CatalogVersion to extract categories from it. Hence, the fields property has to match the CatalogVersion interface.