getShippingMethods

Method fetching shipping methods.

This method sends a POST request to the getShippingMethods endpoint of the Vue Storefront API Middleware. In turn, it fetches a shipping methods 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 getShippingMethods<Res extends PartialGetShippingMethodsResponse = GetShippingMethodsResponse>(
	params: GetShippingMethodsParams,
	options?: MethodOptions<CustomQuery<"shippingMethods">>
): Promise<Res>;

Parameters

Name	Required	Type	Description
`params`	Required	`GetShippingMethodsParams`	Parameter object which can be used with this method. Refer to its type definition to learn about possible properties.
`options`	Optional	`MethodOptions<CustomQuery<"shippingMethods">>`	Options that can be passed to additionally configure the request or customize the logic in a plugin.

Returns

Returns a representation of the GetShippingMethodsResponse.

Referenced Types

Examples

Fetching shipping methods for the cart.

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

const { shippingMethods } = await sdk.commerce.getShippingMethods({
  cartId: 'f8941d7d-5af9-4ca0-ad4a-c9d11adeedc3'
});

Creating a custom GraphQL query for shipping methods.

module.exports = {
  integrations: {
    ct: {
      // ...
      customQueries: {
        'get-shipping-methods-custom-query': ({ variables, metadata }) => {
          return {
            variables,
            query: `
              query shippingMethods($acceptLanguage: [Locale!], $cartId: String!) {
                shippingMethods: shippingMethodsByCart(id: $cartId) {
                  ${metadata}
                }
            }
           `
          }
        }
      };
    }
  }
};

Fetching shipping methods 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 CustomGetShippingMethodsResponse = {
  shippingMethods: Array<{
    id: string;
    name: string;
    isDefault: boolean;
    localizedDescription: string;
  }>
}

const { shippingMethods } = await sdk.commerce.getShippingMethods<CustomGetShippingMethodsResponse>({
  cartId: 'f8941d7d-5af9-4ca0-ad4a-c9d11adeedc3'
}, {
  customQuery: {
    shippingMethods: 'get-shipping-methods-custom-query',
    metadata: `
      id
      name
      isDefault
      localizedDescription(acceptLanguage: $acceptLanguage)
    `
  }
});