Shopify Storefront API

Backend

For the frontend, Brush prepares the Storefront API for you for the current Shopify shop and handles all the heavy lifting of managing the Storefront Access Token. The current Shopify shop is:

• whether the one which made a REST request to your backend (see REST API)
• or the one you specified when using a Gadget action (see Gadget actions)

Calling the Shopify Storefront API

Calling the Shopify Storefront API is straightforward, just use the BrushContext.storefrontApi object and pass 2 arguments:

1. The GraphQL query or mutation
2. The variables (optionnal)

For better localization, do not forget to enforce using the @inContext directive.

Example:

const fetchProduct = async (context: BrushContext) => {
  const PRODUCT_QUERY = /* GraphQL */ `
    query ProductQuery($id: ID!, $country: CountryCode, $language: LanguageCode)
    @inContext(country: $country, language: $language) {
      product(id: $id) {
        title
      }
    }
  `;

  const response = await context.storefrontApi.request(PRODUCT_QUERY, {
    variables: {
      id: `gid://shopify/Product/1234567890`,
      country: context.country,
      language: context.locale,
    },
  });
};