Merge #322

322: Add objectID when primaryKey is provided r=bidoubiwa a=bidoubiwa

## Problem

With the new version of `instantSearch`, `objectID` becomes mandatory in the hits information to avoid errors and warnings in the console.

For example, in `React` when using instant-meilisearch the following error is raised: 
```
react_devtools_backend.js:2430 Warning: Failed prop type: The prop `hits[0].objectID` is marked as required in `Hits`, but its value is `undefined`.

react_devtools_backend.js:2430 Warning: Each child in a list should have a unique "key" prop.
```

Because instantSearch adds the `objectID` as the key of every hit component, we both receive an error for its absence and an error because our components are missing a key prop as [react expects a key on every component](https://reactjs.org/docs/lists-and-keys.html#keys).

## Solution

First I tried to fetch the primaryKey from MeiliSearch but the public key does not give permission to fetch the primaryKey.

So the solution was to add the `primaryKey` option to instant-meilisearch options. If it is not present, the `objectID` field will not be added in the returned hits. If a wrong primaryKey is given its value will be undefined and the error above will be raised the same way.

### Usage 

```javascript
const searchClient = instantMeiliSearch(
  'https://demos.meilisearch.com',
  'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25',
  {
    paginationTotalHits: 60,
    primaryKey: 'id',
  }
)
```

Not breaking!

Co-authored-by: Charlotte Vermandel <[email protected]>

Author: bors[bot]

README.md

@@ -71,6 +71,7 @@ const searchClient = instantMeiliSearch(
   {
     paginationTotalHits: 30, // default: 200.
     placeholderSearch: false // default: true.
+    primaryKey: 'id' // default: undefined
   }
 );
 ```
@@ -82,6 +83,7 @@ Which means that, with a `paginationTotalHits` default value of 200, and `hitsPe
 The default value of `hitsPerPage` is set to `20` but it can be changed with [`InsantSearch.configure`](https://www.algolia.com/doc/api-reference/widgets/configure/js/#examples).<br>
 ⚠️ MeiliSearch is not designed for pagination and this can lead to performances issues, so the usage of the pagination widget is not encouraged. However, the `paginationTotalHits` parameter lets you implement this pagination with less performance issue as possible: depending on your dataset (the size of each document and the number of documents) you might decrease the value of `paginationTotalHits`.<br>
 More information about MeiliSearch and the pagination [here](https://github.com/meilisearch/documentation/issues/561).
+- `primaryKey` (`undefined` by default): Specify the field in your documents containing the [unique identifier](https://docs.meilisearch.com/learn/core_concepts/documents.html#primary-field). By adding this option, we avoid instantSearch errors that are thrown in the browser console. In `React` particulary, this option removes the `Each child in a list should have a unique "key" prop` error.
 
 ## Example with InstantSearch
 

playgrounds/react/src/App.js

@@ -18,6 +18,7 @@ const searchClient = instantMeiliSearch(
   'dc3fedaf922de8937fdea01f0a7d59557f1fd31832cb8440ce94231cfdde7f25',
   {
     paginationTotalHits: 60,
+    primaryKey: 'id',
   }
 )
 

src/index.ts

@@ -15,6 +15,7 @@ export function instantMeiliSearch(
     client: new MeiliSearch({ host: hostUrl, apiKey: apiKey }),
     attributesToHighlight: ['*'],
     paginationTotalHits: options.paginationTotalHits || 200,
+    primaryKey: options.primaryKey || undefined,
     placeholderSearch: options.placeholderSearch !== false, // true by default
     hitsPerPage: 20,
     /*
@@ -99,6 +100,7 @@ export function instantMeiliSearch(
             formattedHit,
             ...instantSearchParams,
           }),
+          ...(this.primaryKey && { objectID: hit[this.primaryKey] }),
         }
         return modifiedHit
       })

src/types.ts

@@ -9,6 +9,7 @@ export type ISSearchParams = IStypes.SearchRequestParameters &
 export type InstantMeiliSearchOptions = {
   paginationTotalHits?: number
   placeholderSearch?: boolean
+  primaryKey?: string
 }
 
 export type ISHits<T = Record<string, any>> = T & {
@@ -35,6 +36,7 @@ export type InstantMeiliSearchInstance = {
   pagination?: boolean
   paginationTotalHits: number
   hitsPerPage: number
+  primaryKey: string | undefined
   client: MStypes.MeiliSearch
   attributesToHighlight: string[]
   placeholderSearch: boolean