woutdp / live_svelte

Svelte inside Phoenix LiveView with seamless end-to-end reactivity
https://hexdocs.pm/live_svelte
MIT License
1.01k stars 37 forks source link

get data by ecto and pass it to front. error:Protocol.UndefinedError{protocol: Jason.Encoder #123

Closed youfun closed 2 months ago

youfun commented 2 months ago

I'm not sure if it was a bug or just an unsupported feature. or mabye i use it in the wrong way

When I use the live_view, it works. The code looks like the following:

#   index.ex

  def mount(_params,_session, socket) do
     user = socket.assigns.current_user.id

        socket =
          socket
          |> assign(:links, Links.list_links_by_user(user))

    {:ok , socket}
 end

#inde.html.heex
<h1 class="text-2xl font-bold">Links</h1>

<div :for={link <- @links}>
    <%= link.url %>
</div>

# 

When I switch to using Svelte instead, it stops working ande the page show me error:

NodeJS.Error at GET /links
got {:node_js_worker_exit, {{%Protocol.UndefinedError{protocol: Jason.Encoder,

I add a "render(assigns)" and not change the code in" def mount " The code looks like the following:

#   index.ex

  def render(assigns) do

    ~H"""

      <<.svelte name="ListLink"  props={%{links: @links}} socket={@socket}  /> 

  #ListLink.svelte

      <script>

          export let links

          console.log(links);

          </script>

      <p>hello</p>

the data i get by use ecto ,like this:


  %Test.Links.Link{
    __meta__: #Ecto.Schema.Metadata<:loaded, "links">,
    id: 1,
    url: "facebook.com",
    user_id: 1,
    user: #Ecto.Association.NotLoaded<association :user is not loaded>,
    inserted_at: ~U[2024-04-13 04:38:24Z],
    updated_at: ~U[2024-04-13 04:38:24Z]
  },
  %Test.Links.Link{
    __meta__: #Ecto.Schema.Metadata<:loaded, "links">,
    id: 2,
    url: "google.com",
    user_id: 1,
    user: #Ecto.Association.NotLoaded<association :user is not loaded>,
    inserted_at: ~U[2024-04-13 04:38:24Z],
    updated_at: ~U[2024-04-13 04:38:24Z]
  }
]

may i should use the live_json?

youfun commented 2 months ago

my env: Erlang/OTP 26 [erts-14.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.16.2 (compiled with Erlang/OTP 26)

  {:jason, "~> 1.2"},
  {:live_svelte, "~> 0.13.1"},
  {:phoenix, "~> 1.7.11"},

I moved the file from the example project, and the page(live_log_list.ex and LogList.svelte)works. This means the live_svelte environment is set up correctly.

youfun commented 2 months ago

I found a way to solve this problem. I added the Json.Encoder in the schema file, and then it worked.


 @derive {Jason.Encoder, only: [:id, :url, :user_id]}
  schema "links" do
    field :url, :string
    belongs_to :user, Test.Accounts.User

    timestamps(type: :utc_datetime)
  end

Is that the ideal way to fix this problem?"

woutdp commented 2 months ago

Good to hear you managed to solve this! This is the way to fix that issue. It's documented here: https://github.com/woutdp/live_svelte?tab=readme-ov-file#ecto