Default refinement no longer works when updating react-instantsearch to v7

Question

I am updating react-instantsearch in our project from v6 to v7, but I am not able to get the default refinement filters to work in the latest version. I have been following the update instructions in the docs but with no luck. Previously, we passed the refinements in via the RefinementList component:

<InstantSearch
  indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX!}
  searchClient={algoliaClient}
>
  <AlgoliaSearchBox
    onChange={setSearchText}
    searchText={searchText}
    defaultRefinement={searchText}
  />

  <div className={styles.rightPanel}>
    <AlgoliaSearchResults
      searchText={searchText}
      hitsPerPage={hitsPerPage}
      setHitsPerPage={handleHitsPerPage}
      type={type}
      setType={setType}
      setIsThereResults={setHasResults}
      isSLP={isSLP}
      noResults={noResults}
      totalHitCount={totalHitCount}
      setTotalHitCount={setTotalHitCount}
    />

    {!!(subjectFilter || ageFilter) && (
      <ClearFilters onClick={handleResetFilters} />
    )}

    {!!hasResults && (
      <>
        <Hits hitComponent={AlgoliaHit as FC} />

        <AlgoliaPagination
          hitsPerPage={hitsPerPage}
          type={type}
          totalHitCount={totalHitCount}
        />
      </>
    )}
  </div>

  <Configure
    hitsPerPage={hitsPerPage}
    facetFilters={determineFacetFilters()}
  />

  <div className={styles.refinementListContainer}>
    <RefinementList
      attribute="type"
      defaultRefinement={
        type === 'all'
          ? null
          : type === 'courses'
          ? ['filter_1', 'filter_2']
      }
    />
  </div>
</InstantSearch>

As per the update guidelines, I am now attempting to pass the refinement via the initialUiState prop of the InstantSearch component, but it has absolutely no effect:

<InstantSearch
      indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX!}
      searchClient={algoliaClient}
      initialUiState={{
        indexName: {
          refinementList: {
            type === 'all'
              ? null
              : type === 'courses'
              ? ['filter_1', 'filter_2']
          },
        },
      }}
>

  ...

  <RefinementList attribute="type" />

</InstantSearch>

Can anyone tell me what I am doing wrong? I haven't altered the Hits component which displays the actual results, as it is not a custom component - it just comes directly from react-instantsearch. I have updated our custom components (AlgoliaSearchBox, which shows the search bar, AlgoliaSearchResults, which shows a summary of results in a bar at the top, and AlgoliaPagination, which shows how many pages/results are left to view at the bottom), to use the new hook functionality:

// AlgoliaSearchResults.tsx

const AlgoliaSearchResults: FC<IAlgoliaSearchResultsProps> = ({
  results,
  searchText,
  hitsPerPage,
  setHitsPerPage,
  totalHitCount,
  setTotalHitCount,
}) => {
  <div>
    ... component that renders how many results in each category etc.
  </div>
}

const connectStateResults = (Component: JSXElementConstructor<any>) => {
  const SearchResults = (props: any) => {
    const data = useInstantSearch();

    return <Component {...props} {...data} />;
  };

  return SearchResults;
};

const ConnectedAlgoliaSearchResults = connectStateResults(AlgoliaSearchResults);

export default ConnectedAlgoliaSearchResults;

Any help much appreciated!

Answer 1

So I have finally been able to make this work - posting here in case useful for anyone else.

const onStateChange: InstantSearchProps['onStateChange'] = ({
    uiState,
    setUiState,
  }) => {
    setUiState({
      CPD_and_resources: {
        query: uiState.CPD_and_resources.query,
        refinementList: {
          type:
            type === 'all'
              ? []
              : type === 'courses'
              ? SEARCH_RESULTS_CPDS
              : type === 'articles'
              ? SEARCH_RESULTS_ARTICLES
              : SEARCH_RESULTS_RESOURCES,
        },
      },
    });
};

<InstantSearch
  indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX!}
  searchClient={algoliaClient}
  initialUiState={{
    CPD_and_resources: {
      query: searchText,
    },
  }}
  onStateChange={onStateChange}
>
  ...
</InstantSearch>