nareshbhatia / mobx-state-router

MobX-powered router for React apps
https://nareshbhatia.github.io/mobx-state-router/
MIT License
227 stars 31 forks source link

queryStringifyOptions provided to RouterStore are ignored #147

Closed cmolenda closed 1 year ago

cmolenda commented 1 year ago

Problem https://github.com/nareshbhatia/mobx-state-router/issues/64, fix version https://github.com/nareshbhatia/mobx-state-router/commit/61eeb475d490afe8bc70552c4d67000d78185aed#diff-47052a903b896d9f6a8eacf0c7c690acR70, introduced options to change query-string's params parsing and stringify configuration by passing specific key/value pairs as part of the options argument in RouterStore's constructor.

This works for parsing the parameters but not stringifying. If you attempt to parse or stringify using a different configuration, the initial parsing will be correct, but stringify will not, resulting in one or more changes to the route's query params and subsequent rerouting and further mutation of the URL's query params

Request Fix usage of queryStringifyOptions in routerStateToUrl

Details routerStateToUrl passes the RouterState's options to generateUrl instead of the RouterStore's options, so the user provided query-string configuration is ignored.

cmolenda commented 1 year ago

@nareshbhatia Let me know if/how you'd like this spec'd. I tried to create a test that wouldn't duplicate generateUrl functionality coverage by mocking out generateUrl for tests on routerStateToUrl, but it got pretty complex (and failed in the end).

cmolenda commented 1 year ago

Demo of code and initial bracket based query string going through multiple mutations due to rerouting. There is a breakpoint off screen which is pausing between each reroute.

For clarity, at seconds 8 -> 9, you'll see the URL lose all of it's brackets because the stringify is not honoring configuration. This ultimately results in a reroute.

At seconds 12 -> 13, you'll see the first "airport_code" be overwritten by the second "airport_code" param due to the incompatibility between parse and stringify, rerouting again.

https://user-images.githubusercontent.com/30284/209839666-6077d9f1-a410-4dca-854d-55bf833af8b4.mov