T
TanStackβ€’3y ago
wise-white

Is it advisable to make heavy use of SearchParams?

hey πŸ‘‹πŸ½
It is tempting to handle a complete filter state in the address bar. Then the history works and it's a great user experience, but is it really advisable to handle a large filter state with the help of the SearchParams. I mean a pagination-filter with about 10 filter values, which also consist of complex types. Isn't it possible that you reach limits? Thanks
5 Replies
automatic-azure
automatic-azureβ€’3y ago
Last I checked, URLs in legacy browsers have a maximum size limit of 2,048 characters, with modern browsers exceeding 50,000. Should your URLs start approaching these limits, you could consider strategies for shrinking your URL sizes. Your use-case presented above certainly wouldn't reach these limits. Regarding complex types, your can always store your filters inside objects using your own JSON Parsing strategy. I'm currently doing this, and this is what the URL looks like.
http://localhost:3000/agreements?page=1&size=10&filters=(IsSearchOverdues~false~SortBy~CreatedDate~SortDirection~DESC~PickupLocationId~*48793~ReturnLocationId~*48793~Statuses~!*2~~AgreementTypes~!Internal~~StartDate~*2023-11-07~EndDate~*2023-11-08~VehicleTypeId~*33966~VehicleNo~RT-78)~
http://localhost:3000/agreements?page=1&size=10&filters=(IsSearchOverdues~false~SortBy~CreatedDate~SortDirection~DESC~PickupLocationId~*48793~ReturnLocationId~*48793~Statuses~!*2~~AgreementTypes~!Internal~~StartDate~*2023-11-07~EndDate~*2023-11-08~VehicleTypeId~*33966~VehicleNo~RT-78)~
This is with 9 search filters as well as pagination parameters. I'm using JSURL2 for stringifying the object of filters, but JSONStringify+Base64 Encoding would also suffice. This is the same thing with JSONStringify and Base64 encoding
http://localhost:3000/agreements?page=1&size=10&filters=eyJJc1NlYXJjaE92ZXJkdWVzIjoiZmFsc2UiLCJTb3J0QnkiOiJDcmVhdGVkRGF0ZSIsIlNvcnREaXJlY3Rpb24iOiJERVNDIiwiU3RhdHVzZXMiOlsiMiJdLCJBZ3JlZW1lbnRUeXBlcyI6WyJJbnRlcm5hbCJdLCJTdGFydERhdGUiOiIyMDIzLTExLTA3IiwiRW5kRGF0ZSI6IjIwMjMtMTEtMDgiLCJQaWNrdXBMb2NhdGlvbklkIjoiNDg3OTMiLCJSZXR1cm5Mb2NhdGlvbklkIjoiNDg3OTMiLCJWZWhpY2xlVHlwZUlkIjoiMzM5NjYiLCJWZWhpY2xlTm8iOiJSVC03OCJ9
http://localhost:3000/agreements?page=1&size=10&filters=eyJJc1NlYXJjaE92ZXJkdWVzIjoiZmFsc2UiLCJTb3J0QnkiOiJDcmVhdGVkRGF0ZSIsIlNvcnREaXJlY3Rpb24iOiJERVNDIiwiU3RhdHVzZXMiOlsiMiJdLCJBZ3JlZW1lbnRUeXBlcyI6WyJJbnRlcm5hbCJdLCJTdGFydERhdGUiOiIyMDIzLTExLTA3IiwiRW5kRGF0ZSI6IjIwMjMtMTEtMDgiLCJQaWNrdXBMb2NhdGlvbklkIjoiNDg3OTMiLCJSZXR1cm5Mb2NhdGlvbklkIjoiNDg3OTMiLCJWZWhpY2xlVHlwZUlkIjoiMzM5NjYiLCJWZWhpY2xlTm8iOiJSVC03OCJ9
other-emerald
other-emeraldβ€’3y ago
I just use the build in JSON.stringify and have never hit limits And I store A LOT up there πŸ˜‰
wise-white
wise-whiteOPβ€’3y ago
Great to hear!
rare-sapphire
rare-sapphireβ€’3y ago
How do you handle link sharing so links shared aren’t massive ? Like in Airtable I notice they include the view id in the url which loads all the filters and other metadata, but the url is shorter
other-emerald
other-emeraldβ€’3y ago
You can do this too, but it requires very fast backend storage and retrieval of the params.

Did you find this page helpful?