getProduct
Method fetching filtered and paginated products.
This method sends a GET request to the getProduct endpoint of the Vue Storefront API Middleware. In turn, it fetches a products 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 getProduct<Res extends PartialGetProductResponse = GetProductResponse>(
params?: GetProductParams,
options?: MethodOptions<CustomQuery<"products">>
): Promise<Res>;Parameters
| Name | Required | Type | Description |
|---|---|---|---|
params | Optional | GetProductParams | Parameter object which can be used with this method. Refer to its type definition to learn about possible properties. |
options | Optional | MethodOptions<CustomQuery<"products">> | Options that can be passed to additionally configure the request or customize the logic in a plugin. |
Returns
Returns a representation of the GetProductResponse.
Referenced Types
Examples
Fetching the first page of all products.
import { sdk } from '~/sdk.config.ts';
const { products } = await sdk.commerce.getProduct();Fetching products the way, that the response is cacheable, by passing variables explicitly instead of getting values from cookies.
import { sdk } from '~/sdk.config.ts';
const { products } = await sdk.commerce.getProduct({
country: "PL",
currency: "USD",
customerGroupId: null,
channel: null,
locale: "en",
});Fetching the third page of all products sliced by 25 products.
import { sdk } from '~/sdk.config.ts';
const { products } = await sdk.commerce.getProduct({
offset: 50,
limit: 25
});Fetching the first page of products filtered by category identifier.
import { sdk } from '~/sdk.config.ts';
const { products } = await sdk.commerce.getProduct({
catId: '3d45e2d2-fe47-4e8b-968e-faa87991f233'
});Creating a custom GraphQL query for fetching product.
module.exports = {
integrations: {
ct: {
// ...
customQueries: {
'get-product-custom-query': ({ variables, metadata }) => ({
variables,
query: `
query products(
$where: String
$sort: [String!]
$limit: Int
$offset: Int
$skus: [String!]
) {
products(
where: $where
sort: $sort
limit: $limit
offset: $offset
skus: $skus
) {
offset
count
total
results {
${metadata}
}
}
}
`
}),
}
}
}
};Fetching products 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';
import { ProductQueryResult } from '@vsf-enterprise/commercetools-types';
type CustomProduct = {
id: string;
masterData: {
current: {
name: string;
}
}
}
type CustomGetProductResponse = {
products: Omit<ProductQueryResult, 'results'> & {
results: Array<CustomProduct>
}
}
const { products } = await sdk.commerce.getProduct<CustomGetProductResponse>(undefined, {
customQuery: {
products: 'get-product-custom-query',
metadata: `
id
masterData {
current {
name(acceptLanguage: "en")
}
}
`
}
});