Reactivesearch: Calling `triggerQuery` outside provided callback functions

[jkhaui]

For what it's worth, I think what you've done with ReactiveSearch is great—so much so that I've purchased a couple of the marketplace templates. Cool stuff, keep it up.

But I do have issues regarding fine-grained control. I need to build a search feature that detects when a user is typing, and then, only when they stop typing, it should automatically execute a search query _without_ the user pressing Enter or clicking Search. The steps I'm doing to achieve this:
1) Use an RxJS function to hold the isTyping state;
2) If isTyping is false, then I should have the option to call triggerQuery somewhere as a side-effect.

The issue is in step 2. I've tried calling triggerQuery within the provided onChange callbacks, like so:

  const handleChange = (value, triggerQuery) => {
    client.writeData({
      data: {
        searchQuery: value,
      },
    });

    if (!isTyping) {
      // If the user is NOT typing, then execute the search query.
      triggerQuery();
    }
  };

The above code doesn't work though, because isTyping will always be true inside the handler function. So I don't think there's any way to achieve this (as far as I'm aware) unless the library exposes triggerQuery outside the callback functions. Then I'd do something like:

  useEffect(() => {
    if (!isTyping) {
      triggerQuery();
    }
  }, [isTyping]);

Finally, I've seen others also asking for more control over how/when the query executes, so I think many people would benefit from making triggerQuery accessible anywhere. What do you guys think?

[ShahAnuj2610]

I got your point. But isn't it possible to store triggerQuery globally in your local component something like:

 let triggerQuery;

 useEffect(() => {
    if (!isTyping) {
       if (triggerQuery) triggerQuery();
    }
  }, [isTyping]);

 const handleChange = (value, triggerQuery) => {
    triggerQuery = triggerQuery;
    client.writeData({
      data: {
        searchQuery: value,
      },
    });

    if (!isTyping) {
      // If the user is NOT typing, then execute the search query.
      triggerQuery();
    }
  };

You can also use React ref.
I would recommend this ^.

[jyash97]

Hey @jkhaui

Thanks for using ReactiveSearch and providing valuable feedback with the issues.

For now either you can use the above thread to do this or you can make use of ref and access the method directly.

[jkhaui]

Ah yes, the simple answer was to store triggerQuery in a ref! I'd tried assigning it as a normal variable previously and it kept returning undefined. But the ref works perfectly.

Thanks a lot @ShahAnuj2610 @jyash97