Streams becomes empty in LiveComponent

Phoenix Forum Questions / Help
, , ,
1

I’m currently developing an application using Phoenix LiveView and encountering an issue with handling a large amount of data fetched from the database. I’ve decided to use streams to manage this data due to its volume. To reuse the layout for displaying the data, I am utilizing LiveView Components.

I have designed the components to contain the streams internally. I use send_update/2 from outside the component to send incremental updates, which are intended to be appended within the component. Initially, everything displays as expected. However, when I send additional data later, the contents of the stream seem to reset, causing previously displayed data to disappear from the view.

I have checked socket.assign inside the update/2 of the component, and it appears empty at this point. Are there any restrictions on using streams within LiveView Components, or could there be another cause for this behavior?

Any guidance or suggestions on how to resolve this would be greatly appreciated.

Elixir: 1.17.2-otp-27
Phoenix: v1.7.14
liveview: 1.0.0-rc.6

Here is the code for the component. I’ve omitted the rendering part, but this includes all the function definitions.

defmodule MyAppWeb.DataViewerComponent do
  use MyAppWeb, :live_component

  @impl true
  def render(assigns) do
    ~H"""
    <div class="w-full">
      <%= for {_id, item} <- @streams.items do %>
        ...
      <% end %>
    </div>
    """
  end

  @impl true
  def mount(socket) do
    {:ok, stream(socket, :items, [])}
  end

  @impl true
  def update(%{msg: msg}, socket), do: {:ok, update_stream(socket, msg)}

  @impl true
  def update(assigns, socket), do: {:ok, assign(socket, assigns)}

  defp update_stream(socket, {:update, items}), do: stream(socket, :items, items)
  defp update_stream(socket, {:reset, items}), do: stream(socket, :items, items, reset: true)

Additionally, this is the code for the parent that handles the updates.

  def notify_update(msg) do
    send_update(ImagineWeb.TimelineComponent, id: "timeline", msg: msg)
  end

P.S.: I believe there are no additions, deletions, or state changes occurring in the DOM where this component is included.

Thanks!

2

It might be that your whole LiveComponent is remounted instead of updated. You can check if mount/1 is called again or not.

3

Thank you for your advice. But unfortunately mount/1 is called only once. I’ve checked it with IO.inspect/2.

4

Hi @TenTakano! Welcome to the forums :wave:.
Quick question: where is your phx-update="stream" defined?

1 Like
5

where is your phx-update="stream" defined?

Thank you so much!! I realized my misunderstanding.
Actually, I didn’t write phx-update to the markup. Now, the application works properly.

1 Like