algolia / algolia/instantsearch
`connectStateResults` does not provide up-to-date values in server side rendering
- Dominant language
- TypeScript
- Stars
- 4.1k
- Forks
- 553
- Avg merge
- 1d 11h
- Merged PRs (30d)
- 51
Description
**Describe the bug 🐛**
In some cases, `connectStateResults` does not provide the correct up-to-date values.
**To Reproduce 🔍**
Unfortunately, it's not possible for me to give a working example here. But the flow is as follow:
* The user lands on the search page.
* They see a list of results L1.
* They update and submit a new query.
* They do see the list of results L2. In the network tab, the request fired to Algolia API works successfully. But because `connectStateResults` is not correctly updated, `searching` remains `true` - and, in our implementation, the spinner keeps spinning, on top of several other unwanted side-effects. The provided `searchResults` is also not correctly updated.
**Expected behavior 💭**
`connectStateResults` should always provide the latest values. There should not be a difference between the provided `searchResults.hits` and the hits provided by `connectHits`, for instance. Nor there should be a difference between the provided `searchState.query` and `searchResults.query`.
**Environment:**
- OS: MacOS
- Browser: Chrome
- Version: 88
**Additional context**
We're using the latest `6.10.0` version of both `react-instantsearch-core` and `react-instantsearch-dom`.
We're using the following connectors:
* `connectSearchBox`. When submitting the search query, I'm calling the provided `refine` method with the query.
* `connectHits`. The hits are always up to date, there is absolutely no issue there.
* `connectStateResults`. Somehow, when using the React inspector, we can see that:
* `searchState` is up to date. It contains the latest query.
* `searching` sometimes remains `true` until a new search query is fired.
* `searchResults` sometimes contain the previous results until a new search query is fired. This also means that `searchResults.query` contains the previous query, as opposed to `searchState.query`, where the up-to-date query can be found.
We're also using server-side rendering, click analytics, and conversion analytics. Here is how the configure component looks like:
```
```
The search is performed on a single index, correctly passed to `InstantSearch`.
Contributor guide
Research direction
Start with the connectSearchBox, connectHits, and connectStateResults connectors in the server-side-rendering flow, using the reported sequence of submitting a new query after first seeing results. Compare searchState, searching, searchResults, and hits from connectHits across the update; done means connectStateResults exposes the latest query and results consistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100