@haykal/profile-management-client

React Query hooks for user profile management — CRUD, privacy settings, avatar updates, and optimistic updates.

Installation

pnpm add @haykal/profile-management-client

Setup

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

initMutator(); // Connects to HaykalClient singleton

Hooks

Custom Hooks

| Hook | Description | | ---------------------------- | ----------------------------------------------------------- | | useMyProfile() | Current user's profile (60s stale time, skips retry on 404) | | useProfile(id) | Single profile by ID | | useUpdateProfile() | Profile update with optimistic updates and rollback | | useUpdateAvatar() | Avatar update mutation | | useUpdatePrivacySettings() | Privacy settings mutation |

Generated Hooks

All generated hooks from the OpenAPI spec are also available as re-exports.

Usage Examples

Viewing Current User's Profile

import { useMyProfile } from '@haykal/profile-management-client';

function ProfilePage() {
  const { data: profile, isLoading } = useMyProfile();

  if (isLoading) return <div>Loading...</div>;
  if (!profile) return <div>No profile found</div>;

  return (
    <div>
      <h1>{profile.data.displayName}</h1>
      <p>{profile.data.bio}</p>
    </div>
  );
}

Updating Profile with Optimistic Updates

import { useUpdateProfile } from '@haykal/profile-management-client';

function EditProfile({ profileId }: { profileId: string }) {
  const { mutate, isPending } = useUpdateProfile();

  const handleSave = (data: UpdateUserProfileDto) => {
    mutate(
      { id: profileId, data },
      { onSuccess: () => console.log('Updated with optimistic UI') },
    );
  };
}

Regenerating

nx run @haykal/profile-management-client:generate

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

Related Packages

• @haykal/profile-management-backend — Backend API
• @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