So currently to persist our active filters, we are manually plopping that onto the end of our generated pagination URLs,
because that's not information that we can directly add into the base URL for the paginator. However, there is a method that I happen to overlook whenever we were recording our pagination lesson
that I wanna circle back on and cover here today. This will allow us to get rid of our use of the query string module from Node.js. We can get rid of this line here altogether, and we can go ahead and scroll on up
and get rid of that import there as well. And additionally, we were looping over our generated pagination items, and that's where we were appending the query string on for those.
This is our one, two, three, four, five links, so on and so forth. So we can go ahead and get rid of that there as well. And it looks like we were also passing query string directly into the page, so we can get rid of that too.
With all of that out of the way, we can replace each and every single one of those with a single call from movies, which is our simple paginator result from Lucid.
There is a .queryString method that will take a key value pair, and it will apply that to any of our pagination generated URLs.
For example, whatever we call getURLsForRange here, it will use whatever query strings we provide here into those generated URLs for range. And we happen to have our query strings
directly accessible as a key value pair as filters, which we have coming directly from our validator. So with this simple line here, we have just replicated everything that we've just removed.
This was on our watchlist controller. We also need to apply this on our movies controller here as well as we were doing the exact same thing. So we get rid of our query string, scroll up, get rid of that import too,
scroll down a little bit, get rid of our individual paginator item appending of the query string, and get rid of QS from the page as well.
Then we'll scroll on up, do movies.queryString, and apply in our filters there too. Then let's go ahead and jump into those pages. So we'll jump into our pages, movies, index page
by hitting command and clicking on it, because we're generating URLs using getURL for the first and last page links here as well.
So we can get rid of the query string for those too. So we get rid of it there. We can get rid of it on our previous, just like so. Scroll down a little bit further,
down to where we have our next, get rid of it there. Scroll down a little bit further to our last and get rid of it there too. Do a quick search to make sure
that we weren't using query string anywhere else. So far so good. Yep, our filters are using the filters key that we were providing. So everything there looks good. We need to jump into our watchlist controller
to jump down quickly to our pages watchlist too and do the exact same thing. So scroll on down to where we have our pagination links. Don't see anything there. Scroll down a little bit further. Here we go.
Here they are. Go ahead and get rid of the query string appending there too for each one of these links. So there's previous. We'll scroll down past the numbered and go to our next,
get rid of it there, and then scroll down to our last and get rid of it there too. With that applied, we should be able to jump into our browser and everything should work the exact same as before, just with a vast simplification
of reapplying our query string onto all of our pagination links. So let's give our browser here a refresh just for sanity's sake. And if we take a look at our first page, the little tool tip down here
in the bottom left-hand corner looks exactly right. It's reapplying everything and it also has the page number there too. Give that a click. Everything there worked. Take a look at one. That looks right.
Take a look at two. Go ahead and give that a click. Everything persisted. Awesome. Three looks right. We'll go down to next, click on that. We jumped to three, keeping all of our pagination items. Awesome.
And finally, our last. That looks good too. Cool. While we're here, let's go ahead and log in. We have, I think, test2test.com and some password there to log in as our John Doe.
Let's jump into their watch list. Apply some filter. Hit next. And okay, we only have one page for this, but we can see that the page here looks correct as well.
Let's go ahead and clear out the watch list items and make sure that it looks good there too. Yep, just has page. Let's do the exact same thing for our movies. Jump down, take a look at these.
Yep, those just have page two. Awesome. So everything there is working A-okay. Apologies that I had overlooked this method initially, but at least it's covered. We know about it now
and we can make use of it going forward to keep our pagination simple.
Persist Filters Easily with Lucid's Query String Method
In This Lesson
Learn how to simplify pagination by persisting active filters with the query string method. Follow this step-by-step guide to clean up your code, apply the .queryString method from Lucid, and ensure seamless pagination for your web applications.