Patterns for refreshing live component state in response to events?

Phoenix Forum Questions / Help
,
1

I have forms in my app modeled using LiveComponents (they’re in modals) that mostly manage their own state. The following is an example of one:

    <.live_component
      module={TransactionForm}
      id="..."
      transaction={...}
      open={@live_action in [:create, :edit]}
      on_success={&push_patch(...)}
      on_cancel={JS.patch(...)}
    />

The live component will fetch data in the mount callback that’s required for things like select inputs (e.g. list of merchants, accounts, etc.).

I haven’t really figured out a good pattern to handle refreshing of data managed by live components. For example, if I have another form in the live view that creates a new merchant, I would want the other forms in the page to refresh their state to reflect the new merchant. It’s easy to do this at the live view level using Phoenix PubSub. I can emit an event when the change is triggered and refresh the live view’s state in a handle_info callback.

Since live components don’t have this capability, I’ve identified a few alternatives:

  1. Manage all this state at the live view level. I tried this but it makes the component really hard to work with since it ends up requiring each live view to load a bunch of state just to pass through to the live component. To me it kind of defeats the point of the live component in the first place.

  2. Load data in update callback instead of on mount. This will ensure that the live component will always have the latest data since it will just refetch it every time it opens / closes. The downside is that most of the time the refetching was not needed.

  3. Use send_update as a mechanism to send an event to the live component to tell it to reload state. I don’t like the idea of the caller literally settings assigns that it shouldn’t otherwise know about, but I did consider exposing a function from the live component module that could be called in the live view’s handle_info callback. It’s a little manual, but probably would work? An example:

defmodule TransactionForm do
  def refresh_data(id) do
    merchants = ...
    send_update(pid, id, merchants: ...)
  end
end

If live components could handle their own events I think that would solve the problem for me, but I understand the limitations of that given they share the process with the parent live view. Very interested in hearing how others are addressing this problem!

1 Like
2

I use send_update. It is the example in the Live View docs for your scenario.

https://hexdocs.pm/phoenix_live_view/Phoenix.LiveComponent.html#module-livecomponent-as-the-source-of-truth

3

Makes sense! I ended up going with a hook that’s defined in the live component as to avoid leaking implementation details about internal state.

  def attach_refresh_hooks(socket, id) do
    attach_hook(socket, :refresh_transaction_form_data, :handle_info, fn _, socket ->
      send_update(__MODULE__, id: id, _refresh: true)
      {:cont, socket}
    end)
  end

Which gets called in the mount callback of live views that use it.

1 Like