How to prevent duplicate identical requests?

[Db-pckr]

Hi,

Due to the design of our front end architecture/events handling, we are in a position where sometimes duplicate itentical HTMX requests happen consequently. This is fixed with some custom js code that tracks each request being sent and specifically finalRequestPath, not allowing consecutive duplicate events. However, I was wondering if there is a more clever HTMX way to fix this problem?

Thanks

[Telroshan]

Probably not what you want since the doc marks it already as the default behaviour, but hx-sync allows you to configure how requests triggered while another one was already in flight, should behave.

drop - drop (ignore) this request if an existing request is in flight (the default)

If the 2 requests you're describing are happening from the same element AND within a short period of time (i.e. the second one happens before the first one got the response from the server), then hx-sync should match your needs

[Db-pckr]

I've tried hx-sync but it didn't do anything. The architecture changed a bit in the meantime, but let me show you the logic maybe it helps:
(Code uses hyperscript to trigger event with _="")

<div class="container-fluid" _="on load settle then trigger retrieve_data">
    <div name="filters">
          <div class="row">
            <div id="dropdown1" name="dropdown1" class="col-md-4" hx-get="dropdown1_endpoint"
                hx-trigger="load" hx-target="#dropdown1">
              <select name="dropdown1" hx-get="/dropdown2_endpoint/" hx-trigger="change" hx-target="#dropdown2" tabindex="-98">
                <option></option>
              </select>
            </div>
            <div id="dropdown2" name="dropdown2" class="col-md-4" hx-get="dropdown2_endpoint"
                hx-trigger="load" hx-target="#dropdown2" _="on change settle then trigger retrieve_data">
            <select></select>
            </div>
    </div>

<div class="row">
    <div id="data-div" class="col">
        <div id="data-to-render" name="data-to-render" hx-get="/get_data/"
            hx-trigger="retrieve_datafrom:Body" hx-target="#data-to-render" hx-indicator="#spinner, #data-div"
            hx-include="[name='filters']">
        </div>
    </div>
</div>

On page load -> dropdown 1 and 2 get loaded in -> after settle trigger retrieve_data (this is where duplicate event happens with the exact same request details).
On change of dropdown 1 -> trigger update in dropdown 2 -> triggering on load + retrieve_data.

Just to note, that I simplified the above html, in practice we have up to 7 dropdowns that work similarly in the filters div. In the past we used on change trigger retrieve data on the filters dropdown, but it was creating different problem with the request to retrieve data being sent before the dom had actually settled.

How would could hx-sync be implemented in this scenario?

[Telroshan]

Thank for the sample code! Put it on a JSFiddle to see what's going on, and could indeed observe the duplicate request.

Indeed, I tried hx-sync there and it doesn't work, because it seems the second request happens after the first one has already ended.

A workaround you could do, is to add a throttle modifier to hx-trigger

throttle:<timing declaration> - a throttle will occur before an event triggers a request. If the event is seen again before the delay completes it is ignored, the element will trigger at the end of the delay.

Check out this JSFiddle, where I've only modified the hx-trigger to hx-trigger="retrieve_data throttle:1s from:Body"
You'll have to inspect the network requests in the dev console as I was too lazy to mockup some templates here 😝
Before: without the throttle

After: with the throttle

You'd have to play with the timing value to match your real setup, I found out 500ms is not enough on the JSFiddle so I put in a whole second in there