Guides / Building Search UI / Troubleshooting

It’s recommended to use the Kotlin API client, which is better suited for Android development.

How to use float values in a rating menu widget?

The RatingMenu doesn’t support float values. You can store an integer representation of this value in your records (for example, 0.5 * 10 = 5) and display the original value in your UI.

It’s recommended to use the Kotlin API client, which is better suited for Android development.

How to search from the n-th character?

To search only when the query is longer than a certain length, you can implement a proxy search client. Then, you can add a condition, for example, query.length > 3.

It’s recommended to use the Kotlin API client, which is better suited for Android development.

Why does dynamic faceting cause an extra request?

When the DynamicWidgets receives results, it mounts the chosen widgets for that result. An initial search does two network requests. This is because adding a new widget requires a new network request, to know what the refinements are for a facet.

You can avoid this by forcing all facets to be returned by Algolia, or even all facets that you maximally want to display the results of. You can force all facets to be returned by Algolia by creating a proxy of the search client as in the conditional requests guide.

1
2
3
4
5
6
7
const searchClient = algoliasearch('YourApplicationID', 'YourAPIKey');
const search = searchClient.search;
searchClient.search = function(queries) {
  // request all facets
  queries[0].params.facets = '*';
  return search(queries);
};

It’s recommended to use the Kotlin API client, which is better suited for Android development.

How do I implement a “Show more” feature on a custom RefinementList?

A custom RefinementList widget will show up to showMoreLimit refinement items in items. It lets you sort the items as you want before they’re trimmed. However, it means you need to slice to the desired limit, and keep track of isShowingMore in local state:

1
2
3
4
5
6
7
8
9
10
11
12
13
const CustomRefinementList = connectRefinementList(function RefinementList({
  items,
  limit,
  showMoreLimit
}) {
  const [isShowingMore, toggleShowMore] = React.useState(false)
  const itemsToDisplay = items.slice(
    0,
    isShowingMore ? showMoreLimit : limit
  )

  // render using `itemsToDisplay`
})

It’s recommended to use the Kotlin API client, which is better suited for Android development.

Why is my searchState ignored?

The uiState works only when the widgets responsible for each UI state attribute is mounted. For instance, a SearchBox widget is necessary to provide a query.

It’s recommended to use the Kotlin API client, which is better suited for Android development.

Why isn’t the cache preventing redundant requests to Algolia?

The JavaScript API client caches redundant searches in memory. This avoid sending unnecessary requests to Algolia, and reuses the data you already fetched. If you notice this behavior isn’t working, you might be recreating the search client over every render.

The cache exists at the client instance level, it isn’t shared across different instances. Make sure you create the search client just once.

A typical error is to instantiate the client inside a React component. This causes the code to run for every render. For example, instead of doing:

1
2
3
4
5
6
7
8
9
10
11
function App() {
  const searchClient = algoliasearch();

  return <InstantSearch searchClient={searchClient} />
}

// or

function App() {
  return <InstantSearch searchClient={algoliasearch()} />
}

Make sure to instantiate the client outside of your component tree, and pass it down by reference.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const searchClient = algoliasearch();

function App() {
  return <InstantSearch searchClient={searchClient} />
}

// or

function App({ appId, apiKey }) {
  // Useful when you need to update the `appId` and `apiKey` at runtime
  // for example when using Secured API keys
  const searchClient = useMemo(() =>
    algoliasearch(appId, apiKey),
    [appId, apiKey]
  );

  return <InstantSearch searchClient={searchClient} />
}

Did you find this page helpful?