getCategories
Method fetching categories from commercetools.
This method sends a GET request to the getCategory endpoint of the Vue Storefront API Middleware. In turn, it retrieves a list of categories from commercetools by sending a request to its GraphQL API. The default GraphQL query used by this method can be found here.
Signature
export declare function getCategories<Res extends PartialGetCategoriesResponse = GetCategoriesResponse>(
params?: GetCategoriesParams,
options?: MethodOptions<CustomQuery<"categories">>
): Promise<Res>;Parameters
| Name | Required | Type | Description |
|---|---|---|---|
params | Optional | GetCategoriesParams | Parameter object which can be used with this method. Refer to its type definition to learn about possible properties. |
options | Optional | MethodOptions<CustomQuery<"categories">> | Options that can be passed to additionally configure the request or customize the logic in a plugin. |
Returns
Returns a representation of the GetCategoriesResponse.
Referenced Types
Examples
Fetching categories. As the getCategory endpoint doesn't use cookie values internally, it's cacheable without passing additional values.
import { sdk } from '~/sdk.config.ts';
const { categories } = await sdk.commerce.getCategories();Fetching a single category by catId.
import { sdk } from '~/sdk.config.ts';
const { categories } = await sdk.commerce.getCategories({
catId: '12345678-1234-1234-1234-123456789012'
});Fetching a single category by key.
import { sdk } from '~/sdk.config.ts';
const { categories } = await sdk.commerce.getCategories({
key: 'c3'
});Fetching a single category by slug.
import { sdk } from '~/sdk.config.ts';
const { categories } = await sdk.commerce.getCategories({
slug: 'men'
});Fetching multiple categories by slugs.
import { sdk } from '~/sdk.config.ts';
const { categories } = await sdk.commerce.getCategories({
slugs: ['men', 'men-shoes']
});Fetching multiple categories by catIds.
import { sdk } from '~/sdk.config.ts';
const { categories } = await sdk.commerce.getCategories({
catIds: [
'12345678-1234-1234-1234-123456789012',
'12345678-1234-1234-1234-123456789013'
]
});Creating a custom GraphQL query for the method in middleware.config.js.
module.exports = {
integrations: {
ct: {
// ...
customQueries: {
'get-categories-custom-query': ({ variables, metadata }) => ({
variables,
query: `
query categories($where: String, $sort: [String!], $limit: Int, $offset: Int, $acceptLanguage: [Locale!]) {
categories(where: $where, sort: $sort, limit: $limit, offset: $offset) {
results {
${metadata}
}
}
}
`;
})
}
}
}
};Fetching categories and using the customQuery parameter to leverage the custom GraphQL query from the previous example. Notice how we are using the type parameter to overwrite the default response interface.
import { sdk } from '~/sdk.config.ts';
type CustomGetCategoriesResponse = {
categories: {
id: string;
name: string;
}
}
const { categories } = await sdk.commerce.getCategories<CustomGetCategoriesResponse>(null, {
customQuery: {
categories: 'get-categories-custom-query',
metadata: 'id,name(acceptLaguage: $acceptLanguage)'
}
});