How to make an async call in the component update_many callback?

The update_many/1 callback let’s you make your update call more efficient by handing all update calls from the same component type all at once.

The documentation shows an example where instead of doing a query to the DB for each component, you do it only once inside the update_many/1 callback.

That’s great, but the DB call is still a blocking operation in the LV, meaning that if this query is slow, the LV component will also not finish loading until the callback is done.

The “obvious” solution for that would be to leverage LV’s async functionality by using start_async or assign_async, that way I can make the DB call not block anymore.

The issue now is that I’m back to doing one DB call for each async operation.

I can’t see how to still keep one DB call that update_many/1 allows but doing it without blocking the component.

The only way I can see that being possible right now would be to start a new process in the update_many/1 callback, and inside of it call a bunch of send_update for each component with its reply… Something like this:

def update_many(assigns_and_sockets) do
  ids =
    Enum.map(assigns_and_socket, fn {%{id: id, component_id: comp_id}, _socket} ->
      {id, comp_id}
    end)

  Task.start(fn ->
     results = ids |> Enum.map(fn {id, _} -> ids end) |> DB.get!()

    Enum.each(results, fn {id, comp_id} ->
      send_update __MODULE__, id: com_id, result: results[id]
    end)
  end)

  Enum.map(assigns_and_sockets, fn {assigns, socket} ->
    {assign(assigns, loading?: true), socket}
  end)
end

It is missing the code to handle the send_update message, but this should work. But doing something like this just feels wrong since I’m kinda just “re-implementing” the async operations (and, at least with the above code, without its great guarantees).

Why is this not already built-in in LV’s api? Or, if it is, where can I read more about it?

I’m currently doing something similar to your example, and the downside is that it makes testing tricky since can’t use render_async, so keen to learn a better approach as well…