getProductBySku

Method fetching product based on the SKU identifier.

This method sends a GET request to the getProduct endpoint of the Vue Storefront API Middleware. In turn, it fetches a product 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 getProductBySku<Res extends PartialGetProductResponse = GetProductResponse>(
	params: GetProductBySkuParams,
	options?: MethodOptions<CustomQuery<"products">>
): Promise<Res>;

Parameters

Name	Required	Type	Description
`params`	Required	`GetProductBySkuParams`	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 product.

import { sdk } from '~/sdk.config.ts';

const { products } = await sdk.commerce.getProductBySku({
  sku: 'id'
});

Fetching product 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.getProductBySku({
  sku: 'id',
  country: "PL",
  currency: "USD",
  customerGroupId: null,
  channel: null,
  locale: "en",
});

Creating a custom GraphQL query for fetching product by sku.

module.exports = {
  integrations: {
    ct: {
      // ...
      customQueries: {
       'get-product-by-sku-custom-query': ({ variables, metadata }) => ({
         variables,
         query: `
           query products(
             $skus: [String!]
           ) {
             products(
               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';

type CustomGetProductBySkuResponse = {
  products: {
     version: string;
  }
}

const { products } = await sdk.commerce.getProductBySku<CustomGetProductBySkuResponse>({ sku: 'id' }, {
  customQuery: {
    products: 'get-product-by-sku-custom-query',
    metadata: 'version'
  }
});