Double Search Requests & Insights Middleware Error

[daryldeogracias]

🐛 Current behavior

When performing a search request, each keypress triggers two consecutive API calls to /api/search (backend search setup) . Additionally, enabling insights={true} causes an insights error.

🔍 Steps to reproduce

1. Replace API URL app>fetch>search.tsx[line.5] with the correct forwarded port in Codesandbox.
   • Example: Change http://localhost:3000/api/search to the correct URL (e.g., https://xyz-3000.app.codesandbox.io/api/search).
2. Perform a search in the application.
   • Expect hydration errors.
3. Check Network Tab in Developer Tools.
   • Observe that each request results in two consecutive API calls to /api/search.
4. Enable insights={true} in InstantSearchNext.
   • Leads to insights middleware errors.

Live reproduction

https://codesandbox.io/p/github/daryldeogracias/algolia-web-app/main

💭 Expected behavior

1. Double query requests should be resolved.
2. Insights middleware should work even when using backend search.

Package version

"next": "^15.1.6", "react-instantsearch": "^7.15.3", "react-instantsearch-nextjs": "^0.4.4", "algoliasearch": "^5.20.0", "instantsearch.js": "^4.77.3",

Operating system

macOS 15.3.1 (24D70)

Browser

Chrome Version 133.0.6943.142

Code of Conduct

• I agree to follow this project's Code of Conduct

[daryldeogracias]

Any suggestions for insights? looks like it can't be done using the provider

[mathougui]

The short version is that you’re adding objectID to the route state in stateToRoute, but then ignoring (and removing) it in routeToState.
Because your state mapping is asymmetric, the router sees “changes” and triggers a second query.

Concretely, in stateToRoute:

if (typeof window !== "undefined") {
objectID =
new URLSearchParams(window.location.search).get("objectID") || undefined;
}

…you add objectID to the route state that’s returned.

But in routeToState:

routeToState(routeState = {} as UiState) {
return Object.keys(routeState).reduce(
(state, indexId) => ({
...state,
[indexId]: cleanState(routeState[indexId] || {}),
}),
{} as UiState
);
}

…you never read that objectID key nor put it back into the returned UiState.
Consequently, your router sees “an extra key” (objectID) vanish, so it re-syncs the route and triggers a new query.

Fix would be either removing that objectID logic or handling it more consistently: make routeToState store that key in uiState the same way it’s set in stateToRoute. That consistency will keep the route state stable and avoid the unwanted query.

I haven't had the time to dive into insights for now but it seems like there was no initialisation of our insights library.

[daryldeogracias]

Thanks for responding @mathougui , tried to removed entirely the stateMapping and routing part, its still triggers two consecutive api calls

https://codesandbox.io/p/github/daryldeogracias/algolia-web-app/main

[daryldeogracias]

this seems to happen only when we do backend search