THIS IS ARCHIVED DOCUMENTATION

QueryTrigger (Deprecated)

The QueryTrigger controller handles query triggers.

Methods

subscribe

Adds a callback that’s invoked on state change.

Parameters

  • listener: () => void

    A callback that’s invoked on state change.

Returns Unsubscribe: A function to remove the listener.

Attributes

state

the state of the QueryTrigger controller.

Properties

  • newQuery: string

    The new query to perform a search with after receiving a query trigger.

  • originalQuery: string

    The query used to perform the search that received a query trigger in its response.

  • wasQueryModified: boolean

    A boolean to specify if the controller was triggered resulting in a modification to the query.

Initialize

buildQueryTrigger

Creates a QueryTrigger controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns QueryTrigger

Unsubscribe

Call signatures

  • (): void

Example Implementation

query-trigger.fn.tsx

import {useEffect, useState, FunctionComponent} from 'react';
import {QueryTrigger as HeadlessQueryTrigger} from '@coveo/headless';
 
interface HeadlessQueryTriggerProps {
  controller: HeadlessQueryTrigger;
}
 
export const QueryTrigger: FunctionComponent<HeadlessQueryTriggerProps> = (
  props
) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => updateState()), []);
 
  const updateState = () => {
    setState(props.controller.state);
  };
 
  if (state.wasQueryModified) {
    return (
      <div>
        The query changed from {state.originalQuery} to {state.newQuery}
      </div>
    );
  }
  return null;
};
 
// usage
 
/**
 * ```tsx
 * const controller = buildQueryTrigger(engine);
 *
 * <QueryTriggerFn controller={controller} />;
 * ```
 */