Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Duplicate Results in scopedResults with Routing Enabled in NextJS #6479

Open
1 task done
AmeerSapadmi opened this issue Dec 18, 2024 · 7 comments
Open
1 task done
Labels
triage Issues to be categorized by the team

Comments

@AmeerSapadmi
Copy link

🐛 Current behavior

When routing is enabled, navigating from one page to another page that displays search results (where a search parameter maps to the query used by Algolia) leads to duplicated entries in the scopedResults array returned by the useInstantSearch hook.

This issue occurs in a setup where we are using multi-index search with InstantSearchNext.

🔍 Steps to reproduce

Steps to Reproduce:

  1. Open the homepage and ensure the browser’s developer tools are open with the console tab selected.
  2. Click the button labeled "Click"
  3. The user is navigated to the search results page, where the search parameter is set to q=london.
  4. Observe the scopedResults array in the console:
    • Initially, it logs a single array containing the default index.
    • Shortly after, it updates to a much larger array, which includes duplicate entries for the indexes on the page.

Live reproduction

https://codesandbox.io/p/devbox/beautiful-maria-g85swl

💭 Expected behavior

The scopedResults do not contain duplicates.

Package version

next 15.0.4, react-instantsearch 7.13.9, react-instantsearch-nextjs 0.3.20, algoliasearch 5.17.1

Operating system

No response

Browser

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
@AmeerSapadmi AmeerSapadmi added the triage Issues to be categorized by the team label Dec 18, 2024
@Haroenv
Copy link
Contributor

Haroenv commented Dec 18, 2024

There's multiple things going on here:

  1. multiple results

This is because the main index has the same index name as the explicitly rendered index. This seems like a bug in useInstantSearch where it reads the results for all indices without deduplicating by indexId.

  1. not all results showing up initially.

This will be related to timing where useInstantSearch is called before it renders the child indices, and thus they aren't available in scoped results. In theory they should be available as the search happens backend and all results are available for the other widgets, so this likely is also a bug in useInstantSearch. You can work around this by rendering your scopedResults using code after the indices are mounted (in a child component of the Search in your example, underneath the Index components.

I'd like to look into if this pattern can be made possible in InstantSearch and the duplicate results can be fixed.

What use case are you trying to create with scopedResults? Maybe you could use useConnector(connectAutocomplete) instead and it normally will be correct.

@AmeerSapadmi
Copy link
Author

We are using scopedResults to calculate the total number of hits returned across all indices. However, due to the duplicate results, the total hit count we calculate is incorrect.

If this can be achieved using useConnector, could you kindly provide an example demonstrating how to implement it?

@Haroenv
Copy link
Contributor

Haroenv commented Dec 18, 2024

The duplicate can be solved by removing (filtering out) the first result, as it's the same as the result of the root index. I've checked and unfortunately connectAutocomplete has the same behaviour.

For ensuring this always renders the results (even on the server, before we find where the bug is happening), you can render the stats after the indices are mounted.

@AmeerSapadmi
Copy link
Author

I’m not sure how removing the first result would resolve the duplication issue in scopedResults. The problem isn’t limited to the root index being duplicated—all indexes rendered on the search page are duplicated. I’ve attached a screenshot of the logs from the sandbox below to illustrate this. As shown, scopedResults contains 247 entries, including duplicates for both the root index and the indexes rendered on the page.

image

Additionally, if you navigate to the search page by clicking the "Click" button and then refresh the page, the duplicates are no longer present, and scopedResults appears correct, apart from the root index being listed twice.

The duplication of indexes in scopedResults only seems to occur when navigating to the search page from another page, not when the search page is loaded directly.

@Haroenv
Copy link
Contributor

Haroenv commented Dec 19, 2024

That's weird, I can't reproduce it! I just see three results in the output:

Screenshot 2024-12-19 at 09 35 53

Are you reproducing that on codesandbox? do you need to do anything special for it to happen?

@AmeerSapadmi
Copy link
Author

That’s strange, I’m reproducing this issue on the provided CodeSandbox using the following steps:

  1. Click the "Click" button on the home page.
  2. Wait for the results to load in the console.
  3. Observe that scopedResults contains a large number of entries in the array, including duplicates.

I’ve attached a video below showing the issue as it appears for me in the CodeSandbox.

Screen.Recording.2024-12-19.at.13.mp4

@Haroenv
Copy link
Contributor

Haroenv commented Dec 19, 2024

Ah I see, only when you're loading the page on a navigation, not when it's loaded ad-hoc. I can reproduce it but I don't find the source of the problem yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage Issues to be categorized by the team
Projects
None yet
Development

No branches or pull requests

2 participants