algolia / algolia/instantsearch

indexUiState does not contain the query for all indices inside NoResults

Open
#5,808 0 comments 1 reaction 0 assignees View on GitHub
triage
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 (





PRODUCTS

}>





CATEGORIES

}>





PAGES

}>






)
}

export default Search
```
```js
// NoResults.js
![search-bug](https://github.com/algolia/instantsearch/assets/10392540/09656b06-ed8a-4c82-ad90-dc01a7fdd6b4)
![search-bug](https://github.com/algolia/instantsearch/assets/10392540/73dd31e1-9c65-4565-aab2-2fc380b5c129)

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
```

![search-bug](https://github.com/algolia/instantsearch/assets/10392540/567d2e41-7fd4-41a8-bb10-1670cb22fd61)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.