meilisearch
Infinite loop error when using the transformItems prop from InstantSearch's Menu component
Description Hello!
I have a simple search app using Gatsby, Meilisearch, and Instantsearch. I'm using Meilisearch Cloud as well. Search and all that works great. I wanted to fine tune the result being shown in the UI when filtering. InstantSearch's docs referred me to use transformItems within the Menu component I'm using (make sure you're on InstantSearch v7 when clicking the url).
Any time I add the prop, I run into an infinite loop. Even when I'm just returning the initial results with no mutations.
<Menu attribute="optionTypes.optionValues.presentation" transformItems={(items) => { console.log("items: ", items); return items; }} />
Any insights?
Packages used: "react-instantsearch": "^7.5.3", "@meilisearch/instant-meilisearch": "^0.13.6", "gatsby-plugin-meilisearch": "^0.3.1",
If applicable, add screenshots or logs to help explain your problem.
Environment (please complete the following information):
- OS: Mac
- Browser: Version 111.0.5563.146 (Official Build) (arm64)
- Meilisearch version: 1.6.2 (based on the info from the Cloud)
- instant-meilisearch version: 0.13.6
- instantsearch.js version: 7.5.3
Hello @willlee17 sorry for the daly, do you have the same issue with the latest version of instant-meilisearch? https://github.com/meilisearch/meilisearch-js-plugins/releases
Heres another discussion about it, it seems like to make it work, the transformItems function needs to be declared outside your component. https://github.com/algolia/react-instantsearch/issues/3541
Like the algolia example: https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/?client=TypeScript#hook
If you want to declare it inside your component (like if you need some other prop for a filter) you can use useCallback:
const transformItems = useCallback(
(items) => {
console.log(categories)
return items
},
[categories],
)
const { items, refine, searchForItems } = useRefinementList({
attribute,
transformItems,
})
Hi @willlee17 can you confirm if the @christopherpickering suggestion helped your case?
