@haykal/storage-client

React Query hooks for file storage — upload, download, list files, and manage signed URLs.

Installation

pnpm add @haykal/storage-client

Setup

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

initMutator(); // Connects to HaykalClient singleton

Hooks

| Hook | Description | | ---------------------- | --------------------------- | | useUploadFile() | Upload a single file | | useUploadFiles() | Upload multiple files | | useFiles() | List files (paginated) | | useFile(id) | Get file metadata | | useDownloadFile(id) | Download a file | | useSignedUploadUrl() | Get a pre-signed upload URL | | useDeleteFile() | Delete a file |

Usage Examples

File Upload

import { useUploadFile } from '@haykal/storage-client';

function FileUploader() {
  const { mutate, isPending } = useUploadFile();

  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      mutate(
        { file },
        {
          onSuccess: (result) => console.log('Uploaded:', result.data.id),
        },
      );
    }
  };

  return <input type="file" onChange={handleFile} disabled={isPending} />;
}

File Gallery

import { useFiles } from '@haykal/storage-client';

function FileGallery() {
  const { data, isLoading } = useFiles();

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

  return (
    <div>
      {data?.data?.map((file) => (
        <div key={file.id}>
          <span>{file.originalName}</span>
          <span>{file.mimeType}</span>
        </div>
      ))}
    </div>
  );
}

Regenerating

nx run @haykal/storage-client:generate

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

Related Packages

• @haykal/storage-backend — Backend API with local/S3 providers
• @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