3

I have Hotwire setup in my Rails app, but it doesn't update the index view with projects. I have a simple projects view:

<div>
  <ul role="list" class="mt-1 grid grid-cols-1 gap-1">
    <%= turbo_stream_from "projects" %>
    <%= turbo_frame_tag "projects" do %>
      <%= render @projects %>
    <% end %>
  </ul>
</div>

There is a projects/_project.html.erb partial, which just shows the individual project with a turbo frame:

<%= turbo_frame_tag dom_id(project) do %>
  <p><%= project.name %></p>
  <p><%= project.status %></p>
<% end %>

In the project model I added the stream:

after_create_commit { broadcast_append_to 'projects' }
after_update_commit { broadcast_replace_to 'projects' }
after_destroy_commit { broadcast_remove_to 'projects' }

Now when I add a project in the console, I see it is broadcasting:

[ActionCable] Broadcasting to projects: "<turbo-stream action=\"append\" target=\"projects\"><template>  <turbo-frame id=\"project_9\">\n    <li ... </li>\n</turbo-frame></template></turbo-stream>"

But in the view in the browser the project is not added. Only after a browser page refresh the project is shown.

It seems the broadcasting itself is fine, but that Rails doesn't know where to append the new project.

What is wrong?

John
  • 6,404
  • 14
  • 54
  • 106

2 Answers2

1

Turned out everything was OK, but I forgot to setup ActionCable properly. After adding Redis in cable.yml everything works fine.

John
  • 6,404
  • 14
  • 54
  • 106
0

Had a similar / the same problem. I was following the rails 7 demo from DHH.

Websocket updates worked from the browser, but not when I deleted or modified the model in the rails console. Even the boardcasting log message showed in the console, but nothing happened in the browser. After configuring cable from async to redis in development mode, it worked.

The proper config setting (working for me) I found here https://github.com/nijicha/rails-7-demo/blob/main/config/cable.yml

development:
  adapter: redis
  url: redis://localhost:6379/1

test:
  adapter: test

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  channel_prefix: demo_production
Kjell
  • 492
  • 1
  • 7
  • 15