Accessing mutation error from another dynamically loaded component

[florianliebig]

In our Usecase we use the Next.js app dir with SWR in the latest versions (Next.js 14.0.4 & SWR 2.2.4).

We now have a component rendering an add-to-cart Button and accessing our SWR hook (useCart in our case).

The hook for adding to cart looks like this:

  const { trigger: addCartEntry, ...addSwr } = useSWRMutation(
    key,
    (_, { arg }: { arg: CartMutationPayload }) => addEntry(params, arg),
    {
      ...sharedOptions,
      onSuccess(cart) {
        // Store cart ID in session/localStorage
        setCartId(cart.id);
      },
    }
  );

sharedOptions like this:

const sharedOptions: SWRMutationConfiguration<Cart, Error, typeof key> = {
    // Since the API already gives us the updated cart we store it directly in the cache ...
    populateCache: (cart) => cart,
    // ... and do not need to revalidate/refetch here again
    revalidate: false,
  };

The add-to-cart button now triggers the mutation and instantly conditionally renders another Modal Component after clicking.
Within this Modal component we need to show an error message in case our add-to-cart mutation failed.

So the idea was to also load the "useCart" hook within that Modal component and access the mutation error, instead of passing the error down from the outer Component to the modal.

But within this Modal component, the mutation error is always undefined, so we can't access the error.

Somehow we are not certain if this is intended - so the mutation error is not persisted across "useCart" instances or if this is a bug. I hope I was able to explain properly - otherwise I can try to create reproducable code. I can't unfortunately share the whole code.