The AppClient
component is the core of the helixml/apps-client project. It is responsible for initializing and managing the connection to the Helix Cloud backend. The AppClient
component is built using React, TypeScript, Axios, and the Helix Cloud API.
The AppClient
component is initialized by creating an instance of the AppClient
class. This class takes an apiUrl
parameter in the constructor, which is the base URL for the Helix Cloud API. Here is an example of how to initialize the AppClient
component:
const apiUrl = 'https://api.helixcloud.com';
const appClient = new AppClient(apiUrl);
The AppClient
component provides several methods for interacting with the Helix Cloud backend. These methods include:
getApps()
: Returns a list of all the apps available in the Helix Cloud backend.getApp(appId: string)
: Returns the details of a specific app by its ID.createApp(app: CreateAppRequest)
: Creates a new app in the Helix Cloud backend.updateApp(appId: string, app: UpdateAppRequest)
: Updates an existing app in the Helix Cloud backend.deleteApp(appId: string)
: Deletes an app from the Helix Cloud backend.
Here is an example of how to use the getApps()
method to retrieve a list of all the apps available in the Helix Cloud backend:
const apps = await appClient.getApps();
console.log(apps);
The AppClient
component also provides a useApps()
hook, which can be used to retrieve the list of apps in a functional component. Here is an example of how to use the useApps()
hook:
import { useApps } from './AppClient';
function MyComponent() {
const apps = useApps();
return (
<div>
{apps.map(app => (
<div key={app.id}>{app.name}</div>
))}
</div>
);
}
The AppClient
component also supports several options. These options include:
apiUrl
: The base URL for the Helix Cloud API. This option is required.headers
: Additional headers to include in all API requests.timeout
: The timeout in milliseconds for all API requests.retry
: The number of times to retry a failed API request.
Here is an example of how to initialize the AppClient
component with custom headers and a timeout:
const apiUrl = 'https://api.helixcloud.com';
const headers = {
'Authorization': 'Bearer my-token',
'X-Custom-Header': 'my-value'
};
const timeout = 10000; // 10 seconds
const appClient = new AppClient(apiUrl, { headers, timeout });
For more information on the AppClient
component, you can refer to the following resources:
- Connect an Elastic Kubernetes Service Cluster to HCP Consul | Consul | HashiCorp Developer
- client when used | Vault | HashiCorp Developer
- Flag Evaluation API | OpenFeature
- Component Definition | KubeVela
- @backstage/core-plugin-api | Backstage Software Catalog and Developer Platform
- How-to | KubeVela
- Different approaches for server-side SDK architectures | OpenFeature
- AppOptions | Backstage Software Catalog and Developer Platform
- Backend System Naming Patterns | Backstage Software Catalog and Developer Platform
- Built-in WorkflowStep Type | KubeVela
- Diagram Guide | Kubernetes
- AppRouterProps.children | Backstage Software Catalog and Developer Platform