From 6c3431f912fb4419b7c6dd76d0aca2e669ea3006 Mon Sep 17 00:00:00 2001
From: John Whiles <john.whiles@contentful.com>
Date: Mon, 19 Apr 2021 14:28:10 +0200
Subject: [PATCH] fix: stop simultaneous recursive chains

---
 apps/shopify/src/Pagination.js                          | 9 +++++++--
 packages/ecommerce-app-base/src/SkuPicker/SkuPicker.tsx | 8 ++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/apps/shopify/src/Pagination.js b/apps/shopify/src/Pagination.js
index f23f163d81..22b3eebfc4 100644
--- a/apps/shopify/src/Pagination.js
+++ b/apps/shopify/src/Pagination.js
@@ -25,8 +25,13 @@ class Pagination {
     this.shopifyClient = await makeShopifyClient(this.sdk);
   }
 
-  async fetchNext(search) {
+  async fetchNext(search, recursing = false) {
     const searchHasChanged = search !== this.prevSearch;
+    const shouldStop = searchHasChanged && recursing;
+    if (shouldStop) {
+      return;
+    }
+
     if (searchHasChanged) {
       this.prevSearch = search;
       this._resetPagination();
@@ -55,7 +60,7 @@ class Pagination {
     // When there are not enough variants to fill the page, we need to fetch more products,
     // extract their variants and then call this method recursively to render the next page.
     await this._fetchMoreProducts(search);
-    return this.fetchNext(search);
+    return this.fetchNext(search, true);
   }
 
   /**
diff --git a/packages/ecommerce-app-base/src/SkuPicker/SkuPicker.tsx b/packages/ecommerce-app-base/src/SkuPicker/SkuPicker.tsx
index 3d09826dea..79ccd2e3bb 100644
--- a/packages/ecommerce-app-base/src/SkuPicker/SkuPicker.tsx
+++ b/packages/ecommerce-app-base/src/SkuPicker/SkuPicker.tsx
@@ -82,8 +82,12 @@ export class SkuPicker extends Component<Props, State> {
         search
       } = this.state;
       const offset = (activePage - 1) * limit;
-      const { pagination, products } = await this.props.fetchProducts(search, { offset });
-      this.setState({ pagination, products });
+      const fetched = await this.props.fetchProducts(search, { offset });
+      // If the request has been cancelled because a new one has been launched
+      // then fetchProducts will return null
+      if (fetched && fetched.pagination && fetched.products) {
+        this.setState({ pagination: fetched.pagination, products: fetched.products });
+      }
     } catch (error) {
       this.props.sdk.notifier.error('There was an error fetching the product list.');
     }