useQueue

useQueue

Read the API Reference »

---

Introduction

This hook controls the dispatcher queues. It uses the Dispatcher to read the actual value of the queue, which is based on the queueKey retrieved from the request passed as the first argument.

A prepared Request is the minimum requirement for useQueue.

---

Initialization

const { requests, stopped, stop, start, pause } = useQueue(getUsers);

---

How it works?

useQueue uses the request to read the Dispatcher queue value based on its queueKey. Events emitted by the Dispatcher keep this hook up to date. This hook gives you the option to control every single request made in your application and manipulate whole queues and single requests. It works best with the one-by-one dispatching mode, when the queued option is set to true.

caution

Remember to make sure your request queueKey is static when you use this hook. Because it auto-generates keys, it may return wrong values if your request uses params or query params. Providing a custom queueKey when the request is created will avoid this problem.

const { requests, stopped, stop, start, pause } = useQueue(getUsers);

requests.forEach((req) => {
  req.stopRequest();
  req.startRequest();
});

stop();
pause();
start();

Read more about differences between stop, pause and start in the Dispatcher doc page.

---

Options

Configuration options for this hook are provided as the second parameter.

const { ... } = useQueue(request, options)

---

Returns

Returned values from this hook.

const values = useQueue(request);

{
  pause: () => void;
  requests: {
    request: Request;
    requestId: string;
    retries: number;
    stopped: boolean;
    timestamp: number;
    deleteRequest: () => void;
    downloading: {
      loaded: number;
      progress: number;
      sizeLeft: number;
      startTimestamp: number;
      timeLeft: number | null;
      total: number;
      };
    startRequest: () => void;
    stopRequest: () => void;
    uploading: {
      loaded: number;
      progress: number;
      sizeLeft: number;
      startTimestamp: number;
      timeLeft: number | null;
      total: number;
      };
  }[];
  start: () => void;
  stop: () => void;
  stopped: boolean;
}

Request interface

{
  request: Request;
  requestId: string;
  retries: number;
  stopped: boolean;
  timestamp: number;
  deleteRequest: () => void;
  downloading: {
    loaded: number;
    progress: number;
    sizeLeft: number;
    startTimestamp: number;
    timeLeft: number | null;
    total: number;
  };
  startRequest: () => void;
  stopRequest: () => void;
  uploading: {
    loaded: number;
    progress: number;
    sizeLeft: number;
    startTimestamp: number;
    timeLeft: number | null;
    total: number;
  };
}