feat(search-client): Add support for Custom Search Clients #1216

francoischalifour · 2018-05-04T15:54:20Z

This PR adds support for the searchClient prop. This allows any React InstantSearch user to plug their own search client (including a custom Algolia backend).

Yes but this component is not part of the public API. The part that is exposed is createInstantSearch, it's required to keep both algoliaClient & searchClient in this component but not in InstantSearch.

react-instantsearch/packages/react-instantsearch/dom.js

Lines 5 to 9 in 388f777

const InstantSearch = createInstantSearch(algoliasearch, {

Root: 'div',

props: { className: 'ais-InstantSearch__root' },

});

export { InstantSearch };

samouss · 2018-05-06T15:50:04Z

packages/react-instantsearch/src/core/__snapshots__/createInstantSearch.test.js.snap

+        ],
+      ],
+    },
+  },


In the previous implementation we don't pass the alogliaClient to the Snapshot, otherwise every time we release a new version we need to update them. We need to do the same with searchClient

react-instantsearch/packages/react-instantsearch/src/core/createInstantSearch.test.js

Lines 22 to 33 in 388f777

it('wraps InstantSearch', () => {

const wrapper = shallow(

<CustomInstantSearch appId="app" apiKey="key" indexName="name" />

);

// eslint-disable-next-line no-shadow

const { algoliaClient, ...propsWithoutClient } = wrapper.props();

expect(wrapper.is(InstantSearch)).toBe(true);

expect(propsWithoutClient).toMatchSnapshot();

expect(wrapper.props().algoliaClient).toBe(algoliaClient);

});

samouss · 2018-05-06T15:52:26Z

packages/react-instantsearch/src/core/createInstantSearch.js

@@ -42,24 +43,49 @@ export default function createInstantSearch(defaultAlgoliaClient, root) {
    constructor(...args) {
      super(...args);

+      if (this.props.searchClient) {
+        if (this.props.appId || this.props.apiKey || this.props.algoliaClient) {
+          // eslint-disable-next-line no-console


We can remove this comment, we don't use the console.

samouss · 2018-05-06T15:52:58Z

packages/react-instantsearch/src/core/createInstantSearch.js

@@ -42,24 +43,49 @@ export default function createInstantSearch(defaultAlgoliaClient, root) {
    constructor(...args) {
      super(...args);

+      if (this.props.searchClient) {
+        if (this.props.appId || this.props.apiKey || this.props.algoliaClient) {


We can cover those cases with tests.

I messed up with my rebase. Will add it back!

samouss · 2018-05-06T15:58:15Z

packages/react-instantsearch/src/core/createInstantSearchServer.js

+      if (props.searchClient) {
+        if (props.appId || props.apiKey || props.algoliaClient) {
+          // eslint-disable-next-line no-console
+          console.warn(


According to the implementation of createInstantSearch, we should throw an error in this case. We should also warn the user that algoliaClient is deprecated when he's using it.

samouss · 2018-05-06T16:05:55Z

packages/react-instantsearch/src/core/createInstantSearch.js

        this.props.algoliaClient ||
        defaultAlgoliaClient(this.props.appId, this.props.apiKey);

-      this.client.addAlgoliaAgent(`react-instantsearch ${version}`);
+      if (typeof this.client.addAlgoliaAgent === 'function') {
+        this.client.addAlgoliaAgent(`react-instantsearch ${version}`);


We can cover this case with a test.

samouss · 2018-05-06T16:06:08Z

packages/react-instantsearch/src/core/createInstantSearch.js

-      if (nextProps.algoliaClient) {
+
+      if (nextProps.searchClient) {
+        this.client = nextProps.searchClient;


We can cover this case with a test.

Done! (I messed up with my rebase)

samouss · 2018-05-06T16:06:13Z

packages/react-instantsearch/src/core/createInstantSearch.js

-      this.client.addAlgoliaAgent(`react-instantsearch ${version}`);
+
+      if (typeof this.client.addAlgoliaAgent === 'function') {
+        this.client.addAlgoliaAgent(`react-instantsearch ${version}`);


We can cover this case with a test.

samouss · 2018-05-06T16:06:54Z

packages/react-instantsearch/src/core/createInstantSearch.js

      this.client =
+        this.props.searchClient ||


We can cover this case with a test.

francoischalifour · 2018-05-07T07:56:53Z

I applied most changes. Still to do:

francoischalifour · 2018-05-14T11:22:45Z

All changes have been made @samouss.

samouss · 2018-05-15T17:41:19Z

packages/react-instantsearch/src/core/InstantSearch.js

@@ -29,6 +29,7 @@ function validateNextProps(props, nextProps) {
 * @propType {string} indexName - Main index in which to search.
 * @propType {boolean} [refresh=false] - Flag to activate when the cache needs to be cleared so that the front-end is updated when a change occurs in the index.
 * @propType {object} [algoliaClient] - Provide a custom Algolia client instead of the internal one.


We can remove this prop from the documentation since we deprecate the option. What is the strategy in the others flavours?

Maybe description can have “deprecated” in it

Right, we deprecate algoliaClient before removing it in the next major version. I'll add a mention.

samouss · 2018-05-15T17:52:52Z

packages/react-instantsearch/src/core/createInstantSearchServer.js

+      if (typeof client.addAlgoliaAgent === 'function') {
+        client.addAlgoliaAgent(`react-instantsearch ${version}`);
+      }
+


We can cover those cases with tests.

…ent`

…nt` usages

<a name="5.1.0"></a> # [5.1.0](v5.0.3...v5.1.0) (2018-05-28) ### Bug Fixes * **connectInfiniteHits:** always set a value for previous page ([#1195](#1195)) ([4c218d5](4c218d5)) * **indexUtils:** avoid throw an error on cleanUp multi indices ([#1265](#1265)) ([12f5ace](12f5ace)) ### Features * **searchClient:** Add support for custom Search Clients ([#1216](#1216)) ([174cc28](174cc28))

Haroenv reviewed May 4, 2018

View reviewed changes

francoischalifour added 5 commits May 5, 2018 15:14

feat: Add support for searchClient

5053eb8

feat: Add stories for searchClient

4587eb1

feat: Add searchClient in createInstantSearchManager

866267b

test: Replace algoliaClient with searchClient

8d50734

test: Updage snapshot with searchClient

6b70d2b

francoischalifour force-pushed the feat/search-client branch from f4608ac to 6b70d2b Compare May 5, 2018 13:36

samouss suggested changes May 6, 2018

View reviewed changes

francoischalifour added 4 commits May 7, 2018 09:34

test: Add tests for searchClient

4ddc07b

style: Remove ESLint rule for console

2ff671a

feat: Throw if API collision on the server

ef6696b

test: Ignore searchClient in snapshot

497bfca

francoischalifour added 2 commits May 14, 2018 11:58

feat: Remove algoliaClient from InstantSearch implementation

c95e0b8

test: Test omitting addAlgoliaAgent() doesn't throw

0d37199

samouss suggested changes May 15, 2018

View reviewed changes

francoischalifour and others added 4 commits May 16, 2018 10:18

docs(algoliaClient): Deprecate algoliaClient in favor of `searchCli…

0806a6e

…ent`

test(createInstantSearchServer): Add tests for API collision

4b095b8

test(createInstantSearchServer): Test algoliaClient and `searchClie…

0493b8e

…nt` usages

Merge branch 'master' into feat/search-client

4e33880

samouss approved these changes May 17, 2018

View reviewed changes

samouss merged commit 174cc28 into master May 17, 2018

samouss deleted the feat/search-client branch May 17, 2018 10:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(search-client): Add support for Custom Search Clients #1216

feat(search-client): Add support for Custom Search Clients #1216

francoischalifour commented May 4, 2018 •

edited

Loading

algobot commented May 4, 2018 •

edited

Loading

Haroenv left a comment

Haroenv commented May 4, 2018

francoischalifour commented May 4, 2018

francoischalifour commented May 5, 2018

samouss May 6, 2018

francoischalifour May 7, 2018

samouss May 7, 2018

samouss May 6, 2018

francoischalifour May 7, 2018

samouss May 6, 2018

samouss May 6, 2018

francoischalifour May 7, 2018

samouss May 6, 2018

samouss May 6, 2018

francoischalifour May 16, 2018

samouss May 6, 2018

francoischalifour May 7, 2018

samouss May 6, 2018

francoischalifour May 16, 2018

samouss May 6, 2018

francoischalifour May 16, 2018

francoischalifour commented May 7, 2018

francoischalifour commented May 14, 2018

samouss May 15, 2018

Haroenv May 15, 2018

francoischalifour May 15, 2018

samouss May 15, 2018

francoischalifour May 16, 2018

-                algoliaClient: PropTypes.object.isRequired,
+                algoliaClient: PropTypes.object,
+                searchClient: PropTypes.object.isRequired,

	const InstantSearch = createInstantSearch(algoliasearch, {
	Root: 'div',
	props: { className: 'ais-InstantSearch__root' },
	});
	export { InstantSearch };

	it('wraps InstantSearch', () => {
	const wrapper = shallow(
	<CustomInstantSearch appId="app" apiKey="key" indexName="name" />
	);

	// eslint-disable-next-line no-shadow
	const { algoliaClient, ...propsWithoutClient } = wrapper.props();

	expect(wrapper.is(InstantSearch)).toBe(true);
	expect(propsWithoutClient).toMatchSnapshot();
	expect(wrapper.props().algoliaClient).toBe(algoliaClient);
	});

feat(search-client): Add support for Custom Search Clients #1216

feat(search-client): Add support for Custom Search Clients #1216

Conversation

francoischalifour commented May 4, 2018 • edited Loading

Related

algobot commented May 4, 2018 • edited Loading

Haroenv left a comment

Choose a reason for hiding this comment

Haroenv commented May 4, 2018

francoischalifour commented May 4, 2018

francoischalifour commented May 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

francoischalifour commented May 7, 2018

francoischalifour commented May 14, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

francoischalifour commented May 4, 2018 •

edited

Loading

algobot commented May 4, 2018 •

edited

Loading