React-instantsearch: Make it possible to refresh a InstantSearch instance

[Haroenv]

Do you want to request a feature or report a bug?

Feature

Feature: What is your use case for such a feature?

When you add an object to your index, you want the frontend to be updated. Right now this can be done _slightly_, by having a custom client, calling .clearCache and then somehow triggering a new search (mounting/unmounting or simulating an event in the input), but that's quite hacky.

Feature: What is your proposed API entry? The new option to add? What is the behavior?

A widget and connector for refresh. It should call client.clearCache(), and search again with the current parameters.

This can also be useful if you want a "definitely search" button.

related to https://github.com/algolia/react-instantsearch/issues/100, https://github.com/algolia/react-instantsearch/issues/131, https://github.com/algolia/vue-instantsearch/issues/241 and this discourse post

[mthuret]

I agree we should do something about this use case.

What would be the API of such a widget? How do you expect to use it? Same for the connector?

What that would bring compare to a simple function?

Can you clarify the concept of a "definitely search" button?

[Haroenv]

for "definitely search", I had a use case in mind, where none of your filters are actually applied until you press a button to search (not exactly our ideal usecase), but now that I think about it again, that would need another concept.

The widget would be rendering a button, on click, the results would refine. You could add that component yourself dynamically whenever you get a notice from your backend somehow that the data is stale.

const App = () =>
  <InstantSearch>
    <SearchBox />
    <Refresh />
    <Hits />
    <Pagination />
  </InstantSearch>;

This pattern is described in https://github.com/algolia/vue-instantsearch/issues/241#issuecomment-320210145

The connector would look like this:

const Refresh = connectRefresh(({ refine }) =>
  <button onClick={() => refine()}> refresh </button>
);

The refine function here will clear the cache, do a new query and update the results with that new query

[mthuret]

This would mean adding a side effect to call the clearCache inside the refine function (which the purpose is to return a new searchState based on the current one). I'm not a fan of the idea.

Why not just having a regular refresh function. I'm also wondering if could have something directly on the <InstantSearch/> component.

[Haroenv]

How can you call that function then?

(sorry, I feel out of the loop for a moment)

[mthuret]

Either with another HOC or indirectly by having

<InstantSearch refresh> // to use in conjonction with `onSearchStateChange` to toggle to false? 
   ...  
</InstantSearch>

I thing it's good to explore options and compare each trade-off of them :)

[Haroenv]

As possible UI inspiration, here's what this message looks like in Safari DevTools search

[vinhlh]

Could we provide an option to clear specified records?

[Haroenv]

What exactly do you mean by that, @vinhlh; I have the feeling it might be an unrelated issue, feel free to open another issue for that.

[vinhlh]

I mean, this issue is about adding an object to the index. What I did concern is similar: removing an object from the index.
I don't want to clear the whole client cache but only deleted objects. Should we?

[Haroenv]

It will be more efficient to clear the cache than to store which objects are deleted; it will also not be simple to actually know which objects are deleted, so clearing the cache on a certain moment seems better to me.

[mthuret]

I did some research about this API request and here is what I propose:

1. adding a prop refresh on InstantSearch
2. when set to true, we clear the cache and we make a new search
3. refresh should be then set to false using a React lifecycle hook or onSearchStateChange.

@VincentCtr @georgejor @pyankoff @LaurentLousky @vinhlh @vvo @Haroenv: what do you think?

[Haroenv]

I'm not 100% convinced, but with the onSearchStateChange it's pretty simple to implement. Would love to see this pattern possible, and that's a reasonable solution 😄

[vvo]

LGTM 👍

[LaurentLousky]

Yeah that looks good to me as well!

On Thu, Sep 7, 2017 at 4:11 PM Vincent Voyer [e-mail]
wrote:

LGTM 👍

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/algolia/react-instantsearch/issues/252#issuecomment-327794671,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AEd9heXD40XCf5gt5WRsNi_NPLYSa7Gfks5sf-udgaJpZM4OzQCv
.

[sokki]

I'm also craving for this feature.

In the meanwhile, I helped me with this hack:

  clearCache() {
    this.setState({
      clearedCache: -(new Date()),
    });
  }

...

<Configure filters={`createdAt > ${this.state.clearedCache}`} />

[marielaures]

Thank you for sharing it @sokki, this feature is currently being worked on. Stay tuned! :)