Prepopulating the query and refinementList

[Etheliene]

hi there,
I am using the instantsearch-react package and I wanted to prepopulate my refinelists if there is a match in the query.
I successfully was able to "check" the facet by using this on the RefinementList Component:

<RefinementList attribute="fruits"
   transformItems={
     items =>  items.map(
        item => ({
          ...item,
          isRefined: item.label.toLowerCase().includes(searchState.query) ? true : false
        })
     )
  }
/>

however the search result does not seem to recognize this and on the other hand I am furthermore not able to select any other facets or filters - or update the query...
previously I have set the searchState.query with:

if (location.search.includes('?foo=')) {
    searchQuery = location.search.split('=').pop();
    searchState.query = searchQuery
}

because I wanted to prefill the searchbar with a parameter-value if present.
On my instantsearch Component I use it like this:
<InstantSearch indexName="foobar" searchClient={searchClient} searchState={searchState ? searchState : undefined}> Is there any limitations of altering the query like this or do I have to accomplish this in a different way?

Situation:
I have a basic searchform that redirects to a searchresults page. On this searchresults page I want to implement this advanced search with facets and so on and so forth.
I was thinking of using the query param to set the value inside the searchbox and if the value of the param matches any of the facets I want to enable that corresponding facet.

flow:
page is home page
user types in "banana" in searchbar,
search redirects to /searchresult?foo=banana
-> search gets initialized and receives "banana" as the query value
-> search checks for matches in the facets, if I have a refinementList of fruits and "banana" is a facet, I want "banana" to be checked
-> the results should be displayed accordingly to the selected filters / query
Do I have to alter the searchState to set the facet instead of using transformItems? And if so, how could I achieve this, when I don't initially know what facets are available?

[Haroenv]

have you seen the routing/url sync guide already? https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/react/

I think it's quite relevant to what you're trying to do

[landermedia]

@Haroenv is the above routing guide applicable with React hooks version?

[Haroenv]

There's no dedicated guide for React InstantSearch hooks yet, but the mechanism is the one from vanilla js: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/js/ @landermedia

[landermedia]

Perhaps I asked earlier than I was able to play around things. As per my little validation (see this QA), it works but not perfect. I guess we'll just have to keep at it. Thanks!