From d809e6f793f557d7dd440c6004d3f1ad98ffea3b Mon Sep 17 00:00:00 2001 From: Scott Dixon Date: Fri, 17 May 2024 10:24:04 +1000 Subject: [PATCH 01/10] Deprecation: readme notice, jsdocs notice, migration guide --- README.md | 11 +- docs/CheckoutResource.html | 34 ++- docs/Client.html | 34 ++- docs/CollectionResource.html | 34 ++- docs/Config.html | 34 ++- docs/ImageHelpers.html | 34 ++- docs/ImageResource.html | 34 ++- docs/ProductHelpers.html | 34 ++- docs/ProductResource.html | 34 ++- docs/ShopResource.html | 34 ++- docs/checkout-resource.js.html | 34 ++- docs/client.js.html | 34 ++- docs/collection-resource.js.html | 34 ++- docs/config.js.html | 37 ++- docs/image-helpers.js.html | 34 ++- docs/image-resource.js.html | 34 ++- docs/index.html | 43 +++- docs/product-helpers.js.html | 34 ++- docs/product-resource.js.html | 34 ++- docs/shop-resource.js.html | 34 ++- docs/tutorial-MIGRATION_GUIDE.html | 394 ++++++++++++----------------- jsdoc.json | 14 +- layout.tmpl | 64 +++++ migration-guide/README.md | 223 ++++++++++++++++ tutorials/MIGRATION_GUIDE.md | 297 ---------------------- 25 files changed, 1049 insertions(+), 612 deletions(-) create mode 100644 layout.tmpl create mode 100644 migration-guide/README.md delete mode 100644 tutorials/MIGRATION_GUIDE.md diff --git a/README.md b/README.md index 47363da79..91b179364 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,11 @@ -# [Shopify](https://www.shopify.com) JavaScript Buy SDK -![Build](https://github.com/shopify/js-buy-sdk/actions/workflows/ci.yml/badge.svg) +> # Deprecation Notice +> **The JS Buy SDK has been deprecated.** For more information, please see our [changelog announcement](https://shopify.dev/changelog/deprecation-of-js-buy-sdk). +> +> We recommend migrating to the new [Storefront API Client](https://github.com/Shopify/shopify-app-js/tree/main/packages/api-clients/storefront-api-client#readme) by following the [migration guide](./migration-guide). -**Note**: For help with migrating from v0 of JS Buy SDK to v1 check out the -[Migration Guide](https://github.com/Shopify/js-buy-sdk/blob/main/tutorials/MIGRATION_GUIDE.md). +--- + +# Shopify JavaScript Buy SDK The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It's based on Shopify's [Storefront API](https://help.shopify.com/api/storefront-api/getting-started) diff --git a/docs/CheckoutResource.html b/docs/CheckoutResource.html index f5a4011a8..09cf51e6a 100644 --- a/docs/CheckoutResource.html +++ b/docs/CheckoutResource.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: CheckoutResource

+ +

Class: CheckoutResource

+ @@ -3026,13 +3052,13 @@
Example

diff --git a/docs/Client.html b/docs/Client.html index 2f656625d..3c75dd7c7 100644 --- a/docs/Client.html +++ b/docs/Client.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: Client

+ +

Class: Client

+ @@ -621,13 +647,13 @@
Example

diff --git a/docs/CollectionResource.html b/docs/CollectionResource.html index d6ad1d44b..3c4e7c056 100644 --- a/docs/CollectionResource.html +++ b/docs/CollectionResource.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: CollectionResource

+ +

Class: CollectionResource

+ @@ -1272,13 +1298,13 @@
Example

diff --git a/docs/Config.html b/docs/Config.html index 463be8566..0c7551f60 100644 --- a/docs/Config.html +++ b/docs/Config.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: Config

+ +

Class: Config

+ @@ -276,13 +302,13 @@
Properties

diff --git a/docs/ImageHelpers.html b/docs/ImageHelpers.html index 30225c104..8e0118ad3 100644 --- a/docs/ImageHelpers.html +++ b/docs/ImageHelpers.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Namespace: ImageHelpers

+ +

Namespace: ImageHelpers

+ @@ -379,13 +405,13 @@
Example

diff --git a/docs/ImageResource.html b/docs/ImageResource.html index 6c49a5bfa..647ffd917 100644 --- a/docs/ImageResource.html +++ b/docs/ImageResource.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: ImageResource

+ +

Class: ImageResource

+ @@ -155,13 +181,13 @@

new Imag


diff --git a/docs/ProductHelpers.html b/docs/ProductHelpers.html index ff5d02d55..5ac1c1f40 100644 --- a/docs/ProductHelpers.html +++ b/docs/ProductHelpers.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Namespace: ProductHelpers

+ +

Namespace: ProductHelpers

+ @@ -309,13 +335,13 @@
Example

diff --git a/docs/ProductResource.html b/docs/ProductResource.html index c9f75db93..6b919c489 100644 --- a/docs/ProductResource.html +++ b/docs/ProductResource.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: ProductResource

+ +

Class: ProductResource

+ @@ -1383,13 +1409,13 @@
Example

diff --git a/docs/ShopResource.html b/docs/ShopResource.html index 69bf9339f..2cee70e7b 100644 --- a/docs/ShopResource.html +++ b/docs/ShopResource.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Class: ShopResource

+ +

Class: ShopResource

+ @@ -400,13 +426,13 @@
Example

diff --git a/docs/checkout-resource.js.html b/docs/checkout-resource.js.html index db3c48f24..68c602a74 100644 --- a/docs/checkout-resource.js.html +++ b/docs/checkout-resource.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: checkout-resource.js

+ +

Source: checkout-resource.js

+ @@ -367,13 +393,13 @@

Source: checkout-resource.js


diff --git a/docs/client.js.html b/docs/client.js.html index 5f67fbd78..ab81f2f1d 100644 --- a/docs/client.js.html +++ b/docs/client.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: client.js

+ +

Source: client.js

+ @@ -138,13 +164,13 @@

Source: client.js


diff --git a/docs/collection-resource.js.html b/docs/collection-resource.js.html index b388fbd92..66a2f753b 100644 --- a/docs/collection-resource.js.html +++ b/docs/collection-resource.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: collection-resource.js

+ +

Source: collection-resource.js

+ @@ -166,13 +192,13 @@

Source: collection-resource.js


diff --git a/docs/config.js.html b/docs/config.js.html index 1d8ea07a7..c937e3c90 100644 --- a/docs/config.js.html +++ b/docs/config.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: config.js

+ +

Source: config.js

+ @@ -85,7 +111,8 @@

Source: config.js

if (attrs.hasOwnProperty('apiVersion')) { this.apiVersion = attrs.apiVersion; } else { - this.apiVersion = '2024-04' } + this.apiVersion = '2024-04'; + } if (attrs.hasOwnProperty('source')) { this.source = attrs.source; @@ -108,13 +135,13 @@

Source: config.js


diff --git a/docs/image-helpers.js.html b/docs/image-helpers.js.html index 3bcd80eb9..ec246cdd9 100644 --- a/docs/image-helpers.js.html +++ b/docs/image-helpers.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: image-helpers.js

+ +

Source: image-helpers.js

+ @@ -72,13 +98,13 @@

Source: image-helpers.js


diff --git a/docs/image-resource.js.html b/docs/image-resource.js.html index c6c0562f5..0d226deb2 100644 --- a/docs/image-resource.js.html +++ b/docs/image-resource.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: image-resource.js

+ +

Source: image-resource.js

+ @@ -50,13 +76,13 @@

Source: image-resource.js


diff --git a/docs/index.html b/docs/index.html index c1fdf49c8..a0edbe6b7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,13 +11,37 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Home

+ @@ -43,10 +67,13 @@

-

Shopify JavaScript Buy SDK

-

Build

-

Note: For help with migrating from v0 of JS Buy SDK to v1 check out the -Migration Guide.

+
+

Deprecation Notice

+

The JS Buy SDK has been deprecated. For more information, please see our changelog announcement.

+

We recommend migrating to the new Storefront API Client by following the migration guide.

+
+
+

Shopify JavaScript Buy SDK

The JS Buy SDK is a lightweight library that allows you to build ecommerce into any website. It's based on Shopify's Storefront API and provides the ability to retrieve products and collections from your shop, add products to a cart, and checkout.

@@ -338,13 +365,13 @@

License


diff --git a/docs/product-helpers.js.html b/docs/product-helpers.js.html index a908c5ac7..92d457004 100644 --- a/docs/product-helpers.js.html +++ b/docs/product-helpers.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: product-helpers.js

+ +

Source: product-helpers.js

+ @@ -64,13 +90,13 @@

Source: product-helpers.js


diff --git a/docs/product-resource.js.html b/docs/product-resource.js.html index 26202b524..54a5eccbf 100644 --- a/docs/product-resource.js.html +++ b/docs/product-resource.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: product-resource.js

+ +

Source: product-resource.js

+ @@ -180,13 +206,13 @@

Source: product-resource.js


diff --git a/docs/shop-resource.js.html b/docs/shop-resource.js.html index ef020b7f6..075b78c3a 100644 --- a/docs/shop-resource.js.html +++ b/docs/shop-resource.js.html @@ -11,13 +11,39 @@ + - + + +
+
+ The JS Buy SDK has been deprecated. For more information, please see our changelog announcement or migration guide. +
-

Source: shop-resource.js

+ +

Source: shop-resource.js

+ @@ -84,13 +110,13 @@

Source: shop-resource.js


diff --git a/docs/tutorial-MIGRATION_GUIDE.html b/docs/tutorial-MIGRATION_GUIDE.html index 9a5f9e53a..f4530f60c 100644 --- a/docs/tutorial-MIGRATION_GUIDE.html +++ b/docs/tutorial-MIGRATION_GUIDE.html @@ -28,33 +28,24 @@

MIGRATION_GUIDE

-

Migration Guide

-

This document provides a set of guidelines for migrating from v0.7 of the JS Buy SDK to v1 of the JS Buy SDK -which uses Shopify's GraphQL-based Storefront API.

-

Table of Contents

+

Migration guide: JS Buy SDK to Storefront API Client

+

The JS Buy SDK is deprecated. We recommend transitioning to the Storefront API Client to leverage the latest cart features and perform more efficient data retrievals.

+

Key differences

-

Installation

-

With Yarn:

-
yarn add shopify-buy
-
-

With NPM:

-

Remove the old version, then

-
npm install shopify-buy
-
-

Updated Functions and Classes

-

Initialization

-

Rather than using a static function to create the client (ShopifyBuy.buildClient()), v1 exposes the Client -(previously ShopClient) and a Config class for the Client directly. An instance of Client can be created like so:

+

Migrating

+

Transitioning from the JS Buy SDK to the Storefront API Client involves a few important steps:

+

Step 1: Install the new library

+

Start by installing the @Shopify/storefront-api-client via your preferred package manager:

+
npm install @shopify/storefront-api-client
+
+

Step 2: Initialize the Client

+

Transition from the old initialization of the JS Buy SDK:

import Client from 'shopify-buy';
 
 const client = Client.buildClient({
@@ -62,207 +53,158 @@ 
Initialization

   storefrontAccessToken: 'your-storefront-access-token'
 });
-

Fetching Products and Collections

-

The functions for fetching products and collections are mostly the same. Major differences are:

-
    -
  1. -

    The v1 functions take in a Storefront ID for fetching a product or collection by ID. A Storefront ID can be found under -the retrieving IDs section of the Storefront API docs. -Getting Started Guide for the Storefront API.

    -
    2. -
  2. -

    Collections can be fetched with products using collection.fetchWithProducts(id) (fetches a single collection with associated products) and collection.fetchAllWithProducts() (fetches a page of collections with their associated products).

    -
    3. -
-
const collectionId = 'Z2lkOi8vc2hvcGlmeS9Db2xsZWN0aW9uLzI1NzY5NzczMQ=='
-
-// Use the built-in function
-client.collection.fetchWithProducts(collectionId).then((collection) => {
-  console.log(collection); // Collection with all default fields and products with all default fields.
-  console.log(collection.products); // Products on the collection
-});
-
-
    -
  1. product.fetchQuery() and collection.fetchQuery() query different fields and take an optional query argument. -See the product connection field and -collection connection field docs -in the storefront API for more details.
    2. -
-

v0:

-
client.fetchQueryProducts({collection_id: '336903494', tag: ['hats']}).then((products) => {
-  console.log(products); // An array of products in collection '336903494' having the tag 'hats'
-});
-
-

v1:

-
const query = {
-  query: 'updated_at:>="2016-09-25T21:31:33"',
-  sortBy: 'title'
-};
-
-client.product.fetchQuery(query).then((products) => {
-  console.log(products); // An array of products updated after 2016-09-25T21:31:33 
-                         // and sorted in ascending order by title.
-});
-
-

Carts/Checkouts

-

Carts are replaced with checkouts. Like the fetch functions, all checkout functions take an optional query argument that specifies fields to return on the checkout.

-

fetchRecentCart(), updateModel(), and clearLineItems() have been removed. checkoutUrl has been renamed to webUrl.

-

Creating a Checkout

-

To create a checkout, use checkout.create(). You are responsible for capturing the ID of the checkout for later usage. If you would like to persist the checkout between sessions, store the ID in a cookie or localStorage.

-

v0:

-
client.createCart().then((cart) => {
-  console.log(cart); // Empty cart
-});
-
-

v1:

-
client.checkout.create().then((checkout) => {
-  console.log(checkout); // Empty checkout
-  console.log(checkout.id); // The ID of the checkout. Store this for later usage.
-});
-
-

The checkout can also be initialized with fields like line items and a shipping address. See the API reference for more details.

-

Fetching a Checkout

-

To fetch a checkout, use fetchCheckout().

-

v0:

-
client.fetchRecentCart().then((cart) => {
-  console.log(cart); // Most recently created cart
-});
-
-

v1:

-
client.checkout.create().then((checkout) => {
-  localStorage.setItem('checkoutId', checkout.id); // Store the ID in localStorage
-});
-
-// In another session:
-const checkoutId = localStorage.getItem('checkoutId');
-
-client.checkout.fetch(checkoutId).then((checkout) => {
-  console.log(checkout); // The retrieved checkout
-});
-
-

v0:

-
client.fetchCart('shopify-buy.1459804699118.2').then(cart => {
-  console.log(cart); // The retrieved cart
-});
-
-

v1:

-
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID from a previous checkout.create call
-
-client.checkout.fetch(checkoutId).then((checkout) => {
-  console.log(checkout); // The retrieved checkout
-});
-
-

Modifying an Existing Checkout

-

The functions to modify a checkout are on Client rather than CartModel.

-
Adding Line Items
-

To add line items to a checkout, use addLineItems() (previously createLineItemsFromVariants()). Similar to the checkout's ID, you are responsible for storing line item IDs for updates and removals.

-

v0:

-
cart.createLineItemsFromVariants({variant: variantObject1, quantity: 5}, {variant: variantObject2, quantity: 2}).then((cart) => {
-  console.log(cart); // Cart with two additional line items
-});
-
-

v1:

-
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID from a previous checkout.create call
-const lineItems = [
-  {variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yNTYwMjIzNTk3Ng==', quantity: 5},
-  // Line items can also have additional custom attributes
-  {
-    variantId: 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0VmFyaWFudC8yNTYwMjIzNjA0MA==',
-    quantity: 2, 
-    customAttributes: {'key': 'attributeKey', 'value': 'attributeValue'}
+
To the new initialization with the Storefront API Client:

+
import {createStorefrontApiClient} from '@shopify/storefront-api-client';
+
+const client = createStorefrontApiClient({
+  storeDomain: 'your-shop-name.myshopify.com',
+  apiVersion: '2024-04',
+  publicAccessToken: 'your-storefront-public-access-token',
+});
+

+
Step 3: Convert helper methods to operations

+
You'll need to transition from using JS Buy SDK helper methods to a more customized design.

+
Fetching products

+
JavaScript Buy SDK: Fetching Products

+
client.product.fetchAll().then((products) => {
+  // Do something with the products
+  console.log(products);
+});
+

+
Storefront API Client: Fetching Products

+
const operation = `
+  query {
+    products(first: 10) {
+      edges {
+        node {
+          id
+          handle
+          title
+        }
+      }
+    }
   }
-];
-
-client.checkout.addLineItems(checkoutId, lineItems).then((checkout) => {
-  console.log(checkout); // Checkout with two additional line items
-  console.log(checkout.lineItems) // Line items on the checkout
-});
-

-
Updating Line Items

-
To update line items on a checkout, use updateLineItems().

-
v0:

-
const lineItemId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';
-const quantity = 1;
-
-cart.updateLineItem(lineItemId, quantity).then((cart) => {
-  console.log(cart); // Cart with a line item quantity updated to 1
-});
-

-
v1:

-
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID from a previous checkout.create call
-const lineItemId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';
-const lineItems = [
-  {id: lineItemId, quantity: 1}
-];
-
-client.checkout.updateLineItems(checkoutId, lineItems).then((checkout) => {
-  console.log(checkout); // Checkout with a line item quantity updated to 1
-  console.log(checkout.lineItems) // Line items on the checkout
-});
-

-
Removing Line Items

-
To remove line items on a checkout, use removeLineItems().

-
v0:

-
const lineItemId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ=';
-
-cart.removeLineItem(lineItemId).then((cart) => {
-  console.log(cart); // Cart with a line item removed
-});
-

-
v1:

-
const checkoutId = 'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0SW1hZ2UvMTgyMTc3ODc1OTI='; // ID from a previous checkout.create call
-const lineItemIds = [
-  'Z2lkOi8vc2hvcGlmeS9Qcm9kdWN0Lzc4NTc5ODkzODQ='
-];
-
-client.checkout.removeLineItems(checkoutId, lineItemIds).then((checkout) => {
-  console.log(checkout); // Checkout with a line item removed
-  console.log(checkout.lineItems) // Line items on the checkout
-});
-

-
Pagination

-
Most models that are part of a paginated set (products, products on collections,
-collections) are not fetched in their entirety. However, because we're using
-GraphQL, and we're compliant with the Relay specification, all of these models
-may be paginated using the underlying GraphQL Client. This functionality didn't
-really exist in a clean way under v0.

-
Examples

-
Paginating products on a shop.

-
let productList;
-client.products.fetchAll().then((products) => {
-  productList = products;
-});
-
-// Do some stuff, and later:
-
-client.fetchNextPage(productList).then((nextPageOfProducts) => {
-  // Do some other stuff
-});
-

-
Paginating products on within a collection.

-
let productsForCollection;
-client.collection.fetchWithProducts(collectionId).then((collection) => {
-  productsForCollection = collection.products;
-});
-
-// Do some stuff, and later:
-
-client.fetchNextPage(productsForCollection).then((nextPageOfProducts) => {
-  // Do some other stuff
-});
-

-
Paginating collections

-
let collectionList;
-client.collection.fetchAll().then((collections) => {
-  collectionList = collections;
-});
-
-// Do some stuff, and later:
-
-client.fetchNextPage(collectionList).then((nextPageOfCollections) => {
-  // Do some other stuff
-});
-

+`;
+
+const {data, errors, extensions} = await client.request(operation);
+console.log(data.products);
+
+

Note that with the Storefront Client, you'll be crafting GraphQL operations directly, and can therefore customize it according to your needs. Refer to the Storefront API documentation for common operations or see JS Buy SDK query equivalents. !TODO: LINK THIS WHEN ADDED!

+

Carts and checkouts

+

The JS Buy SDK uses the Checkout API (which is deprecated). With the Storefront Client, you can use the Cart API to create carts and send customers to checkout. Learn more.

+
const operation = `mutation createCart($cartInput: CartInput) {
+  cartCreate(input: $cartInput) {
+    cart {
+      id
+      checkoutUrl
+      lines(first: 10) {
+        edges {
+          node {
+            id
+            merchandise {
+              ... on ProductVariant {
+                id
+                title
+              }
+            }
+          }
+        }
+      }
+      cost {
+        totalAmount {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+}`;
+
+const {data, errors} = await client.request(operation, {
+  variables: {
+    "cartInput": {
+      "lines": [
+        {
+          "quantity": 1,
+          "merchandiseId": "gid://shopify/ProductVariant/43162292814051"
+        }
+      ]
+    }
+  }
+})
+
+console.log("Checkout URL: ", data.cartCreate.cart.checkoutUrl);
+
+

Pagination

+

The Storefront API limits how many items can be fetched at once. Results can be paginated using cursors. The JS Buy SDK provides helpers like fetchNextPage, Storefront API Client requires manual pagination:

+
const productQuery = `query Products ($numProducts: Int!, $afterCursor: String){
+  products(first: $numProducts, after: $afterCursor) {
+    nodes {
+      id
+      title
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+}`;
+
+async function paginateThroughProducts() {
+  let hasNextPage = true, afterCursor = null;
+
+  while (hasNextPage) {
+    const {
+      data: {products},
+      errors,
+    } = await client.request(productQuery, {
+      variables: {numProducts: 250, afterCursor},
+    });
+
+    products.nodes.forEach((product) => {
+      console.log(`Product ID: ${product.id}, Name: ${product.title}`);
+      // Process each product as needed
+    });
+
+    if (products.pageInfo.hasNextPage) {
+      afterCursor = products.pageInfo.endCursor;
+    } else {
+      hasNextPage = false;
+    }
+  }
+}
+
+paginateThroughProducts();
+
+

Resizing images

+

The JS Buy SDK provides a helper method to resize images. The Storefront API client allows you to do this directly in the query instead.

+
const query = `{
+  productByHandle(handle: "snowboard") {
+    id
+    thumbnail: featuredImage {
+      url(transform: {maxWidth: 100, maxHeight: 100})
+    }
+  }
+}`;
+
+const { data, errors } = await client.request(query);
+console.log(data.productByHandle.thumbnail.url);
+
+

Step 4: Handle Errors

+

You may encounter network or GraphQL errors. Be prepared to handle these gracefully:

+
const { data, errors } = await client.request(query)
+
+if (errors) {
+  console.error(errors.message);
+  return;
+}
+
+

Step 5: Test Your Implementation

+

Ensure to test your new implementation thoroughly to verify that all APIs are working properly and the responses are handled correctly.

+

Equivalent queries

+

During the migration process, it can be helpful to examine the original queries from the JS Buy SDK. We have archived these queries and their optimized versions here.

+

Learn more

+

Check out the Storefront API Client documentation to learn more.

@@ -276,7 +218,7 @@

Home

Namespaces