Hydrogen-react useCart hook: calling multiple callbacks in sequence

[urgoringo]

Hello. I'm trying to execute multiple operations in a sequence using the useCart hook e.g. cartAttributesUpdate and linesRemove.

However, it seems only the first operation gets executed. I see there are completed callbacks on CartProvider but using these to figure out when another operation can be executed is not very convenient since it's separate from the code that interacts with useCart.

I also tried a solution where I'm "sleeping" until cart.status === "idle" before calling another callback. This doesn't work either for some reason.

I would expect these action callbacks in useCart to return a promise so that I can wait until they are resolved.

Am I missing something or my use case is not supported by the library?

I can reproduce the error with following test:

import {act, renderHook, waitFor} from "@testing-library/react";
import React, {ReactNode} from "react";
import {CartProvider, ShopifyProvider, useCart} from "@shopify/hydrogen-react";
import "whatwg-fetch";

const accessToken = "8b6008fe5f922fb7b1f0df8b142c2d38";

const renderCart = () => {
  const wrapper = ({children}: {children: ReactNode}) => (
    <ShopifyProvider
      storeDomain={`https://test-cleankitchen.myshopify.com`}
      storefrontApiVersion="2023-01"
      storefrontToken={accessToken}
      countryIsoCode="EE"
      languageIsoCode="ET"
    >
      <CartProvider
        onLineAddComplete={() => console.log("Line add complete")}
        onLineUpdateComplete={() => console.log("Line update complete")}
        onAttributesUpdateComplete={() =>
          console.log("Attributes update complete")
        }
      >
        {children}
      </CartProvider>
    </ShopifyProvider>
  );
  return renderHook(() => useCart(), {wrapper});
};

const sleepUntil = async (f: () => boolean, timeoutMs = 1000) => {
  return new Promise((resolve, reject) => {
    const timeWas = new Date();
    const wait = setInterval(function () {
      if (f()) {
        clearInterval(wait);
        resolve(true);
      } else if (+new Date() - +timeWas > timeoutMs) {
        clearInterval(wait);
        reject(false);
      }
    }, 20);
  });
};

test("can call multiple callbacks in sequence", async () => {
  const {result} = renderCart();

  act(() => result.current.cartCreate({}));
  await waitFor(() => {
    expect(result.current.status).toBe("idle");
  });
  await act(() => {
    result.current.linesAdd([
      {
        merchandiseId: "gid://shopify/ProductVariant/44671043141922",
        quantity: 1,
      },
    ]);
  });
  await waitFor(() => {
    expect(result.current.status).toBe("idle");
  });
  await act(() => {
    result.current.cartAttributesUpdate([
      {key: "test2", value: "val2"},
      {key: "test2", value: "val3"},
    ]);
    sleepUntil(() => result.current.status === "idle");
    setTimeout(
      () => result.current.linesRemove(result.current.lines.map((it) => it.id)),
      800
    );
  });
  await waitFor(() => {
    expect(result.current.status).toBe("idle");
  });
  await waitFor(() => {
    expect(
      result.current.attributes.filter((it) => it.key === "test2")[0]
    ).toStrictEqual({
      key: "test2",
      value: "val3",
    });
  });
  await waitFor(() => {
    expect(result.current.lines.length).toBe(0);
  });
});

[lordofthecactus]

It is not currently possible to chain with awaits. But definitely in the radar.
Could you share the specifics of your use case? It is possible to add attributes at the same time of adding a line:

/** Specifies the input fields to create a merchandise line on a cart. */
export type CartLineInput = {
  /** An array of key-value pairs that contains additional information about the merchandise line. */
  attributes?: InputMaybe<Array<AttributeInput>>;
  /** The identifier of the merchandise that the buyer intends to purchase. */
  merchandiseId: Scalars['ID'];
  /** The quantity of the merchandise. */
  quantity?: InputMaybe<Scalars['Int']>;
  /** The identifier of the selling plan that the merchandise is being purchased with. */
  sellingPlanId?: InputMaybe<Scalars['ID']>;
};

If you absolutely need chaining calls to the cart, right now the best way is through waiting for state idle. This should work without sleep. Would you have a codesandbox reproducing this?

[urgoringo]

Thank you @lordofthecactus for reply. I created sample repository that can reproduce this issue: https://github.com/urgoringo/test-shopify-storefront/tree/main

I'm currently using cart level attributes instead of line attributes. But I guess I could switch to line attributes instead.

However, I have another use case where I need to add a line and update all lines in a chain. I cannot use such workaround there.

Adding wait for cart idle state does not resolve either of these cases.

My specific use case is that we have different product prices depending on how many items user has added to their cart. We model this by creating separate variants for each product. So whenever user adds new product to the cart I need to update all existing lines to make sure it now contains the right product variants.

[urgoringo]

I created issue for this so closing discussion to avoid duplication: #685