Use the multiSearch api instead of multiple individual searches for Meilisearch v1.1.0 (#1038)

Author: bidoubiwa

.changeset/fresh-countries-move.md

@@ -0,0 +1,5 @@
+---
+"@meilisearch/instant-meilisearch": minor
+---
+
+Replaces search with multiSearch API.

README.md

@@ -350,8 +350,6 @@ const search = instantsearch({
 
 `Index` is the component that lets you apply widgets to a dedicated index. It’s useful if you want to build an interface that targets multiple indices.
 
-Using this component, instant-meilisearch does an http-request for each different `Index` widget added. More http requests are made when using the [`RefinementList`](#✅-refinementlist) widget.
-
 ### ✅ SearchBox
 
 [SearchBox references](https://www.algolia.com/doc/api-reference/widgets/search-box/js/)
@@ -675,9 +673,6 @@ The `refinementList` widget is one of the most common widgets you can find in a
 - ✅ templates: The templates to use for the widget.
 - ✅ cssClasses: The CSS classes to override.
 
-The `RefinementList` widget uses the `disjunctive facet search` principle when using the `or` operator. For each different facet category used, an additional http call is made.
-For example, if I ask for `color=green` and `size=2`, three http requests are made. One for the hits, one for the `color` facet distribution, and one for the `size` facet distribution. To provide feedback on the subject, refer to [this discussion](https://github.com/meilisearch/product/issues/54).
-
 The following example will create a UI component with the a list of genres on which you will be able to facet.
 
 ```js

packages/instant-meilisearch/__tests__/search-resolver.test.ts

@@ -3,6 +3,7 @@ import { instantMeiliSearch } from '../src'
 import { MeiliSearch } from 'meilisearch'
 import { mocked } from 'ts-jest/utils'
 import { PACKAGE_VERSION } from '../src/package-version'
+import { MeiliSearchMultiSearchParams } from '../src/types'
 
 jest.mock('meilisearch')
 
@@ -18,19 +19,22 @@ export const searchResponse = {
 
 // Mocking of Meilisearch package
 const mockedMeilisearch = mocked(MeiliSearch, true)
-const mockedSearch = jest.fn(() => searchResponse)
-const mockedIndex = jest.fn(() => {
+const mockedMultiSearch = jest.fn((request) => {
+  const response = request.queries.map((req: MeiliSearchMultiSearchParams) => ({
+    ...searchResponse,
+    indexUid: req.indexUid,
+  }))
   return {
-    search: mockedSearch,
+    results: response,
   }
 })
 
 mockedMeilisearch.mockReturnValue({
   // @ts-ignore
-  index: mockedIndex,
+  multiSearch: mockedMultiSearch,
 })
 
-describe('Pagination browser test', () => {
+describe('Cached search tests', () => {
   afterEach(() => {
     jest.clearAllMocks()
   })
@@ -51,7 +55,7 @@ describe('Pagination browser test', () => {
       apiKey: '',
       clientAgents: [`Meilisearch instant-meilisearch (v${PACKAGE_VERSION})`],
     })
-    expect(mockedSearch).toHaveBeenCalledTimes(2)
+    expect(mockedMultiSearch).toHaveBeenCalledTimes(2)
   })
 
   test('two different search parameters', async () => {
@@ -77,7 +81,7 @@ describe('Pagination browser test', () => {
       apiKey: '',
       clientAgents: [`Meilisearch instant-meilisearch (v${PACKAGE_VERSION})`],
     })
-    expect(mockedSearch).toHaveBeenCalledTimes(3)
+    expect(mockedMultiSearch).toHaveBeenCalledTimes(3)
   })
 
   test('two identical and one different search parameters', async () => {
@@ -104,7 +108,7 @@ describe('Pagination browser test', () => {
       apiKey: '',
       clientAgents: [`Meilisearch instant-meilisearch (v${PACKAGE_VERSION})`],
     })
-    expect(mockedSearch).toHaveBeenCalledTimes(3)
+    expect(mockedMultiSearch).toHaveBeenCalledTimes(3)
   })
 
   test('two same and two different search parameter', async () => {
@@ -132,6 +136,43 @@ describe('Pagination browser test', () => {
       apiKey: '',
       clientAgents: [`Meilisearch instant-meilisearch (v${PACKAGE_VERSION})`],
     })
-    expect(mockedSearch).toHaveBeenCalledTimes(3)
+    expect(mockedMultiSearch).toHaveBeenCalledTimes(3)
+  })
+
+  test('Multiple search parameters on different index uids', async () => {
+    const searchParameters1 = [
+      {
+        indexName: 'movies',
+        params: {
+          query: '',
+        },
+      },
+      {
+        indexName: 'game',
+        params: {
+          query: '',
+        },
+      },
+    ]
+
+    const searchParameters2 = {
+      indexName: 'movies',
+      params: {
+        query: 'other query',
+      },
+    }
+    const searchClient = instantMeiliSearch('http://localhost:7700')
+    await searchClient.search<Movies>(searchParameters1)
+    await searchClient.search<Movies>([searchParameters2])
+    await searchClient.search<Movies>(searchParameters1)
+    await searchClient.search<Movies>([searchParameters2])
+
+    expect(mockedMeilisearch).toHaveBeenCalledWith({
+      host: 'http://localhost:7700',
+      apiKey: '',
+      clientAgents: [`Meilisearch instant-meilisearch (v${PACKAGE_VERSION})`],
+    })
+
+    expect(mockedMultiSearch).toHaveBeenCalledTimes(3)
   })
 })

packages/instant-meilisearch/package.json

@@ -47,7 +47,7 @@
     "templates"
   ],
   "dependencies": {
-    "meilisearch": "^0.31.1"
+    "meilisearch": "0.32.0-v1.1.0-pre-release.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.0",

packages/instant-meilisearch/src/adapter/search-request-adapter/search-params-adapter.ts

@@ -1,8 +1,8 @@
 import type {
-  MeiliSearchParams,
   SearchContext,
   Filter,
   PaginationState,
+  MeiliSearchMultiSearchParams,
 } from '../../types'
 
 import {
@@ -72,7 +72,7 @@ function setFinitePagination(
  * @returns {MeiliSearchParams}
  */
 export function MeiliParamsCreator(searchContext: SearchContext) {
-  const meiliSearchParams: Record<string, any> = {}
+  const meiliSearchParams: any = {}
   const {
     facets,
     attributesToSnippet,
@@ -89,14 +89,21 @@ export function MeiliParamsCreator(searchContext: SearchContext) {
     filters,
     numericFilters,
     facetFilters,
+    indexUid,
   } = searchContext
 
   const meilisearchFilters = adaptFilters(filters, numericFilters, facetFilters)
 
   return {
-    getParams() {
+    getParams(): MeiliSearchMultiSearchParams {
       return meiliSearchParams
     },
+    addQuery() {
+      meiliSearchParams.q = query
+    },
+    addIndexUid() {
+      meiliSearchParams.indexUid = indexUid
+    },
     addFacets() {
       if (Array.isArray(facets)) {
         meiliSearchParams.facets = facets
@@ -194,12 +201,14 @@ export function MeiliParamsCreator(searchContext: SearchContext) {
  * to search request compliant with Meilisearch
  *
  * @param  {SearchContext} searchContext
- * @returns {MeiliSearchParams}
+ * @returns {MeiliSearchMultiSearchParams}
  */
 export function adaptSearchParams(
   searchContext: SearchContext
-): MeiliSearchParams {
+): MeiliSearchMultiSearchParams {
   const meilisearchParams = MeiliParamsCreator(searchContext)
+  meilisearchParams.addQuery()
+  meilisearchParams.addIndexUid()
   meilisearchParams.addFacets()
   meilisearchParams.addAttributesToHighlight()
   meilisearchParams.addPreTag()

packages/instant-meilisearch/src/adapter/search-request-adapter/search-resolver.ts

@@ -1,9 +1,9 @@
 import {
-  SearchContext,
   MeiliSearch,
-  MeiliSearchResponse,
   SearchCacheInterface,
-  MeiliSearchParams,
+  MeiliSearchMultiSearchParams,
+  MeilisearchMultiSearchResult,
+  PaginationState,
 } from '../../types'
 
 /**
@@ -14,37 +14,35 @@ export function SearchResolver(
   cache: SearchCacheInterface
 ) {
   return {
-    /**
-     * @param  {SearchContext} searchContext
-     * @param  {MeiliSearchParams} searchParams
-     * @param  {MeiliSearch} client
-     * @returns {Promise}
-     */
-    searchResponse: async function (
-      searchContext: SearchContext,
-      searchParams: MeiliSearchParams
-    ): Promise<MeiliSearchResponse<Record<string, any>>> {
-      // Create cache key containing a unique set of search parameters
-      const key = cache.formatKey([
-        searchParams,
-        searchContext.indexUid,
-        searchContext.query,
-        searchContext.pagination,
-      ])
-      const cachedResponse = cache.getEntry(key)
+    multiSearch: async function (
+      searchQueries: MeiliSearchMultiSearchParams[],
+      instantSearchPagination: PaginationState[]
+    ): Promise<MeilisearchMultiSearchResult[]> {
+      const key = cache.formatKey([searchQueries])
+
+      const cachedResponse = cache.getEntry<MeilisearchMultiSearchResult[]>(key)
 
       // Check if specific request is already cached with its associated search response.
       if (cachedResponse) return cachedResponse
 
-      // Make search request
-      const searchResponse = await client
-        .index(searchContext.indexUid)
-        .search(searchContext.query, searchParams)
+      const searchResponses = await client.multiSearch({
+        queries: searchQueries,
+      })
 
+      const responseWithPagination = searchResponses.results.map(
+        (response, index) => ({
+          ...response,
+          // TODO: should be removed at one point
+          pagination: instantSearchPagination[index] || {},
+        })
+      )
       // Cache response
-      cache.setEntry<MeiliSearchResponse>(key, searchResponse)
+      cache.setEntry<MeilisearchMultiSearchResult[]>(
+        key,
+        responseWithPagination
+      )
 
-      return searchResponse
+      return responseWithPagination
     },
   }
 }

packages/instant-meilisearch/src/adapter/search-response-adapter/hits-adapter.ts

@@ -1,26 +1,30 @@
-import type { SearchContext, MeiliSearchResponse } from '../../types'
+import type {
+  PaginationState,
+  MeilisearchMultiSearchResult,
+  InstantMeiliSearchConfig,
+} from '../../types'
 import { adaptFormattedFields } from './format-adapter'
 import { adaptGeoResponse } from './geo-reponse-adapter'
 
 /**
- * @param  {MeiliSearchResponse<Record<string, any>>} searchResponse
+ * @param  {MeilisearchMultiSearchResult} searchResult
  * @param  {SearchContext} searchContext
  * @returns {Array<Record<string, any>>}
  */
 export function adaptHits(
-  searchResponse: MeiliSearchResponse<Record<string, any>>,
-  searchContext: SearchContext
+  searchResponse: MeilisearchMultiSearchResult & {
+    pagination: PaginationState
+  },
+  config: InstantMeiliSearchConfig
 ): any {
-  const { primaryKey } = searchContext
   const { hits } = searchResponse
-  const {
-    pagination: { finite, hitsPerPage },
-  } = searchContext
+  const { hitsPerPage } = searchResponse.pagination
+  const { finitePagination, primaryKey } = config // Needs: finite, hitsPerPage
 
   // if the length of the hits is bigger than the hitsPerPage
   // It means that there is still pages to come as we append limit by hitsPerPage + 1
   // In which case we still need to remove the additional hit returned by Meilisearch
-  if (!finite && hits.length > hitsPerPage) {
+  if (!finitePagination && hits.length > hitsPerPage) {
     hits.splice(hits.length - 1, 1)
   }
 

packages/instant-meilisearch/src/adapter/search-response-adapter/pagination-adapter.ts

@@ -1,7 +1,7 @@
 import type {
   MeiliSearchResponse,
-  PaginationState,
   InstantSearchPagination,
+  PaginationState,
 } from '../../types'
 
 function adaptNbPages(