Eager loading by making a request to a different controller not working

1

Hello there. I’m new to Hotwire and I’ve had some trouble understanding some of the Turbo features explained in the Handbook.

In my users#edit view I want to use a turbo-frame tag to eager load the @user.pets . To keep things organized I want to use the Users::PetsController to fetch a given User’s pets.

In my Users#edit view I have the following:

<turbo-frame id="user_pets" src="/users/<%= @user.id %>/pets">

</turbo-frame>

When I visit /users/1/edit, I can see in the server logs that the turbo-frame tag is making a request to /users/1/pets as expected:

Started GET "/users/1/pets"
Processing by Users::PetsController#index as HTML

Here’s what my #index action looks like in Users::PetsController:

    def index
      respond_to do |format|
        format.html do
          @pets = @user.pets
          render turbo_stream: turbo_stream.replace("user_pets", partial: 'users/pets/index')
        end
      end
    end

Which as I understand it is instructing Turbo to replace the contents of the turbo-frame tag with id="user_pets" with whatever is in the `users/pets/index’ partial.

My users/pets/index partial has the following placeholder:

<turbo-frame id="user_pets" >
  PLACEHOLDER
</turbo-frame>

However, when I visit /users/1/edit, the turbo-frame tag shows “Content missing” and my browser console displays the following error:

Uncaught (in promise) Error: The response (200) did not contain the expected and will be ignored. To perform a full page visit instead, set turbo-visit-control to reload.

Could someone point out if I’m missing something? Any help would be appreciated.