Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Send search request to Algolia with some delay #5174

Closed
Markeli opened this issue Jul 15, 2021 · 7 comments
Closed

Send search request to Algolia with some delay #5174

Markeli opened this issue Jul 15, 2021 · 7 comments
Labels
feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future.

Comments

@Markeli
Copy link

Markeli commented Jul 15, 2021

🚀 Feature

Now a new search request is sending to Aloglia on each query change. I want to reduce the number of requests to Aloglia. It would be nice if Docusarus will have some delay option n config. If the delay is set, the request will be sent if the user is not printing. Without delay in the config, the search behavior will be the same as now.

Have you read the Contributing Guidelines on issues?

Yes.

Motivation

This feature can reduce the number of requests to Algolia, and therefore reduce the costs of search.

API Design

Add new option to Algolia search plugin config. If the delay is set search query will be sent only after a user stops inputting the query. I assume that desired behavior can be easily achieved by React hooks. There is an example on StackOverflow: https://stackoverflow.com/questions/53071774/reactjs-delay-onchange-while-typing

Have you tried building it?

Unfortunately, I'm not a react developer, so I can't build it myself.

@Markeli Markeli added feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future. status: needs triage This issue has not been triaged by maintainers labels Jul 15, 2021
@slorber
Copy link
Collaborator

slorber commented Jul 15, 2021

The search modal is a react component provided by Algolia on which we don't have control, but we allow to customize it through props.

It's unlikely Docusaurus will handle that throttle/deboucing logic.

You'd rather ask the Algolia DocSearch team: if they implement this feature (maybe it already exists?), then Docusaurus will be able to use it by passing extra config options.

ping @shortcuts

@slorber slorber closed this as completed Jul 15, 2021
@Markeli
Copy link
Author

Markeli commented Jul 15, 2021

Algolia has been already supported this feature. It's named seacrhAsYouType.
https://www.algolia.com/doc/api-reference/widgets/search-box/js/
image
Can you add extra config options for it?

@shortcuts
Copy link
Contributor

Hey @Markeli,

I've attached a sandbox to the body of this PR, which will help you to implement a debounced search method.

(Need confirmation from @slorber) You should be able to add the transformSearchClient option to your docusaurus config, which will forward the logic to the DocSearch component

@slorber
Copy link
Collaborator

slorber commented Jul 15, 2021

Thanks @shortcuts

Not sure how this works exactly but we already forward props to the React component exported as @docsearch/react/modal

However this prop was already provided by @francoischalifour:

  const transformSearchClient = useCallback(
    (searchClient) => {
      searchClient.addAlgoliaAgent(
        'docusaurus',
        siteMetadata.docusaurusVersion,
      );

      return searchClient;
    },
    [siteMetadata.docusaurusVersion],
  );

And it's code that runs in the browser so it's not possible to pass a fn to the browser through Docusaurus config file. If this is the only exposed API, this means Docusaurus users will have to swizzle the component and override the existing transformSearchClient. It's not ideal but can be good enough, considering this usecase is not common. It would be simpler if the component accepted a serializable prop like transformAsYouType={false}

@Josh-Cena Josh-Cena removed the status: needs triage This issue has not been triaged by maintainers label Feb 22, 2022
@xixixao
Copy link

xixixao commented Mar 13, 2023

@slorber The current docs suggest that all algolia options are supported by the docusaurus config:
https://docusaurus.io/docs/search#customizing-the-algolia-search-behavior
It took me a while to figure out what you wrote above, that functions (transformSearchClient) cannot be passed from the config, and also that the component does not allow all the listed options (placeholder for example). We ended up swizzling the component but at least it would be great to fix the docs and mention which props are actually supported (or which ones are not).

@slorber
Copy link
Collaborator

slorber commented Mar 15, 2023

@xixixao it's not possible to provide any callback from Docusaurus config to the client-side JavaScript.

If you want to allow passing transformSearchClient you'd have to swizzle anyway.

If you want to make it easier (just wrapping instead of ejecting), I would be happy to accept a similar PR as this one: #8462

If there are props that are missing and we can add support, then I'm happy to do so => please submit a code PR. In case it's not possible to add support, happy to document so => please submit a doc PR.

@slorber
Copy link
Collaborator

slorber commented Mar 15, 2023

From what I see, we could easily allow to pass a placeholder, it's just we should apply the {...props} spread after those props.

CleanShot 2023-03-15 at 17 56 49@2x

Do you want to submit a PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature This is not a bug or issue with Docusausus, per se. It is a feature request for the future.
Projects
None yet
Development

No branches or pull requests

5 participants