@ph-cms/client-sdk-admin

Admin-only PH-CMS Client SDK.

This package provides:

• A typed API client for administrative endpoints
• React context and hooks for consuming the admin client in UI code
• Integrated React Query support (from v0.1.1)

Installation

npm install @ph-cms/client-sdk-admin

Note: @tanstack/react-query is a direct dependency from v0.1.1. You no longer need to install it manually unless you use it in your own application code.

Usage (Core SDK)

import { PHCMSAdminClient } from '@ph-cms/client-sdk-admin';

const client = new PHCMSAdminClient({
  baseURL: 'https://api.example.com',
  apiKey: 'your-admin-api-key', // if using API key auth
});

// Use the modules directly
const users = await client.user.list({
  page: 1,
  limit: 20,
});

React Usage (v0.1.1+)

From version 0.1.1, PHCMSAdminProvider automatically includes a QueryClientProvider. You don't need to wrap your app with QueryClientProvider manually to use admin-sdk hooks.

Basic Setup

import { PHCMSAdminProvider } from '@ph-cms/client-sdk-admin';
import { adminClient } from './lib/sdk'; // Your pre-configured admin client

export function App() {
  return (
    <PHCMSAdminProvider client={adminClient}>
      <YourAdminComponents />
    </PHCMSAdminProvider>
  );
}

Using Hooks

import { useUserList, usePolicy } from '@ph-cms/client-sdk-admin';

function UserManagement() {
  const { data: users, isLoading } = useUserList();

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

  return (
    <div>
      <h1>User Management</h1>
      <ul>
        {users?.items.map(user => (
          <li key={user.uid}>{user.email} ({user.role})</li>
        ))}
      </ul>
    </div>
  );
}

Custom QueryClient (Optional)

If your application already uses React Query and you want to share the cache/settings:

import { QueryClient } from '@tanstack/react-query';
import { PHCMSAdminProvider } from '@ph-cms/client-sdk-admin';

const queryClient = new QueryClient();
const adminClient = new PHCMSAdminClient({ baseURL: '...' });

export function App() {
  return (
    <PHCMSAdminProvider client={adminClient} queryClient={queryClient}>
      {/* Both your app and Admin SDK hooks will use the same queryClient */}
      <YourAdminComponents />
    </PHCMSAdminProvider>
  );
}

License

MIT