Conclusion

There's a lot more required to actually get our search service to use these values and sort the results in the order provided.

I won't go over all of it, but I do want to tie everything together.

From the onset, our goal was to take what's in the url bar:

And get it into our search feature so we can filter and sort on the values.

First, I will show you the code that generates the sort function our search feature will use:

It's nice we wrote all those re-usable helper functions! That made the logic for these components much simpler.

And here is where we put it (mostly, finally) all together:

Now we can pass our filters and transformResults to our search feature and it will only return pages that match the ids we specified and in the same order as we specified them.

That's a lot of work just to enable creating ordered lists just via url params, isn't it!

I think it's worth it though. I enjoyed the process and I have a neat little tool I can leverage as I experiment building the website and its pages. A better solution may present itself, but for now, this is an idiomatic and intuitive way to create saved lists without requiring any data being saved to a server. This is excellent for my usecase: ad-hoc arrangements of data accessible by URL.

It's possible I'll never use this feature again. However, if it's useful, it may become central to how the application and pages work and the concept may be extended to enable writing even more powerful queries--just with URL query params. 😉

This method is certainly with its limitations. Browsers are only required to support 2048 characters in a URL, so your lists cap out at a certain length. Additionally, even modest page chains generate a large URL that is not entirely savory to look at. Eventually, I will need to allow users to create custom filters that are saved to the database. But for simpler use cases, I think it does the trick.

Thank you for tuning in and stay copacetic.

- Pat