Algolia routing erazes other non-algolia query string in the URL

Open Q&A
, ,
1

Hello,

I struggle to find how to keep the initial query string within the URL while the user is typing in the SearchBox. Fo some Algolia non related stuffs, I need to keep query string within the URL. In the example below: the two query params I want to keep are

referral=11

and

teamId=22

Here is my Initial url state:

localhost:3000/deals/1234?referral=11&teamId=22

When the user use the searchbox, it changes the URL.

What I’ve got:

localhost:3000/deals/1234?MY_INDEX_NAME%5Bquery%5D=example

What I need:

localhost:3000/deals/1234?MY_INDEX_NAME%5Bquery%5D=example&referral=11&teamId=22

Here is my _app.js:

// .....
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch } from 'react-instantsearch-hooks-web';
import singletonRouter from 'next/router';
import { createInstantSearchRouterNext } from 'react-instantsearch-hooks-router-nextjs';

// .....

const routing = createInstantSearchRouterNext({
    singletonRouter,
  });

// .....

  return(
      localization={defaultResource} >
        <InstantSearch
          searchClient={searchClient}
          indexName={process.env.NEXT_PUBLIC_ALGOLIA_DEALS_INDEX_NAME}
          routing={routing}
        >
          <Component {...pageProps}  />
        </InstantSearch>
  )
}

This issue occurson few pages. I think I need to use the createUrl function to change the format of URLs to change the format of the url to add all the initial query string to Algolia query string (not sure though). But can’t figure out how to make it work. Is it the correct approach? is there a simple way to do so?

2

You’re on the right track – you’ll need to handle the mapping of UI state to URL routes yourself to add in the additional values. You’ll need to write custom searchStateToUrl and urlToSearchState functions to handle the transformation.

There’s an example here: