Preserve params when push_patch from handle_event

URLs are essentially global/shared state for all liveviews/components on a single page, so my suggestion is to consolidate modification of that state in a single place. A.k.a instead of your search or pagination component doing a push_patch let them trigger something on the parent liveview, which is aware of the current state of the URL and can “add” the changes on top.

What’s with calling handle_params from within mount? handle_params is called by the system. If you add some IO.inspect or Logger.debug commands in mount and handle_params you’ll see when and in what order it all happens.

Thank you for your reply! By sending messages as described in LiveView as the source of truth? It seems like a good idea and matching what docs say. They also explicitly say I can do live patches there, though, which confused me.

Thank you, good catch. Somehow I thought handle_params is only executed when you update params, not when you load the page. Now I see my assumption was wrong. I’ll update the code.

Or writing them as Function Components. Then you handle the event in the liveview. None of your components are managing their own state so could be Function Components.

That also might be a good idea. My motivation was to encapsulate into components handling of events generated by the components and live to the controller only dealing with URL queries. It seems like a good separation but now I’m not sure if it’s worth it. There are just a few lines of code in components anyway, not a big deal. I’m not sure if it will solve the issue, though, since LiveView.handle_event accepts all the same arguments as LiveComponent.handle_event and so also can’t preserve query params on URL patches.

I still can’t wrap my head around how to update the existing URL query.

1. LiveView.handle_event accepts all the same params as LiveComponent.handle_event
2. LiveView.handle_info (which I can trigger with send from LiveComponent) also doesn’t know anything about the current URL query.

The best I have in mind is to pass the query params in assigns of all components but then, I suppose, it will re-render the whole page, and then what’s even the point of having LiveView. And also it’s messy and easy to get out of sync. I’m wondering why the current URL isn’t in the socket in the first place.

UPD: what I mean is that I see many ways how to update the LiveView state for different kinds of events but I can’t see a clean way to keep the URL query in sync with these changes.

That’s certainly not the case. I have a LiveView that I set myriad URL query params on and they don’t get overridden. Though I keep the params in assigns so maybe I’m telling a fib

When you’re using the URL query params, you use handle_params to handle assigning anything that is associated with them. You don’t assign or update them elsewhere (i.e. in handle_event or handle_info). If you want to change them, you use push_patch.

You might find Sophie’s article on the topic useful, though she doesn’t seem to use push_patch.

  def self_path(socket, extra \\ %{}) do
    Routes.live_path(socket, __MODULE__, Enum.into(extra, socket.assigns.params))
  end

  defp patch(socket, extra) do
    push_patch(socket, to: self_path(socket, extra))
  end

  def handle_params(params, _uri, socket) do
    {
      :noreply,
      socket
      |> assign_params(params)
      |> assign_page(params)
      |> assign_search(params)
      |> assign_results()
    }
  end

  defp assign_params(socket, params) do
    assign(socket, :params, Map.take(params, ["page", "search"]))
  end

  defp assign_page(socket, %{"page" => page}) do
    assign(socket, :page, String.to_integer(page))
  end

  defp assign_page(socket, _params) do
    assign(socket, :page, 1)
  end

  def handle_event("submit", %{"search" => search_string}, socket) do
    {:noreply, patch(socket, search: search_string, page: 1)}
  end

  def handle_event("goto_page", %{"number" => number}, %{assigns: %{page: page}} = socket) do
    number = String.to_integer(number)

    if number == page do
      {:noreply, socket}
    else
      {:noreply, patch(socket, page: number)}
    end
  end

Just the friendly reminder to use mix phx.routes to figure out the Routes. function for your path; instead of Routes.live_path.

Related:

You’d probably use verified routes once you hit phoenix 1.7.