@haykal/email-client

React Query hooks for email management — send emails, manage templates, and preview rendered templates.

Installation

pnpm add @haykal/email-client

Setup

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

initMutator(); // Connects to HaykalClient singleton

Hooks

Email Sending

| Hook | Description | | ------------------------ | ------------------------------------ | | useSendEmail() | Send a raw email (to, subject, body) | | useSendTemplateEmail() | Send email using a template |

Template Management

| Hook | Description | | --------------------------- | ---------------------------------------- | | useEmailTemplates() | List all email templates | | useEmailTemplate(id) | Get template by ID | | useCreateEmailTemplate() | Create a new template | | useUpdateEmailTemplate() | Update an existing template | | useDeleteEmailTemplate() | Delete a template | | usePreviewEmailTemplate() | Render template preview with sample data |

Query Keys

| Export | Description | | --------------------------- | ----------------------------- | | getEmailTemplatesQueryKey | Cache key for template list | | getEmailTemplateQueryKey | Cache key for single template |

Usage Examples

Sending a Template Email

import { useSendTemplateEmail } from '@haykal/email-client';

function SendButton({ templateId, userId }: Props) {
  const { mutate, isPending } = useSendTemplateEmail();

  return (
    <button
      disabled={isPending}
      onClick={() =>
        mutate({
          templateId,
          to: '[email protected]',
          variables: { name: 'John' },
        })
      }
    >
      Send Email
    </button>
  );
}

Managing Templates

import {
  useEmailTemplates,
  useCreateEmailTemplate,
} from '@haykal/email-client';

function TemplateList() {
  const { data } = useEmailTemplates();
  const { mutate: create } = useCreateEmailTemplate();

  return (
    <ul>
      {data?.data?.map((t) => (
        <li key={t.id}>{t.name}</li>
      ))}
    </ul>
  );
}

Regenerating

nx run @haykal/email-client:generate

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

Related Packages

• @haykal/email-backend — Backend API with provider abstraction
• @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