Array Parameters

[ImTheDeveloper]

Do you want to request a feature or report a bug? Question

What is the current behavior? Currently the URL is parsing arrays only if set as: /?studies=history_french_english_advanced_statistics

I then find my props show: ["history","french","english","advanced","statistics"]

advanced statistics is infact a single item.

When studies is set as: studies: { type: UrlQueryParamTypes.array, queryParam: 'studies' }

What is the expected behavior? I'm unsure why I can not use: /?studies[]=history&studies[]=english&studies[]=advanced_statistics

["history","french","english","advanced_statistics"]

Is there a reason that they are implemented in this way? The expected behaviour can handle parameters which may legitimately inlcude a _ symbol.

[bdefore]

There is an entrySeparator property here: https://github.com/pbeshai/react-url-query/blob/master/docs/api/configureUrlQuery.md where you can have it use another delimiter, but I was unable to see how to pass this into the RouterToUrlQuery for use in React Router v4.

[pbeshai]

@bdefore You can configure the default separator strings via that configureUrlQuery method anywhere in the app. Typically in index.js. You just have to call that function and it will mutate the settings used by the singleton instance.

@ImTheDeveloper Why you can't use that is probably because I find it needlessly verbose and prefer the shorter character delimited approach used by the default array type provided by the lib. As @bdefore mentioned, you can change the entry separator globally to another string or you can create a custom type with its own defined encode/decode methods. If you'd like to support multiple entries of the same query param and have it collected in an array, there's problem some reasonably easy way to modify the codebase to do so!

[matepaiva]

Just using this thread to raise another scenario. When I have a search that change page, I am using query-string package stringify to convert my properties to string and pass it to history.push. But this could cause an issue, once query-string stringify method doesn't follow the same pattern as react-url-query. What do you recommend in this situation? Is there anyway to change route using react-url-query, or maybe a way to use only its stringify?

[pbeshai]

Here's an example of configuring a query param q to be used to capture search queries:

const urlPropsQueryConfig = {
  searchQuery: {
    type: UrlQueryParamTypes.string,
    queryParam: 'q',
    updateType: UrlUpdateTypes.pushIn,
  },
};

Setting the updateType to push or pushIn means it will push onto the history stack.

If you're not happy with the default encoders/decoders for converting from/to strings for the URL, you can provide your own via passing functions to the type property. See an example here

[pbeshai]

FYI in creating https://github.com/pbeshai/use-query-params, I've switched the default array style to be the repeated type. My plans for 2.0 of this library will include updating to use that style too and the https://github.com/pbeshai/serialize-query-params to do it

[pencilcheck]

How do we use serialize-query-params in the current library? I'm following the "redux-actions" example but not sure how to do it.