Hybrid Search — API Configuration

Choose how many results Hybrid Search loads at a time and which articles it can return, and change the response before Hybrid Search shows it.

useApi takes the request body that Hybrid Search sends to the Hybrid Search API. The query comes from the reader, and the other fields control what comes back.

Number of results

rows sets how many search results each request returns. The default is 10. When the reader scrolls to the end of the list, the next request loads the next rows results.

client.ui.hybridSearch.useApi({
  rows: 20,
});

Filter the articles

fq restricts the search results, and the articles the answer can cite. It takes the same filter syntax as every other Miso endpoint.

client.ui.hybridSearch.useApi({
  fq: 'categories:"Markets"',
});

A reader's facet choices apply inside your filter, and the facet counts follow it. See Filtering (fq).

Filter values are matched exactly. Check yours against the rules for case and quoting.

Change the response

useDataProcessor takes a function that gets each response before Hybrid Search renders it. Return data, changed or not.

The function gets two kinds of response, so check which one data.value holds:

• Search results, from the Hybrid Search API: products, total and facet_counts. When the reader scrolls for more, the function gets each new page of results before the SDK adds it to the list.
• The answer: answer, sources and the other fields of the Answer API response.

This one takes the site name off the end of each title, in the results and in the sources of the answer:

function shortenTitle(item) {
  return { ...item, title: item.title.replace(/ \| Example News$/, "") };
}

client.ui.hybridSearch.useDataProcessor((data) => {
  const { value } = data;
  if (value && value.products) {
    return { ...data, value: { ...value, products: value.products.map(shortenTitle) } };
  }
  if (value && value.sources) {
    return { ...data, value: { ...value, sources: value.sources.map(shortenTitle) } };
  }
  return data;
});

The SDK calls the function each time the data changes. Before the response arrives, data.value is undefined, and while the answer streams in, the function runs again on each new part. Check for the field you change, and return data as it is when the field is missing.

Each call to useDataProcessor adds a function, and the functions run in the order you add them. clearDataProcessor() removes the ones added on the same object.