Could not apply attribute changes: the buyer journey is completed

Extensions
1

@shopify/ui-extensions-react version 2024.4.2

When I use useApplyAttributeChange sometimes the error “Could not apply attribute changes: the buyer journey is completed” occurs.

I don’t see any references to this error in documentation, could someone help me interpret what is going wrong and how to prevent the error?

Here is a simplified version of my source:

function useSomeHook() {
   const applyAttributeChange = useApplyAttributeChange();
   const [stateValue, setStateValue] = useState('some-value');
   useEffect(() => {
      (async () => {
            const result = await applyAttributeChange({
               type: 'updateAttribute',
               key: 'some-key',
               value: stateValue,
            });
            if (result.type === 'error') {
               console.error(result.message);
            }
      })();
   }, [stateValue, applyAttributeChange]);
}

I’m assuming the problem is that the asynchronous effect is finishing after the buyer journey is completed. Because useApplyAttributeChange returns an asynchronous callback, I am not sure how to update attributes synchronously?

Thanks in advance!

2

Hi masonmcelvain,

The error message “Could not apply attribute changes: the buyer journey is completed” does back up your instinct that the useApplyAttributeChange function is being called after the checkout process has already been completed. This is likely because the asynchronous operation is attempting to modify attributes when the checkout is no longer in a state to accept changes.

To address this, you should ensure that attribute changes are applied only during the active phases of the checkout process. Here’s a couple strategies you could try:

  1. Check the Checkout State : Before applying changes, verify that the checkout is still active. This might involve checking specific conditions or states within your extension to ensure that the buyer journey is not completed.
  2. Use Effect Dependencies Wisely : Ensure that the dependencies in your useEffect hook are correctly set so that the effect only runs when necessary and during valid states of the checkout process.
  3. Error Handling and Retry Logic : Implement error handling to catch this specific error and potentially retry the operation if appropriate, ensuring that retries are only attempted when the checkout is in a valid state.If these strategies do not resolve the issue, or if you need further assistance, it may be beneficial to consult with an agent who can provide more detailed support specific to your implementation.
1 Like