<SearchProvider> and Gatsby fails to update search results

[samuel99]

When using Search UI together with Gatsby, the search result page is not updated. See movie and repo.

To Reproduce

1. Clone repo https://github.com/samuel99/gatsby-elastic-search-ui
2. Run npm install
3. Run gatsby build && gatsby serve
4. Open http://localhost:9000
5. In the header, type yosemite, notice that autocomplete hits are shown.
6. Press enter to be redirected to the search results page.
7. Notice that one hit for Yosemite is shown.
8. Now enter Yellowstone in the header search box and press enter.
9. Search results are not updated, only hit still being displayed is Yosemite.

Expected behavior
Search result page should update and show hit for Yellowstone.

Movie
https://user-images.githubusercontent.com/223954/218965171-359a0a21-7324-4060-a1ed-dbd910e821b2.mp4

Which backends and packages are you using:
Backend: App Search, Gatsby
Packages: react-search-ui, search-ui-app-search-connector, gatsby (see package.json in repo for more info)

More info
As you can see in the github repo, I have two instances of <SearchProvider>. One in layout.js wrapping the header searchbox and one in searchresult.js wrapping the result listing. But I have also tried moving the <SearchProvider> to gatsby-browser.js and add it there so one provider wraps the entire page, like so:

export const wrapRootElement = ({ element }) => {
    return <SearchProvider config={config}>{element}</SearchProvider>;
};

If I do like this the search result page updates as it should, but instead it breaks the SSR on all pages, so no rendered HTML is returned from the server, which is kind of the thing with Gatsby.

Any help greatly appreciated!

[joemcelroy]

hey @samuel99,

We do not support SSR #673.

I have two alternatives:

• Use the client SDK and build your own components https://www.npmjs.com/package/@elastic/app-search-javascript. I understand this not the most ideal solution.
• If you're open to using Elasticsearch natively, look towards using searchkit. Here is the SSR demo https://www.searchkit.co/ssr-demo

[samuel99]

The bug report was not about me expecting Search UI to render SSR. I understand that is not supported.

But rather that this works:

onSubmit={(searchTerm) => {
    window.location.href = `${PATH_TO_YOUR_SEARCH_PAGE}?q=${searchTerm}`;
  }}

but not this:

onSubmit={(searchTerm) => {
    navigate(`${PATH_TO_YOUR_SEARCH_PAGE}?q=${searchTerm}`); 
  }}

navigate is Gatsbys native routing component to navigate to other pages without losing state. A window.location.href forces a complete reload of the page.

[joemcelroy]

mentioned in slack but you can override search ui's default routing with routing options https://docs.elastic.co/search-ui/api/core/configuration#routing-options