✨ Add caching strategy and double debounce time #1987 (#2080)

Author: fernandolucchesi

web/lib/algolia.ts

@@ -1,5 +1,19 @@
 import algoliasearch, { AlgoliaSearchOptions } from 'algoliasearch/lite'
 import { algolia } from './config'
+import { createInMemoryCache } from '@algolia/cache-in-memory'
+import { createFallbackableCache } from '@algolia/cache-common'
+import { createBrowserLocalStorageCache } from '@algolia/cache-browser-local-storage'
 
-export const searchClient = (options: AlgoliaSearchOptions | undefined) =>
-  algoliasearch(algolia.applicationId, algolia.searchApiKey, options)
+export const searchClient = (options?: AlgoliaSearchOptions) =>
+  algoliasearch(algolia.applicationId, algolia.searchApiKey, {
+    ...options,
+    responsesCache: createFallbackableCache({
+      caches: [
+        createBrowserLocalStorageCache({
+          key: `algolia-responses-${algolia.applicationId}`,
+          timeToLive: 600, // 10 minutes cache
+        }),
+        createInMemoryCache(),
+      ],
+    }),
+  })

web/package.json

@@ -21,6 +21,9 @@
     "type-check": "tsc --project tsconfig.json --pretty --noEmit"
   },
   "dependencies": {
+    "@algolia/cache-browser-local-storage": "^4.22.1",
+    "@algolia/cache-common": "^4.22.1",
+    "@algolia/cache-in-memory": "^4.22.1",
     "@chakra-ui/react": "^2.4.2",
     "@chakra-ui/skip-nav": "^2.0.12",
     "@emotion/react": "^11",

web/pageComponents/pageTemplates/newsroom/UncontrolledSearchBox.tsx

@@ -42,7 +42,7 @@ const Input = styled.input`
 
 export type SearchBoxProps = UseSearchBoxProps
 
-const DEBOUNCE_TIME = 300
+const DEBOUNCE_TIME = 800
 let timerId: any = undefined
 
 const queryHook: UseSearchBoxProps['queryHook'] = (query, search) => {

web/pageComponents/search/Search.tsx

@@ -22,7 +22,7 @@ const StyledPagination = styled(Pagination)`
   margin-top: var(--space-xLarge);
   justify-content: center;
 `
-const searchClient = client(undefined)
+const searchClient = client()
 const queriedSearchClient: SearchClient = {
   ...searchClient,
   search(requests: any) {

web/pageComponents/search/SearchBox.tsx

@@ -3,7 +3,7 @@ import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch'
 import ControlledSearchBox from './ControlledSearchBox'
 import { SearchContext } from './SearchContext'
 
-const DEBOUNCE_TIME = 300
+const DEBOUNCE_TIME = 800
 
 export type SearchBoxProps = ComponentProps<'div'> & UseSearchBoxProps