import { FrontierService } from '@raystack/proton/frontier';
import { createConnectTransport } from '@connectrpc/connect-web';
import { createPromiseClient } from '@connectrpc/connect';

const transport = createConnectTransport({
  baseUrl: 'https://api.example.com'
});

const client = createPromiseClient(FrontierService, transport);

const users = await client.listUsers({ pageSize: 10 });

import { FrontierService } from '@raystack/proton/frontier';
import { createConnectTransport } from '@connectrpc/connect-node';
import { createPromiseClient } from '@connectrpc/connect';

const transport = createConnectTransport({
  baseUrl: 'https://api.example.com',
  httpVersion: '2'
});

const client = createPromiseClient(FrontierService, transport);

const users = await client.listUsers({ pageSize: 10 });

import { FrontierServiceQueries } from '@raystack/proton/frontier';
import { useQuery } from '@tanstack/react-query';

function UsersList() {
  const { data, isLoading } = useQuery(
    FrontierServiceQueries.listUsers(transport, { pageSize: 10 })
  );

  if (isLoading) return <div>Loading...</div>;
  
  return (
    <ul>
      {data?.users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}