Timeout in nested async loading data

Questions / Help
, , , ,
1

Hi,
I am using Async Operations for nested data loading.

I am getting this issue.

[error] GenServer #PID<0.1134.0> terminating
** (stop) exited in: GenServer.call(#PID<0.1124.0>, {:phoenix, :child_mount, #PID<0.1134.0>, []}, 5000)
    ** (EXIT) time out
    (elixir 1.15.5) lib/gen_server.ex:1074: GenServer.call/3
    (phoenix_live_view 0.20.0) lib/phoenix_live_view/channel.ex:1227: Phoenix.LiveView.Channel.sync_with_parent/2
    (phoenix_live_view 0.20.0) lib/phoenix_live_view/channel.ex:1206: Phoenix.LiveView.Channel.mount_private/6
    (phoenix_live_view 0.20.0) lib/phoenix_live_view/channel.ex:1120: Phoenix.LiveView.Channel.verified_mount/8
    (phoenix_live_view 0.20.0) lib/phoenix_live_view/channel.ex:84: Phoenix.LiveView.Channel.handle_info/2
    (stdlib 5.0.2) gen_server.erl:1077: :gen_server.try_handle_info/3
    (stdlib 5.0.2) gen_server.erl:1165: :gen_server.handle_msg/6
    (stdlib 5.0.2) proc_lib.erl:241: :proc_lib.init_p_do_apply/3
Last message: {Phoenix.Channel, %{"params" => %{"_csrf_token" => "RT1MdmI9VRohQjFvOxl2PjIfEyQUBzwv7oyA4ogQGwf8ip2NjOrwaWMW", "_mounts" => 0, "_track_static" => ["http://localhost:4000/assets/app.css", "http://localhost:4000/assets/app.js"]}, "session" => "SFMyNTY.g2gDaAJhBXQAAAAHdwJpZG0AAAAJc2VhcmNoYmFydwdzZXNzaW9udAAAAAB3CnBhcmVudF9waWRYdw1ub25vZGVAbm9ob3N0AAAEZAAAAAAAAAAAdwZyb3V0ZXJ3GUVsaXhpci5BZ3JvZ3JhbVdlYi5Sb3V0ZXJ3BHZpZXd3IEVsaXhpci5BZ3JvZ3JhbVdlYi5TZWFyY2hiYXJMaXZldwlyb290X3ZpZXd3IUVsaXhpci5BZ3JvZ3JhbVdlYi5QcmljZUxpdmUuU2hvd3cIcm9vdF9waWRYdw1ub25vZGVAbm9ob3N0AAAEZAAAAAAAAAAAbgYA0n9gdYsBYgABUYA.ylzLKHRc-L6-39_DSxgkeLIjd9OczQvmzCW4eqHnuLw", "static" => "SFMyNTY.g2gDaAJhBXQAAAADdwJpZG0AAAAJc2VhcmNoYmFydwVmbGFzaHQAAAAAdwphc3NpZ25fbmV3am4GAON-YHWLAWIAAVGA.dUhUNCv0tZ0YvPzo_7ZwRhM8XJj_8lErNmUUuGzehCQ"}, {#PID<0.1116.0>, #Reference<0.354572577.3625451524.97946>}, %Phoenix.Socket{assigns: %{}, channel: Phoenix.LiveView.Channel, channel_pid: nil, endpoint: MyAppWeb.Endpoint, handler: Phoenix.LiveView.Socket, id: nil, joined: false, join_ref: "10", private: %{connect_info: %{session: %{"_csrf_token" => "rR57VR2Kf5WWRiDpXPaSuPqx"}}}, pubsub_server: MyApp.PubSub, ref: nil, serializer: Phoenix.Socket.V2.JSONSerializer, topic: "lv:searchbar", transport: :websocket, transport_pid: #PID<0.1116.0>}}
State: #Reference<0.354572577.3625451521.118581>

My Implementation
show.ex

  @impl true
  def mount(_params, _session, socket) do
    {:ok,
     socket
     |> assign(
       article: AsyncResult.loading(),
       article_list: AsyncResult.loading()
     )}
  end

  @impl true
  def handle_params(%{"slug" => slug} = params, _url, socket) do
    {context, entity_id} = get_slug_details(slug)

    {:noreply,
     socket
     |> assign(
       slug: slug,
       context: context,
       entity_id: entity_id
     )
     |> start_async(:fetch_article, fn ->
       get_article({context, entity_id})
     end)}
  end

  def handle_async(:fetch_article, {:ok, fetch_article}, socket) do
    %{article: article} = socket.assigns

    {:noreply,
     assign(socket,
       article: AsyncResult.ok(article, fetch_article)
     )
     |> start_async(:fetch_article_list, fn ->
       get_article_list(fetch_article.type)
     end)}
  end

  def handle_async(:fetch_article_list, {:ok, {_title, fetch_article_list}}, socket) do
    %{article_list: article_list} = socket.assigns

    {:noreply,
     assign(socket,
       article_list: AsyncResult.ok(article_list, fetch_article_list)
     )}
  end

  def handle_async(:fetch_article, {:exit, reason}, socket) do
    %{article: article} = socket.assigns
    {:noreply, assign(socket, :article, AsyncResult.failed(article, {:exit, reason}))}
  end

  def handle_async(:fetch_article_list, {:exit, reason}, socket) do
    %{article_list: article_list} = socket.assigns
    {:noreply, assign(socket, :article_list, AsyncResult.failed(article_list, {:exit, reason}))}
  end

.html.heex

<.async_result :let={article_list} assign={@article_list}>
  <:loading>Loading</:loading>
  <:failed :let={_reason}>there was an error loading</:failed>
  <.live_component
    module={MyApp.Components.ArticleListComponent}
    id="list"
    article_list={article_list}
  />
</.async_result>

Please help me. what is wrong in my implementation.