React-instantsearch: SSR: injecting filter

[callmephilip]

Describe the bug 🐛

I am unable to inject filters via search state using next SSR example

To Reproduce 🔍

1. Use the branch here https://github.com/bakery/react-instantsearch/tree/search-state-filter-inject-ssr
2. cd examples/next
3. yarn install
4. npm run dev
5. navigate to http://localhost:3000/ and see all the products listed (nothing filtered)

Expected behavior 💭

I expect to only see products that are categorized as "Appliances"

Additional context

Updated code: https://github.com/bakery/react-instantsearch/blob/search-state-filter-inject-ssr/examples/next/pages/index.js#L34

[rhodimus]

~Object assign returns a new object~, so you'll need to so something like this and make sure you pass this new object down instead of searchState everywhere:

const customSearchState = Object.assign(searchState, {
    configure: {
        filters: 'categories:Appliances',
    },
});

You'll then need to pass this searchState into the component
<Configure {...this.props.searchState.configure} />

Further explanation here: https://github.com/algolia/react-instantsearch/issues/1982#issuecomment-460295364

[callmephilip]

@rhodimus Object.assign also modifies target object so searchState gets updated properly. gonna try your second suggestion

[callmephilip]

adding <Configure {...this.props.searchState.configure} /> does a trick on the server side so the original page load arrives with appliances only but it then gets overwritten client side with a new query that pulls all the products again

[rhodimus]

this is because searchState is updated in componentDidMount() using the current window query string params, causing a client side update: https://github.com/bakery/react-instantsearch/blob/search-state-filter-inject-ssr/examples/next/pages/index.js#L56

For my purposes, I just removed the componentDidMount(), but you might also want to look at these too:
https://github.com/bakery/react-instantsearch/blob/search-state-filter-inject-ssr/examples/next/pages/index.js#L45
https://github.com/bakery/react-instantsearch/blob/search-state-filter-inject-ssr/examples/next/pages/index.js#L60

[callmephilip]

@rhodimus good point! let me dig a bit deeper

[samouss]

@callmephilip did you manage to fix your issue?

[callmephilip]

@samouss i did, yes. thanks for your help @rhodimus