Draft Order line items not reflected in UI after changes

Hi,

We are adding a draft order ui-extension block to our app which provides the ability for a user to add some products that are related to items on the draft order. For example, you can add a snowboard to the order, and then the user is presented with the app block to show some specific products they can add to the draft order.

One of the issues that we’re finding is that after using the draftOrderUpdate, the order line items are not updated automatically. The user has to manually refresh the page for the changes to be reflected. We have also attempted to initiate the “Save” bar at the top after our app block makes some changes, but even that won’t reflect the newly added line items.

This works differently from the main order detail page where changes to the order are reflected. Is this something that can be updated on the draft order page? This ultimately causes a poor user experience if app blocks are adding/editing line items on the draft order.

This is likely related to this topic:

Regards,
Ben

Hi Ben. We’re looking into this now. Thanks!

Ben - This should now be fixed. Let me know if you’re still seeing issues.

Hey @Mitch_Lillie! I’m testing this on our end and I’m not seeing any difference. What behavior has changed on your end? Possible something just hasn’t rolled out yet?

Specifically our flow is Admin UI block → opens Admin UI action and makes a direct API call to shopify graphQL that adds/updates an order item. We’re hoping that the Draft Order products would automatically update without us having to refresh. I’m still having to refresh to see any updates.

Thanks so much for the help!

Tried this again today and notice that the UI is automatically updating when line items are added or removed! :tada:

Updating an existing line item by UUID, say quantity 1 → 2 doesn’t seem to update until a hard refresh but I will note that there’s no delay like there was previously in which you might have needed multiple hard refreshes. Was the intention for those cases to automatically update as wel

EDIT: I will note that changing the quantity (or product) isn’t reflecting in the UI until refresh BUT the subtotal/total are updating on the fly.

Some screenshots showing what we see, here is the state after adding our items with our Block/Action. The draft order is correctly updated with no reload:

Lets say they decide to use our block to update the Protection Plan to cover both Espresso Macines

Hitting that will then trigger a single draftOrderUpdate call (the same one used to add the items initially). The resulting state is:

Interestingly, you can see the Payment Section references 5 items. Our draft order block re-renders and the draft order pulled in also knows that the Extend Protection Plan quantity was updated to 2. You can see that the subtotal reflects an updated correct amount (though the tax does not recalculate).

If I then hard refresh at any point it becomes correct:

Hi Ben, thanks for the update, we can confirm that the quantity change is still an issue. We are looking into it now.

Hi,

I am having the same initial problem here. I am calling

const newLineItems = \[

    ...currentLineItems,

    { variantId: variant.id, quantity: 1 }    \];

const updateResponse = await query(DRAFT_ORDER_UPDATE_MUTATION, {
variables: {
id: draftOrder.id,
input: {
lineItems: newLineItems}      }    });

However, this never updates the draft order in the page. It just updates if I manually refresh the page. Is there anything that has to be done on my side so that the page updates as well? @ben_extend , could you share the exact piece that you are doing the mutation on your end so that I can compare with mine, please?

Nevermind, it seems that you must submit it via action and not via block in order for it to update.

This is still happening, especially on redirect from embedded app, to the draft order detail page.

  1. Embedded app calls “draftOrderUpdate” mutation on the backend, updating line items.

  2. After mutation is done, app redirects the merchants back to the draft order detail page (https://admin.shopify.com/store/draft_orders/1234), from the app.

  3. The draft order detail page still shows the stale previous line items, merchants have to manually refresh the page to see the latest changes

@Mitch_Lillie This seems to have once again become an issue. Updating/Editing a draft order and returning to the native draft order page does not show the updates. It often takes several refreshes to see the changes. This ‘was’ fixed in recent times, but has become a serious issue again over the last week

Worth checking whether your app is doing the update from a UI extension block vs an action, someone upthread found that submitting through an action (not a block) is what actually triggers the page to refresh. If you’re already using an action and still seeing it, that’s a regression worth its own report since it sounds different from the original bug.

Thanks for flagging @soulchild and @Horselditty. We’re looking into it and will provide an update soon.

Hi @Paige-Shopify, any progress on this?
Thanks

@Horselditty we have deployed a fix to resolve this. Can you confirm if you’re still encountering this issue?

The issue is still happening, after calling draftOrderUpdate mutation, the draft order detail page still shows the previous line items data, it takes multiple refresh + 1 minute of delay, to see the latest changes.

Can confirm that we have been seeing this as well for the past few days at least.

  1. Draft order attributes and line items are updated via an admin block UI extension.
  2. After the update is done, reload the draft order admin page.
  3. The queried draft order query shows the attribute and line item updates but the admin page does not.
  4. At least one more refresh is required to see the updates reflected on the draft order admin page.

Thank you both for sharing. Looking into this.

@Paige-Shopify It seemed there was some temporary relief (not perfect) from this issue, but it seems to be back worse than ever.

@Paige-Shopify just checking in on this :crossed_fingers: