Pagy with Turbo

[KillWolf]

Hey all,

We are working on a Rails app where we need to do pagination in a modal. By default, the pagination gets a new page. This removes the modal, and of course, defeats the purpose.

The way to circumvent this with Turbo is to use turbo_frame_tag with the Pagy HTML element inside, i.e:

<%= turbo_frame_tag "id" %>
    <%= render @collection %>
    <%== pagy_nav(pagy) %>
<% end %>

The next issue we have encountered is that we want to include a search that updates the HTML here above with an updated collection. It is achievable through Turbo streams in a POST action in the controller. It replaces the element with a new element with the desired collection.

(It should be noted, we have extended the Pagy functionality with Searchkick.)

However, Pagy now stops working. I see it sets the link href to the POST action's name, which is my assumption why it does not work.

Is there any known pattern to make it work, even with turbo streams such as this?

(Search also works with the Turbo frame tag and I would love to use it. However, we don't get an updated collection to with which we can manipulate HTML. So we cannot create a zero state, since the collection still has its original size.)

[benkoshy]

A couple of alternatives:

Option 1:

• You can set turbo_streams on GET actions. For more information: Allow Turbo Streams with GET via data-turbo-stream hotwired/turbo#612 - you can pass in the relevant data-attribute to the pagy helper:

@pagy, @records = pagy(Record.all, link_extra: 'data-turbo-stream="true"') # untested

See here on how to customize the pagy front_end helper.

Of course you need to:

• allow for streams, in your controller and views.
• ensure that your search form uses a GET request, rather than a POST.

Option 2:

If you need to POST, then you would need your pagination links to trigger a POST request. You can choose whether you want to use a turbo_frame or stream. Here is the general paradigm in a blog post: https://benkoshy.github.io/2019/10/09/paginating-search-results-with-a-post-request.html

You may be able to trigger streams using request.js or a stimulus controller, or through some other means - I am not up to date on the latest PRs / PRs to be merged on the hotwire library, so I cannot say with confidence.

[KillWolf]

Hey guys,
Sorry for the late reply, Christmas holiday and all.

Thanks for the response, it's really great insight.

However, our solution was in the end by updating to the latest version (6) and use fragment and request_path to handle the change between actions.

Our initial pagination calls searchkick for a result set. If the user searches, we go to the post (to update all the things we need). In the post action, we tell pagy to go the get action but with updated params. This works like a charm.

Thanks for an absolutely wonderful gem.