ukashazia

ukashazia

Socket resets when trying to render/mount LiveComponent

I’m facing an issue where the socket appears to get reset ( no data persisted ) when i try to navigate to parent with LiveComponent.
the mount/1 of component should receive socket from push_patch but there’s no data in socket whatsoever…

here’s my relevant code:

router

    live "/servers/:name/users", ServerShowLive, :server_users
    live "/servers/:name/info", ServerShowLive, :server_info

parent handle_event/3

 def handle_event("server_users", params, socket) do
    server_name = socket.assigns.server.name

    socket =
      socket
      # |> assign(server: socket.assigns.server)
      |> push_patch(to: "/servers/#{server_name}/users")

    {:noreply, socket}
  end

segment of parent with live component embedded

<%= if @live_action == :server_users do %>
    <div phx-mounted={JS.set_attribute({"aria-checked", "true"}, to: "#server-users-btn")}>
      <%= live_component(DopplerWeb.ServerUsersLive , id: @server.name, server: @server) %>
    </div>
  <% end %>

mount/1 of component

def mount(socket) do

    IO.puts("Socket Component")
    IO.inspect(socket)
    # more stuff here

I’ve read the documentation several times, ChatGPT’d and losing my sanity over this.

Marked As Solved

sodapopcan

sodapopcan

Live components have their own socket struct which is separate from their parent. push_patch isn’t sending the socket to the component, it’s merely performing a request to /servers/#{server_name/users and patching the DOM with the diff. I’ll admit I’m not entirely clear on exactly what you’re doing as you left out the #server-users-btn. I feel like maybe you’d do better with just a <.link patch={...}>?

In any event, in order to receive assigns in a live component, you do so in update/2, which gets called immediately after mount/1 as well as any time the component gets updated:

def update(assigns, socket) do
  socket =
    socket
    |> assign(:id, assigns.id)
    |> assign(:server, assigns.server)
  # or simply socket = assign(socket, assigns)

  {:ok, socket}
end

Also Liked

sodapopcan

sodapopcan

It’s a confusing at first, I agree, and it’s an assumption a lot of people make. mount/1 can be used to initialize any assigns with defaults, like in ye olde counter example:

def mount(socket) do
  {:ok, assign(socket, :count, 0)}
end

update/2 could also be thought of as handle_assigns though update is the better name since it’s called whenever the component is updated.

Last Post!

sodapopcan

sodapopcan

It’s a confusing at first, I agree, and it’s an assumption a lot of people make. mount/1 can be used to initialize any assigns with defaults, like in ye olde counter example:

def mount(socket) do
  {:ok, assign(socket, :count, 0)}
end

update/2 could also be thought of as handle_assigns though update is the better name since it’s called whenever the component is updated.

Where Next?

Popular in Questions Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 records...
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New

Other popular topics Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
axelson
This post is a wiki (feel free to hit the edit button near the bottom right of this post to add your own changes!) This post collects co...
239 49134 226
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
romenigld
I am trying to run a deploy with docker and I successfully runned with this command: docker build -t romenigld/blog-prod . but when I t...
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New

We're in Beta

About us Mission Statement