algolia / algolia/instantsearch

`connectStateResults` does not provide up-to-date values in server side rendering

Open
#5,255 12 comments 2 reactions 0 assignees View on GitHub
Library: React InstantSearch < 7
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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.