Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Share driver between multiple instances of SearchProvider

See original GitHub issue

The children of SearchProvider will only render when the driver has been initialized, which on SSR, only happens client-side:

https://github.com/elastic/search-ui/blob/81bc09c90e3ca73e5565c505084ec4613f463099/packages/react-search-ui/src/SearchProvider.js#L52-L54

We use SearchBox on every page and on the search results page we of course also use SearchResults (and friends). On the search page we wrap pretty much everything in SearchProvider, but on the other pages we can’t because that would hurt our SEO (the server-side rendered page would be close to empty).

So what we did is wrap just SearchBox, but as this lives under a component also used on the search page you end up with two nested SearchProvider and we noticed they both make the same requests when on the search page.

To work around this for now, we’re using this instead of the SearchProvider directly:

const SearchProviderOnce = (props: Props) => {
  const { children } = props;

  return (
    <SearchContext.Consumer>
      {value => value ? children : (
        <SearchProvider config={config}>{children}</SearchProvider>
      )}
    </SearchContext.Consumer>
  );
};

This ensures that we only wrap once.

A more clean solution would be great, e.g. by sharing all SearchProvider instances (at least those with the same config property) or their drivers.

Issue Analytics

State:
Created 4 years ago
Reactions:2
Comments:8 (7 by maintainers)

Top GitHub Comments

2reactions

JasonStoltzcommented, Aug 19, 2020

Hey @FokkeZB, I believe I may have resolved a bit unintentionally, and it never occurred to me to follow up here.

https://github.com/elastic/search-ui/commit/2bf0a330ebbc755ac16d5a9643a4d88d3d38265d

I made it so that a SearchDriver can be instantiated independently of a SearchProvider, and then passed in as a prop to SearchProvider.

This essentially means that you can have multiple SearchProviders on a page that all work as a single unit.

Here is a working example of this in action: https://codesandbox.io/s/search-ui-national-parks-example-forked-4e5ti?file=/src/App.js

const driver = new SearchDriver(config);

export default function App() {
  return (
    <div className="App">
      <Header>
          <SearchProvider driver={driver}>
            <SearchBox />
          </SearchProvider>
      </Header>
      <Body>
          <SearchProvider driver={driver}>
            <Results />
          </SearchProvider>       
      </Body>
    </div>
   )
}

0reactions

JasonStoltzcommented, Jul 18, 2022

I believe we fixed this issue here. I’m going to close this issue.

Top Results From Across the Web

Can I run multiple instances at once(simultaneously) with ...

You can invoke multiple browser sessions by just creating multiple driver objects, and managing them. Each session will be separate if you want ......

Dataprovider & TestNG XML: Parameterization in Selenium ...

It is a strategy of execution which automatically runs test cases multiple times using different values. The concept achieved by parameterizing ...

Run Selenium Tests using DataProvider & TestNG

DataProvider helps with data-driven test cases that carry the same methods but can be run multiple times with different data sets.

How to Pass WebDriver Instance to Another Class in Selenium

How to Pass WebDriver Instance to multiple Classes in Selenium 1.public WebDriver object 2.Java extends keyword 3.Required Classes.

Lecture 15 : Sharing the selenium webdriver and ... - YouTube

... definition methods in different classes and still share the Selenium Webdriver and other test data in Cucumber scenarios … Show more.