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.

Where Next?

Popular in Questions Top

siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
myronmarston
The Elixir Typespec docs show the following syntax for keyword lists in typespecs: # ... | [key: type] # keyword lists...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
shahryarjb
Hello, I get Persian date from my client and convert it to normal calendar like this: def jalali_string_to_miladi_english_number(persi...
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New

Other popular topics Top

AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
johnnyicon
Hi all, I’ve just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I’m trying to use Postgres...
New
hariharasudhan94
lets say i have a sample like a = 20; b = 10; if (a &gt; b) do {:ok, "a"} end if (a &lt; b) do {:ok, b} end if (a == b) do {:ok, "equa...
New
AngeloChecked
What learn first? Rust or Elixir Hi Elixir community! I’m here because i want learn a new language. I’m a junior developer and mainly i ...
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
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
gausby
I asked this very same question on twitter and got some interesting feedback, but I thought it would be a good question to ask here as we...
1207 39297 209
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
jononomo
For some reason my phoenix channels are working for me in my local dev environment, but as soon as I deploy via Docker, I get a 403 error...
New

We're in Beta

About us Mission Statement