Skip to content
This repository has been archived by the owner on Dec 30, 2022. It is now read-only.

Make it possible to refresh a InstantSearch instance #252

Closed
Haroenv opened this issue Aug 10, 2017 · 16 comments
Closed

Make it possible to refresh a InstantSearch instance #252

Haroenv opened this issue Aug 10, 2017 · 16 comments

Comments

@Haroenv
Copy link
Contributor

Haroenv commented Aug 10, 2017

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 #100, #131, algolia/vue-instantsearch#241 and this discourse post

@mthuret
Copy link
Contributor

mthuret commented Aug 10, 2017

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
Copy link
Contributor Author

Haroenv commented Aug 10, 2017

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 algolia/vue-instantsearch#241 (comment)

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
Copy link
Contributor

mthuret commented Aug 10, 2017

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
Copy link
Contributor Author

Haroenv commented Aug 10, 2017

How can you call that function then?

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

@mthuret
Copy link
Contributor

mthuret commented Aug 10, 2017

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
Copy link
Contributor Author

Haroenv commented Aug 10, 2017

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

screen shot 2017-08-10 at 18 35 03

@vinhlh
Copy link
Contributor

vinhlh commented Sep 3, 2017

Could we provide an option to clear specified records?

@Haroenv
Copy link
Contributor Author

Haroenv commented Sep 4, 2017

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
Copy link
Contributor

vinhlh commented Sep 5, 2017

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
Copy link
Contributor Author

Haroenv commented Sep 5, 2017

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
Copy link
Contributor

mthuret commented Sep 7, 2017

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
Copy link
Contributor Author

Haroenv commented Sep 7, 2017

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
Copy link
Contributor

vvo commented Sep 7, 2017

LGTM 👍

@LaurentLousky
Copy link

LaurentLousky commented Sep 7, 2017 via email

@sokki
Copy link

sokki commented Nov 8, 2017

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
Copy link
Member

marielaures commented Nov 8, 2017

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants