Instantsearch.js: Updating URLSync to routing

[senthil41189]

Hi,
We are using the instantSearch.js version 2.10.4 (https://cdn.jsdelivr.net/npm/[email protected]). Due to the recent warning to migrate to routing instead of urlSync, we are in process of making the change.
But unfortunately, the search results are not appearing once we update urlsync:true to routing:true

our url includes - > q=maths for the query parameter, which was working previously with urlsync.

we use,
appId, apiKey, indexName,urlSync, searchFunction,query , searchParameters in our instantSearch initialization.
Now we just updated urlSync to routing.

Any inputs on where we are missing out is much appreciated.

Thanks in advance.

[samouss]

Yes it's expected. The urlSync option does not use the exact same format than the routing option. The previous format was ?q=QUERY but the new format is ?query=QUERY. That's why it does not work out of the box for an URL generated with the previous option. Note that it won't work for the initial query but as soon as the user has an interaction with the App the URL is correctly updated.

You can create a back-ward compatible URL with the stateMapping option. You have to manually map the key query to q. Note that depending on which widgets you have on the page, you might have to implement their mappings. Here is an example that shows how to implement this.

[senthil41189]

Thanks samouss.
We are using a custom input text field to modify the url parameter and appending the search text and reloading the page to get the updated search data. After applying this, the search parameter that we append in the url is not getting added to the aloglia request.

Expected request:
{"requests":[{"indexName":"highered_stg_products","params":"query: maths
page: 0
facets: []
tagFilters: "}]}

but we are getting:
{"requests":[{"indexName":"highered_stg_products","params":"query:
page: 0
facets: []
tagFilters: "}]}

Are we missing anything?

[samouss]

Could you provide us a working example of your issue? It will help a lot to better understand the problem. We provide template in order to avoid you the boilerplate. You can find it on CodeSandbox.

[senthil41189]

Thanks samouss.
As part of the code, we are not using the searchbox plugin, but using our custom search field and submitting the page.

The conversion from urlSync to routing works if a searchbox plugin is availble, else it is not.
Kindly advice.

Thanks

[samouss]

The query is only taken into account if a searchBox is used on the page. Could you provide an example of your implementation? It would help to better understand the use case and which solution is the more relevant.

[senthil41189]

Our search results are rendered from multiple products like swiftype and other external api's apart from Algolia. hence instead of the algolia searchwidget, we have a custom search field that will submit the url with parameter q=.

Since the replication of the environment is a bit tedious, i have just removed the search widget from the sandbox to simulate our environment to an extent.

https://codesandbox.io/s/k934r93pj3

The search parameter is passed in the url query parameter.
let me know if there are anyother ways, by which we can sync up to see the actual environment

[samouss]

The routing option requires the widgets that manage the part of the URL to be mounted to apply the refinement. For this case, it's the searchBox widget. Even if you don't use the UI of the searchBox it has to be mounted. We can create a "virtual" widget with the searchBox connector. This widget doesn't render anything on the page but it allows InstantSearch to be aware of the query inside the URL. Here is an example that show how to use it.

[senthil41189]

Thanks a lot Samouss, works fine. will get back incase of any issues