algolia / algolia/instantsearch
indexUiState does not contain the query for all indices inside NoResults
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
### 🐛 Current behavior
When utilizing const { indexUiState } = useInstantSearch() inside the NoResults component, I've observed that the query in indexUiState is empty for the categories index. In contrast, the primary products index correctly returns the query. Although the global query is accessible via the results from useInstantSearch(), it's not specific to individual indices. Yet, it's still useful as it isn't empty.
### Code samples:
```js
// Search.js
import React from "react"
import { Hits, Index, InstantSearch, SearchBox } from "react-instantsearch"
import { NoResultsBoundary } from "@features/search/no-results-boundary"
import algoliasearch from "algoliasearch/lite"
import CategoryHits from "./hits-components/category-hits/category-hits"
import PageHits from "./hits-components/page-hits/page-hits"
import ProductHits from "./hits-components/product-hits/product-hits"
import NoResults from "./no-results"
import { ShowMore } from "./show-more"
import * as styles from "./search.module.css"
const searchClient = algoliasearch(
process.env.ALGOLIA_APP_ID,
process.env.ALGOLIA_API_KEY
)
const Search = ({ onClose }) => {
return (
}>
}>
}>
)
}
export default Search
```
```js
// NoResults.js


import React from "react"
import { useInstantSearch } from "react-instantsearch"
import * as styles from "./no-results.module.css"
const NoResults = () => {
const { indexUiState } = useInstantSearch()
return (
No results for query “{indexUiState ?.query}“
)
}
export default NoResults
```

### Possible solution:
As a temporary workaround, using results from useInstantSearch() provides the query. But there might be a more robust way to make the query available across all indices.
```js
import React from "react"
import { useInstantSearch } from "react-instantsearch"
import * as styles from "./no-results.module.css"
const NoResults = () => {
const { results } = useInstantSearch()
return (
No results for query “{results?.query}“
)
}
export default NoResults
```
### 🔍 Steps to reproduce
1. Create a search component with multiple Index components.
2. Inside a custom "No Results" component, try to access the query via indexUiState from useInstantSearch().
3. Notice that the query is not available for non-primary indices.
Additional context:
This issue might be due to how react-instantsearch is handling the context for multiple indices.
### Live reproduction
https://codesandbox.io/s/magical-ptolemy-mnzwm3?file=/src/App.js
### 💭 Expected behavior
The indexUiState should have the query for all indices.
### Package version
"react-instantsearch": "^7.0.1",
### Operating system
Windows
### Browser
Edge
### Code of Conduct
- [X] I agree to follow this project's Code of Conduct
Contributor guide
Research direction
Start with the linked CodeSandbox reproduction and the useInstantSearch entry point, focusing on how indexUiState is provided for nested Index components. Reproduce the missing query for the category index, then verify that indexUiState exposes the query for every index and add coverage if the existing test structure supports it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100