Quicklink causes desynchronizations between pages for users login and cart counter

[alessio-de-padova]

Hello, I am experiencing a problem with the synchronization of the between pages for whenever user interactions can lead to differences in the DOM. I don't know if this is more a request for clarification then a feature one, so excuse me in advance.

My application is based on liquid and many operations that could change the way the UI is presented to the user happen server-side. For example, both the cart counter and the menu (with account icon etc.) are filled with data coming from the server, which doesn't rely on operations made through JS client side. Fact is, when quicklink prefetches the link before the user logs in or add an item to the cart of course that link will hold the "previous" state so that when the user will navigate he will find either the account or the cart desynchronized. Let me specify that these operations don't happen in specific pages. Cart additions and logins can happen and redirect to a bunch of different urls so the idea of fixing the problem using the "ignores" property is unfortunately unfeasible.

What I wanted to understand then is if there was a way I could reset the cache state. The documentation says that the listen function returns a reset function. Can you tell me more about how it works? Cause it doesn't seem to change much. Previously prefetched links still lead to a desynchronized page.

The following is our quicklink script. We tried to do some experiments trying to call the return function from the listen method when some events happen. Still, it doesn't seem to reset and restart listening to the links.

Is there something I am missing?

`<script>
  function startQuickLink() {
    console.log("QUICKLINK STARTING")
    window.quicklinkReset = quicklink.listen({
      origins: true,
      ignores: [
          /\/api\/?/,
          /\/account\/?/,
          /\/cart\/?/,
          uri => uri.includes('apps/check-order-status'),
          uri => uri.includes('apps/return-and-exchanges'),
          uri => uri.includes('#'),
          uri => uri.includes('javascript:void(0)'),
          (uri, elem) => elem.hasAttribute('noprefetch')
      ]
    });

  }

  window.addEventListener('load', () => {
    startQuickLink();

    subscribe(PUB_SUB_EVENTS.cartUpdate, () => {
      console.log("window.quicklinkReset")
      window.quicklinkReset()
      startQuickLink()
    })

    subscribe(PUB_SUB_EVENTS.login, () => {
      console.log("window.quicklinkReset")
      window.quicklinkReset()
      startQuickLink()
    })
  });

</script>`