Getting Started

1//==> config/hosby.config.ts (file name)
2import { HosbyClient } from "hosby-ts";
3
4class HosbyQuery {
5  private readonly _client: HosbyClient;
6  private isInitialized = false;
7
8  constructor() {
9    this._client = new HosbyClient({
10      baseURL: process.env.HOSBY_BASE_URL || "",
11      privateKey: process.env.HOSBY_PRIVATE_KEY || "",
12      apiKeyId: process.env.HOSBY_API_KEY_ID || "",
13      projectName: process.env.HOSBY_PROJECT_NAME || "",
14      projectId: process.env.HOSBY_PROJECT_ID || "",
15      userId: process.env.HOSBY_USER_ID || "",
16    });
17
18    this.initialize().catch(error => {
19      console.error("Failed to initialize Hosby client:", error);
20      throw new Error("Hosby client initialization failed");
21    });
22  }
23
24  private async initialize(): Promise<void> {
25    if (this.isInitialized) return;
26
27    try {
28      await this._client.init();
29      this.isInitialized = true;
30      console.log("Hosby client initialized successfully");
31    } catch (error) {
32      console.error("Error initializing Hosby client:", error);
33      throw new Error("Failed to initialize Hosby client. Check your connection and credentials.");
34    }
35  }
36 
37  public get client(): HosbyClient {
38    if (!this.isInitialized) {
39      throw new Error("Hosby client not initialized. Ensure the service is loaded before use.");
40    }
41    return this._client;
42  }
43}
44
45export const hosbyQuery = new HosbyQuery().client;

1//==> UserList.tsx NextJS (Example)
2'use client';
3import hosby from '../config/hosby.config';
4import { useState, useEffect } from 'react';
5
6interface User {
7  id: string;
8  name: string;
9  email: string;
10  role?: string;
11  active?: boolean;
12  createdAt?: Date;
13  updatedAt?: Date
14}
15
16const UserList = () => {
17  const [users, setUsers] = useState<User[]>([]);
18  const [isLoading, setIsLoading] = useState(false);
19  const [error, setError] = useState<Error | null>(null);
20
21  useEffect(() => {
22    const fetchUsers = async () => {
23      setIsLoading(true);
24      setError(null);
25      
26      try {
27        const response = await hosby.find<User[]>('users');
28        
29        if (response.success) {
30          setUsers(response.data);
31        } else {
32          throw new Error('Failed to fetch users');
33        }
34      } catch (err) {
35        setError(err instanceof Error ? err : new Error('Unknown error occurred'));
36        console.error('Error fetching users:', err);
37      } finally {
38        setIsLoading(false);
39      }
40    };
41
42    fetchUsers();
43  }, []);
44  
45  return (
46    <div>
47    {isLoading ? (
48      <div className="flex items-center justify-center p-4">
49        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
50      </div>
51    ) : error ? (
52      <div className="p-4 text-red-500">
53        <p>Error: {error.message}</p>
54      </div>
55    ) : (
56      <div className="space-y-4 p-4">
57        <h2 className="text-xl font-semibold">Users</h2>
58        <div className="grid gap-4">
59          {users.map((user) => (
60            <div 
61              key={user.id}
62              className="p-4 border rounded-lg shadow-sm hover:shadow-md transition-shadow"
63            >
64              <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
65                <div>
66                  <h3 className="font-medium">{user.name}</h3>
67                  <p className="text-sm text-gray-500">{user.email}</p>
68                </div>
69                {user.role && (
70                  <span className="px-2 py-1 text-xs rounded-full bg-primary/10 text-primary self-start">
71                    {user.role}
72                  </span>
73                )}
74              </div>
75              <div className="mt-2 text-sm text-gray-500">
76                {user.active !== undefined && (
77                  <span className="inline-flex items-center">
78                    {user.active ? 'Active' : 'Inactive'}
79                  </span>
80                )}
81              </div>
82            </div>
83          ))}
84        </div>
85      </div>
86    )}
87    </div>
88  )
89}
90
91  export default UserList