@haykal/jobs-client

React Query hooks for job queue management — inspect queues, monitor jobs, and control queue operations.

Installation

pnpm add @haykal/jobs-client

Setup

import { initMutator } from '@haykal/jobs-client';

initMutator(); // Connects to HaykalClient singleton

Hooks

Queue Inspection

| Hook | Description | | --------------------------- | ------------------------------------------- | | useQueues() | List all queues with stats | | useQueue(name) | Get queue details | | useJobs(queueName, query) | List jobs in a queue (filterable by status) | | useJob(queueName, jobId) | Get job details |

Queue Control

| Hook | Description | | ------------------- | --------------------------- | | usePauseQueue() | Pause a queue | | useResumeQueue() | Resume a paused queue | | useRetryAllJobs() | Retry all failed jobs | | useCleanQueue() | Clean completed/failed jobs |

Usage Examples

Queue Dashboard

import { useQueues } from '@haykal/jobs-client';

function QueueDashboard() {
  const { data, isLoading } = useQueues();

  if (isLoading) return <div>Loading...</div>;

  return (
    <table>
      <thead>
        <tr>
          <th>Queue</th>
          <th>Active</th>
          <th>Waiting</th>
          <th>Failed</th>
        </tr>
      </thead>
      <tbody>
        {data?.data?.map((q) => (
          <tr key={q.name}>
            <td>{q.name}</td>
            <td>{q.active}</td>
            <td>{q.waiting}</td>
            <td>{q.failed}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Retrying Failed Jobs

import { useRetryAllJobs } from '@haykal/jobs-client';

function RetryButton({ queueName }: { queueName: string }) {
  const { mutate, isPending } = useRetryAllJobs();

  return (
    <button disabled={isPending} onClick={() => mutate({ name: queueName })}>
      Retry All Failed
    </button>
  );
}

Regenerating

nx run @haykal/jobs-client:generate

Never edit files in src/generated/ — they are auto-generated by Orval.

Related Packages

• @haykal/jobs-backend — Backend API with BullMQ
• @haykal/core-client — HTTP client and React Query provider

Further Reading

• Client SDK Generation — Orval pipeline and regeneration
• API Reference — Backend endpoints these hooks call