API Client

HTTP requests with parameters, authentication, and typed responses.

Quick start

Add ApiClient1 in the Designer. Use the example in a page method.

// Configure a Load operation with the id parameter.
const request = ApiClient1.RequestByName('Load');
request.parameter.id = 42;
try {
  const result = await request.execute();
  console.log(result);
} catch (error) {
  Message(error instanceof Error ? error.message : String(error));
}
// The generated typed accessor also supports ApiClient1.Load.execute().

• Open the editor and create operations with a name, method, endpoint, parameters, and response schema.
• Use the generated accessor, such as ApiClient1.Load.parameter.id and ApiClient1.Load.execute(), or RequestByName('Load').
• Placeholders such as <id> in paths or bodies use parameter values. Query, Headers, and Body configure the remaining inputs.
• Import from RestGo imports published APIs. Refresh synchronizes imported clients while preserving their IDs and names.
• Choose Custom API, RestGo JWT Authentication, RestGO API Token, or RestGO Public to match the API. Each client uses one authentication mode.
• To test JWT in the editor, use Development login in RestGo integration → Connection or enter Test JWT.
• get/post/put/patch/delete support direct calls. status, error, Response, and events track the result.

Authorization for a Custom API

1. Open the API Client editor, select a request, and open Authorization.
2. In Apply to, choose Client defaults to configure a shared default or This request to override it. A request can choose Inherit from client; the client can choose Use manual headers.
3. Select No auth, Basic Auth, Bearer Token, or API Key. For Basic enter username and password; for Bearer enter the token without the Bearer prefix or whitespace. For API Key specify its name, value, and Header or Query parameter destination. Save the configuration.
4. Execute the configured operation from an event, for example ApiClient1.Load.execute(), or use ApiClient1.execute('Load'). A per-call authorization option overrides the request setting, which overrides the client default. With manual headers and no explicit authorization, existing Authorization headers are retained. Explicit authorization replaces the Authorization header; No auth removes it. An API key replaces the configured header or query parameter of the same name.

Credentials saved in the editor are stored in the project and included in generated browser applications. Use credentials intended for client-side use; masking a field in the editor does not make it secret. Code can assign ApiClient1.Connection.Authorization for the client, ApiClient1.Request.Authorization for the active request, or pass an authorization option per call. RestGo connection modes manage authorization automatically and do not accept these Custom API authorization settings. Browser CORS and server policies still apply.

More examples

// Requires an active operation configured in the Designer.
ApiClient1.Connection.Mode = 'custom';
ApiClient1.Connection.BaseURL = 'https://api.example.com';
ApiClient1.Connection.Timeout = 15_000;
ApiClient1.Method = 'POST';
ApiClient1.Endpoint = '/customers';
ApiClient1.Query['source'] = 'web';
ApiClient1.Headers['X-Source'] = 'WebRAD';
ApiClient1.Body.Kind = 'json';
ApiClient1.Body.Value = '{"name": "Ana"}';
ApiClient1.Options.Timeout = 10_000;
ApiClient1.Options.ResponseType = 'json';
ApiClient1.Options.Credentials = 'omit';
const result = await ApiClient1.execute();
console.log(result, ApiClient1.Response.Status, ApiClient1.Response.Value);

const controller = new AbortController();
try {
  const result = await ApiClient1.get('/customers', {
    query: { page: 1, active: true },
    headers: { Accept: 'application/json' },
    responseType: 'json',
    timeoutMs: 10_000,
    signal: controller.signal,
  });
  console.log(result);
} catch (error) {
  Message(error instanceof Error ? error.message : String(error));
}
// To cancel from another action: controller.abort().
// responseType accepts auto | json | text | blob | arrayBuffer.

// Configure the Load operation on a Custom API client first.
ApiClient1.RequestByName('Load').Authorization = { type: 'bearer', token: 'CLIENT-SIDE-TOKEN' };
const result = await ApiClient1.execute('Load');
console.log(result);
// Restore inheritance from client defaults for this request:
ApiClient1.RequestByName('Load').Authorization = null;

// The Load operation must exist on a Custom API client.
const result = await ApiClient1.execute('Load', {
  authorization: { type: 'api-key', name: 'X-API-Key', value: 'CLIENT-SIDE-KEY', in: 'header' },
});
console.log(result);
// Use { type: 'none' } to explicitly omit Authorization for a call.

// Use only credentials intended for browser applications.
ApiClient1.Connection.Authorization = {
  type: 'basic', username: 'CLIENT-USER', password: 'CLIENT-PASSWORD',
};
// A request can instead send a key in a query parameter:
ApiClient1.RequestByName('Load').Authorization = {
  type: 'api-key', name: 'api_key', value: 'CLIENT-SIDE-KEY', in: 'query',
};
await ApiClient1.execute('Load');
// Query parameters may be visible in server logs and browser history.

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

API in code

withRequests(): WebApiClientInstance<TOutputs, TInputs, TDefaultHeaders>;

const client = ApiClient1.withRequests();
console.log(client.status);

RequestByName<K extends keyof TOutputs & string>(name: K): WebApiRequests<TOutputs, TInputs>[K];
RequestByName(name: string): WebApiRequest;

ApiClient1.RequestByName('Load');

ParamByName(name: string): WebApiNamedParameter;

ApiClient1.ParamByName('id');

ClearParameters(): void;

ApiClient1.ClearParameters();

getOperationState<T = unknown>(operationName: string): WebApiOperationState<T>;

ApiClient1.getOperationState('Load');

subscribe(listener: () => void): () => void;

const unsubscribe = ApiClient1.subscribe(() => { console.log(ApiClient1.status); });
unsubscribe();

request<T>(path: string, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.request('/customers', { method: 'GET' });

get<T>(path: string, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.get('/customers');

post<T>(path: string, body?: unknown, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.post('/customers', { name: 'Ana' });

put<T>(path: string, body?: unknown, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.put('/customers/42', { name: 'Ana' });

patch<T>(path: string, body?: unknown, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.patch('/customers/42', { name: 'Ana' });

delete<T>(path: string, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.delete('/customers/42');

head(path: string, options?: WebApiRequestOptions): Promise<void>;

await ApiClient1.head('/customers');

options<T>(path: string, options?: WebApiRequestOptions): Promise<T>;

await ApiClient1.options('/customers');

execute<K extends keyof TOutputs & string>(operationName: K, options?: WebApiRequestOptions): Promise<TOutputs[K]>;
execute(options?: WebApiRequestOptions): Promise<TOutputs[keyof TOutputs]>;
execute<T = unknown>(operationName: string, options?: WebApiRequestOptions): Promise<T>;

const result = await ApiClient1.execute('Load', { parameters: { id: 42 } });
console.log(result);

getOutputById<T = unknown>(operationName: string, schemaNodeIdOrPath: string): T | undefined;

ApiClient1.getOutputById('Load', '/data');

getList<T = unknown>(operationName: string, schemaNodeIdOrPath: string): readonly T[];

ApiClient1.getList('Load', '/data');

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

emit(eventName: string, detail?: unknown): boolean;

dispose(): void;

Connection, request, and response objects

The options below belong to the instance’s public objects. The active operation must exist in the project. For a named operation, use the same contract in ApiClient1.Load.

ApiClient1.Connection

ApiClient1.Request

ParamByName(name: string): WebApiNamedParameter;

ApiClient1.Request.ParamByName('id');

ClearParameters(): void;

ApiClient1.Request.ClearParameters();

execute(options?: WebApiRequestOptions): Promise<TResult>;

const result = await ApiClient1.Request.execute({ parameters: { id: 42 } });
console.log(result);

ApiClient1.Body

ApiClient1.Options

ApiClient1.Response

ApiClient1.ParamByName('id')

Clear(): void;

ApiClient1.ParamByName('id').Clear();

Events

Link methods in Interaction. How to use events.

import type { WebApiClient, WebApiOperationEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async ApiClient1Request(
    sender: WebApiClient,
    event: CustomEvent<WebApiOperationEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
  }
}

import type { WebApiClient, WebApiOperationEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async ApiClient1Success(
    sender: WebApiClient,
    event: CustomEvent<WebApiOperationEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
  }
}

import type { WebApiClient, WebApiOperationEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async ApiClient1Error(
    sender: WebApiClient,
    event: CustomEvent<WebApiOperationEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
  }
}

import type { WebApiClient, WebApiOperationEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async ApiClient1Complete(
    sender: WebApiClient,
    event: CustomEvent<WebApiOperationEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
  }
}