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

[gregjotau]

@Telroshan

<button hidden
        hx-include="#ticketId, #aiResponseTextArea"
        hx-indicator="#aiResponseTextArea"
        hx-post="accept_ai_response"
        hx-swap="outerHTML"
        hx-target="#new-ticket-data"
        hx-target-error="#error-message-from-backend"
        hx-trigger="keyup[key=='a' &&
                         !event.target.matches('input, textarea, sl-textarea, sl-input')] throttle:2000ms from:body,
                   keyup[key=='Enter' && ctrlKey] throttle:2000ms from:body"
        id="accept-response"
        type="submit">
    Send response & action (a or Ctrl+Enter)
</button>

This button is sending duplicate requests, I test now with 2000ms to see if that works, but even with 1200ms duplicate requests were sent.

Is there any other new way to solve this? Can I use hx-sync on the same element with drop, should

hx-sync="#accept-response:drop" work for example?

[Telroshan]

The OP's issue was due to the fact that 2 separate elements in the DOM would trigger the same custom event, that a 3rd element in the DOM would listen on.

In your case, since it's a single element having 2 different event listeners (A key within an input and Ctrl+Enter keys), throttling should work, though with a not-well-documented gotcha.
First, see this JSFiddle to illustrate the following:

<button .... hx-trigger="keyup[key=='a'] throttle:2000ms from:body,
                         keydown[key=='b'] throttle:500ms from:body">

Even though throttling is defined per trigger spec, it actually applies per element when triggered. If you play with the fiddle above, you'll notice that:

• Hitting A will prevent any other request from happening during 2 seconds, no matter if you hit A or B
• Hitting B will prevent any other request from happening during 500 ms, no matter if you hit A or B

Side note: honestly, I'm not sure that's an intended behavior, as I would have expected the throttling to apply per event instead (and maybe even per trigger spec), just found this out while trying things to answer your message.

Note that in your case, that shouldn't be an issue as you fortunately defined the same throttling delay on both your keyup triggers (2000 ms).

As shown in the fiddle above, your code should already prevent duplicate requests (I've simplified the layout but it remains a very very similar setup to yours).
So, you probably have an issue elsewhere, maybe another element that's triggering requests?
If not, could you setup a minimal reproducible example to be able to investigate more on that issue?

Hope this helps!

[gregjotau]

It might have been that the user of the app did not refresh the page (to get the new higher throttle value), I will get back to you if it keeps being an issue!

I tested the JSfiddle, and you're right, requests are blocked when I repeatedly press 'a'.

[gregjotau]

@Telroshan I unfortunately still randomly get duplicate requests even with 2000ms throttle:

    hx-trigger="keyup[key=='a' &&
                     !event.target.matches('input, textarea, sl-textarea, sl-input')] throttle:2000ms from:body,
               keyup[key=='Enter' && ctrlKey] throttle:2000ms from:body"

I have now added a server-side check for duplicate requests for now. What is the easiest way to tell HTMX to just ignore this second response? 😅 (as I don't want it to swap out anything in that case). One idea I have is to use response-targets and set a specific HTTP status code to mean "don't do anything". But it is not clean to put it mildly. Alternatively just rewrite to using other HTMX features or plain javascript for this if the htmx shortcuts does not work reliably 🙏

[Telroshan]

I think it's really something that needs to be fixed on the client side, it really is not normal that you still get duplicate requests with the throttling. The server shouldn't have to care about this.
Could you add a htmx:beforeRequest event listener on say the body and console.log the whole event object ? For example, it could be that you simply have 2 different elements firing the requests, while the throttling only applies to that hidden button
Checking what differs between those 2 requests' event object might reveal what's happening

[gregjotau]

@Telroshan It was indeed two buttons with the same hx-post 😅

I had one place where the whole file (with buttons for actions) was sent as response instead of the fragment, leading to sometimes two buttons that fired based on hx-post.