QueryError

This is for:

Developer

Example Implementation

query-error.fn.tsx

import {QueryError as HeadlessQueryError} from '@coveo/headless';
import {useEffect, useState, FunctionComponent} from 'react';
 
interface QueryErrorProps {
  controller: HeadlessQueryError;
}
 
export const QueryError: FunctionComponent<QueryErrorProps> = (props) => {
  const {controller} = props;
  const [state, setState] = useState(controller.state);
 
  useEffect(() => controller.subscribe(() => setState(controller.state)), []);
 
  if (!state.hasError) {
    return null;
  }
 
  return (
    <div>
      <div>Oops {state.error!.message}</div>
      <code>{JSON.stringify(state.error)}</code>
    </div>
  );
};
 
// usage
 
/**
 * ```ts
 * const controller = buildQueryError(engine);
 *
 * <QueryError controller={controller} />;
 * ```
 */

The QueryError controller allows to retrieve information about the current error returned by the search API, if any.

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 QueryError controller.

Properties

  • error: ErrorPayload | null

    The current error for the last executed query, or null if none is present.

  • hasError: boolean

    true if there’s an error for the last executed query and false otherwise.

Initialize

buildQueryError

Creates a QueryError controller instance.

Parameters

  • engine: SearchEngine

    The headless engine.

Returns QueryError

Unsubscribe

Call signatures

  • (): void