feat(refreshcache): add prop refresh to InstantSearch instance #619

marielaures · 2017-11-17T13:05:07Z

Summary

The goal of this PR is to make it possible to refresh an InstantSearch instance.
It is allows the user to make a new request to Algolia in case a change has happened on the index for instance instead of getting the results from the cache.

Fixes #252.

Result

Adding a prop refresh to the InstantSearch component will trigger the refresh.
It takes a Boolean as an argument.

  <InstantSearch
        appId="xyz"
        apiKey="xyz"
        indexName="indexName"
        refresh={this.state.refresh}
  >

You can see how it works on the refreshCache story in Storybook.

algobot · 2017-11-17T13:18:37Z

Deploy preview ready!

Built with commit 9b43b48

https://deploy-preview-619--react-instantsearch.netlify.com

Haroenv

Super nice feature, code wise nothing to remark. Some smaller stylistic questions/suggestions though

Haroenv · 2017-11-17T14:29:22Z

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

+      refresh: true,
+    });
+
+    expect(ism.clearCache.mock.calls).toHaveLength(1);


toHaveBeenCalledTimes(1)

Haroenv · 2017-11-17T14:29:32Z

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

+      refresh: false,
+    });
+
+    expect(ism.clearCache.mock.calls).toHaveLength(0);


.not. toHaveBeenCalled()

Haroenv · 2017-11-17T14:29:41Z

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

+      </InstantSearch>
+    );
+
+    expect(ism.clearCache.mock.calls).toHaveLength(0);


.not. toHaveBeenCalled()

Haroenv · 2017-11-17T14:30:05Z

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

+      </InstantSearch>
+    );
+
+    expect(ism.updateIndex.mock.calls).toHaveLength(0);


.not. toHaveBeenCalled()

Haroenv · 2017-11-17T14:34:10Z

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

+      indexName: 'foobar',
+    });
+
+    expect(ism.updateIndex.mock.calls).toHaveLength(0);


.not.toHaveBeenCalled()

Haroenv · 2017-11-17T14:34:25Z

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

+      indexName: 'newindexname',
+    });
+
+    expect(ism.updateIndex.mock.calls).toHaveLength(1);


toHaveBeenCalledTimes(1)

Haroenv · 2017-11-17T14:36:35Z

stories/RefreshCache.stories.js

+        <button onClick={this.refresh} style={buttonStyle}>
+          Refresh cache
+        </button>
+        <button style={divStyle} disabled>


Why a button?

Haroenv · 2017-11-17T14:40:27Z

stories/RefreshCache.stories.js

+  }
+}
+
+stories.add('with a refresh button', () => <AppWithRefresh />);


Can you add the minimal jsx:

<InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="ikea" refresh={this.state.refresh} onSearchStateChange={() => this.setState({ refresh: false })} > <SearchBox /> <button onClick={() => this.setState(({ refresh }) => ({ refresh: !refresh }))} > Refresh cache </button> <p> Refresh is set to: <em>{displayRefresh}</em> </p> <Hits /> </InstantSearch>

This story contains a customHit component, that's why I didn't add the JSX story (see thread on the PR to add the JSX addon)

Haroenv · 2017-11-17T14:41:42Z

stories/RefreshCache.stories.js

+import { InstantSearch, SearchBox } from '../packages/react-instantsearch/dom';
+import { CustomHits } from './util';
+
+const stories = storiesOf('RefreshCache', module);


is that normal syntax? What is module?

Yes, normal syntax, see https://storybook.js.org/basics/guide-react/#create-the-config-file (then section about writing stories)

mthuret · 2017-11-17T14:48:48Z

Awesome @marielaures ❤️ . You should add a guide describing how to use this feature :)

samouss

Great work @marielaures! 🎉

Just few comments.

samouss · 2017-11-20T08:12:55Z

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

@@ -170,6 +177,8 @@ InstantSearch.propTypes = {

  createURL: PropTypes.func,

+  refresh: PropTypes.bool,


You can put this one required, since createInstantSearch will always provide the prop.

samouss · 2017-11-20T08:13:08Z

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

@@ -24,11 +24,16 @@ export default function createInstantSearch(defaultAlgoliaClient, root) {
      searchParameters: PropTypes.object,
      createURL: PropTypes.func,
      searchState: PropTypes.object,
+      refresh: PropTypes.bool,


You can put this one required, because we will enforce the fact that the value will be true|false instead of true|false|undefined|null.

samouss · 2017-11-20T08:24:48Z

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

+
+    createInstantSearchManager.mockImplementation(() => ism);
+
+    const wrapper = mount(


You can use shallow instead of mount. The former will only create a tree for the root level (much better for more focused unit test), the latter will perform a full rendering of the DOM. In you test you don't need to perform the full rendering.

samouss · 2017-11-20T08:25:59Z

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

+
+    createInstantSearchManager.mockImplementation(() => ism);
+
+    const wrapper = mount(


Same as before, prefer shallow over mount.

samouss · 2017-11-20T08:28:29Z

stories/RefreshCache.stories.js

+    this.state = {
+      refresh: false,
+    };
+    this.refresh = this.refresh.bind(this);


You can use the function property instead of bind, like you do with onSearchStateChange.

samouss · 2017-11-20T08:30:47Z

stories/RefreshCache.stories.js

+  background: '#3369e7',
+};
+
+const divStyle = {


You can use inline styles like the rest of the example. Just for coherence 🙂

vvo · 2017-11-20T16:20:59Z

This looks very good and professional, GG @marielaures. Small comments to address from peers and that's it!

benbonnet · 2017-11-23T15:21:14Z

hello, sorry is it was anounced somewhere else; is this feature already available in the main package ? usable via refresh={this.state.refresh} ?

Haroenv · 2017-11-23T15:44:38Z

@deesx this isn't published yet. You could build the library yourself and use the relative version. @samouss could you publish a beta maybe?

samouss · 2017-11-23T15:57:00Z

@Haroenv has right, it's not published yet. I will try to publish a beta tomorrow, if I have not time to do it ti will be next week!

benbonnet · 2017-11-23T17:36:52Z

@Haroenv I'll give it a try and build it. Correct me if i'm wrong, as of now it will be the only way to "trigger" a refresh of the displayed list, right ?

Haroenv · 2017-11-24T06:47:18Z

Yes, that’s the only way. It’s possible to clear the cache as described in the linked issue, but refreshing the results needs a setup like this @deesx

<a name="4.3.0-beta.0"></a> # [4.3.0-beta.0](v4.2.0...v4.3.0-beta.0) (2017-11-27) ### Bug Fixes * **babelrc:** add a key for each env development, production, es ([#547](#547)) ([fa9528d](fa9528d)) * **localizecount:** allow localized string for count in MenuSelect ([#657](#657)) ([67ebd34](67ebd34)) * **react-router-example:** Properly update search query when using browser navigation ([#604](#604)) ([9ee6600](9ee6600)) ### Features * **refreshcache:** add prop refresh to InstantSearch instance ([#619](#619)) ([19f6de0](19f6de0))

sakhmedbayev · 2018-04-04T08:36:49Z

I do not understand, has this PR ever made into official react-intantsearch package???

Haroenv · 2018-04-04T08:53:31Z

yes @sakhmedbayev, this is supported

sakhmedbayev · 2018-04-04T14:12:05Z

@Haroenv thanks for the reply. In what version it is supported? v4 or v5?

sakhmedbayev · 2018-04-04T14:25:25Z

Also, I cannot find anywhere docs for this feature except in PR's commits.

samouss · 2018-04-04T14:59:52Z

Hi @sakhmedbayev, you can find more information about this props in our documentation. We also have a guide explaining common use case that this feature solve. Here is the link of the guide. The feature is available from the version 4.3.0.

GioLogist · 2019-01-10T10:24:07Z

Is this working on React Native, specifically? Can't seem to get it working locally.

samouss · 2019-01-10T10:51:09Z

The logic is not tied to any platform so it should work for React Native. If the issue persist please provide us a working example, it will help us to better understand the issue.

marielaures force-pushed the feat/refreshcache branch from bccfd09 to 49987b4 Compare November 17, 2017 13:09

algolia deleted a comment from algobot Nov 17, 2017

marielaures requested review from vvo and samouss November 17, 2017 13:35

Haroenv reviewed Nov 17, 2017

View reviewed changes

feat(refreshcache): add prop refresh to InstantSearch instance

72d865c

marielaures force-pushed the feat/refreshcache branch from 49987b4 to 72d865c Compare November 17, 2017 16:01

samouss reviewed Nov 20, 2017

View reviewed changes

feat(refreshcache): minor updates

1f6cdaa

marielaures force-pushed the feat/refreshcache branch from 3060215 to 1f6cdaa Compare November 20, 2017 16:55

samouss approved these changes Nov 21, 2017

View reviewed changes

samouss added 2 commits November 21, 2017 22:38

Merge branch 'master' into feat/refreshcache

6805d25

Merge branch 'master' into feat/refreshcache

9b43b48

samouss merged commit 19f6de0 into master Nov 21, 2017

samouss deleted the feat/refreshcache branch November 21, 2017 21:54

marielaures mentioned this pull request Dec 18, 2017

docs(refreshcache): add guide #732

Merged

abattenburg mentioned this pull request Feb 8, 2018

Store.refresh() not working with Nuxt? algolia/vue-instantsearch#380

Closed

algolia locked as resolved and limited conversation to collaborators Jan 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(refreshcache): add prop refresh to InstantSearch instance #619

feat(refreshcache): add prop refresh to InstantSearch instance #619

marielaures commented Nov 17, 2017 •

edited

Loading

algobot commented Nov 17, 2017 •

edited

Loading

Haroenv left a comment

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017

Haroenv Nov 17, 2017 •

edited

Loading

marielaures Nov 17, 2017

Haroenv Nov 17, 2017

marielaures Nov 17, 2017 •

edited

Loading

mthuret commented Nov 17, 2017

samouss left a comment

samouss Nov 20, 2017

samouss Nov 20, 2017 •

edited

Loading

samouss Nov 20, 2017 •

edited

Loading

samouss Nov 20, 2017

samouss Nov 20, 2017 •

edited

Loading

samouss Nov 20, 2017 •

edited

Loading

vvo commented Nov 20, 2017

benbonnet commented Nov 23, 2017 •

edited

Loading

Haroenv commented Nov 23, 2017

samouss commented Nov 23, 2017

benbonnet commented Nov 23, 2017

Haroenv commented Nov 24, 2017

sakhmedbayev commented Apr 4, 2018

Haroenv commented Apr 4, 2018

sakhmedbayev commented Apr 4, 2018

sakhmedbayev commented Apr 4, 2018

samouss commented Apr 4, 2018 •

edited

Loading

GioLogist commented Jan 10, 2019

samouss commented Jan 10, 2019

		@@ -170,6 +177,8 @@ InstantSearch.propTypes = {

		createURL: PropTypes.func,

		refresh: PropTypes.bool,


		createInstantSearchManager.mockImplementation(() => ism);

		const wrapper = mount(

feat(refreshcache): add prop refresh to InstantSearch instance #619

feat(refreshcache): add prop refresh to InstantSearch instance #619

Conversation

marielaures commented Nov 17, 2017 • edited Loading

algobot commented Nov 17, 2017 • edited Loading

Haroenv left a 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

Haroenv Nov 17, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marielaures Nov 17, 2017 • edited Loading

Choose a reason for hiding this comment

mthuret commented Nov 17, 2017

samouss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samouss Nov 20, 2017 • edited Loading

Choose a reason for hiding this comment

samouss Nov 20, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samouss Nov 20, 2017 • edited Loading

Choose a reason for hiding this comment

samouss Nov 20, 2017 • edited Loading

Choose a reason for hiding this comment

vvo commented Nov 20, 2017

benbonnet commented Nov 23, 2017 • edited Loading

Haroenv commented Nov 23, 2017

samouss commented Nov 23, 2017

benbonnet commented Nov 23, 2017

Haroenv commented Nov 24, 2017

sakhmedbayev commented Apr 4, 2018

Haroenv commented Apr 4, 2018

sakhmedbayev commented Apr 4, 2018

sakhmedbayev commented Apr 4, 2018

samouss commented Apr 4, 2018 • edited Loading

GioLogist commented Jan 10, 2019

samouss commented Jan 10, 2019

marielaures commented Nov 17, 2017 •

edited

Loading

algobot commented Nov 17, 2017 •

edited

Loading

Haroenv Nov 17, 2017 •

edited

Loading

marielaures Nov 17, 2017 •

edited

Loading

samouss Nov 20, 2017 •

edited

Loading

samouss Nov 20, 2017 •

edited

Loading

samouss Nov 20, 2017 •

edited

Loading

samouss Nov 20, 2017 •

edited

Loading

benbonnet commented Nov 23, 2017 •

edited

Loading

samouss commented Apr 4, 2018 •

edited

Loading