instantsearch icon indicating copy to clipboard operation
instantsearch copied to clipboard

Algolia useCurrentRefinement hook seems not to be SSR ready

Open federicobadini opened this issue 1 year ago • 2 comments

🐛 Current behavior

Algolia instantsearch hooks should allow SSR via InstantSearchSSRProvider. However useCurrentRefinement seems to return empty on SSR if positioned before any widget in the markup. I've attached a repro with minimal changes with respect to your Next.js example.

🔍 Steps to reproduce

  1. Go to the repo link and select a value in the first facet filter (e.g. brand: Metra)
  2. Refresh the page
  3. Verify that the getServerSideProps returns a serverState that includes "disjunctiveFacetsRefinements":{"brand":["Metra"]
  4. Inspect the server generated markup
  5. The printed indexUiState seems correct even if positioned before any widget on the page
  6. useCurrentRefinements should include the Metra value too but this is not true. At least if it precedes the corresponding brand widget (or useMenu call).
  7. The results._state accessible via useHits seems to be empty as well when positioned in the markup before any widget. See the screenshot below:
Screenshot 2023-03-30 at 15 58 28

Live reproduction

https://codesandbox.io/s/nifty-newton-9997dl?file=/pages/index.tsx

💭 Expected behavior

I would expect useCurrentRefinements not to be position dependent in SSR. I would expect it to be consistent with the serverState passed to InstantSearchSSRProvider.

Package version

6.42.0

Operating system

No response

Browser

No response

Code of Conduct

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

federicobadini avatar Mar 30 '23 14:03 federicobadini

This has been driving me nuts. Would love to see a fix for this.

sterlinghirsh avatar Mar 30 '23 23:03 sterlinghirsh

The way to go in the future would be to base the clearRefinements and currentRefinements widgets on the uiState, which is known before the widgets are mounted instead of the search parameters. What would be nice about that is the ui would no longer be hardcoded based on the search parameters, and custom widgets could also participate in current/clearRefinements.

However, I'm not sure how we would put logic like the ones of:

  • numericMenu/range rendering as ≤ and ≥
  • query being filtered out
  • page being filtered out

Maybe as a stopgap, that could be in a transformation before transformItems?

For now, we're happy that there's a workaround (mount currentRefinements/clearRefinements later than the refinement widgets) and possibly introducing UiState-based current/clearRefinements as an option.

Haroenv avatar Apr 07 '23 12:04 Haroenv