The component which allows your user to specify a text based query.
Your implementation would look something like this where you would call
search functions and will update the query variables.
Two key points:
- useSearchkitQueryValue provides an API like
useStatehook but listens to changes to the query within searchkit instance. For example, if the customer navigated back and the query was updated to a previous value, the hook will update automatically.
- useSearchkit hook to get the searchkit's instance from the provider and then call
searchfunctions to update the query and execute a new search.
setQuerymethod will reset the pagination and filters when invoked.
- GraphQL variables (provided by the
useSearchkitVariableshook) will be updated with the new query value.
Below is an example component for Search query.