With React

import { useQuery } from '@tanstack/react-query';
 
function Top10Users() {
  const [pagination, setPagination] = useState({ page: 1, pageSize: 10 });
  const { data, isLoading, refetch } = useQuery({
    queryKey: [{ name: 'users', entity: 'list', ...pagination }],
    queryFn: ({ signal, queryKey }) => api.users.list({
      page: queryKey[0].page,
      pageSize: queryKey[0].pageSize,
    }, { signal }),
    // ...other query options here.
  });
 
  return (
    <div>
      <div>Top 10 users:</div>
      <ul>
        {data?.records.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
      <div>Total: {data?.total}</div>
      <button type="button" onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

import { createApiProvider } from '@yme/react-api';
 
const { ApiProvider, useApi, useApiClient } = createApiProvider(api);
 
function App() {
  return (
    <ApiProvider>
      <User id={123}>
    </ApiProvider>
  );
};

function User({ id }: { id: number }) {
  const api = useApiClient();
  // or use the hook to get the api function
  // const getUser = useApi('users.one');
 
  const {
    data,
  } = useQuery({
    queryKey: [{ name: 'users', entity: 'one', id }],
    queryFn: ({ signal }) => api.users.one({ id }, { signal }),
    // TIP: use react-query selector
    // select: (data) => data.name,
  });
 
  return (
    <div>
      User: {data.name}
    </div>
  );
};