The apiRequest utility function provides easy access to the API URL along with applying the correct Headers to the request.
type Method = "GET" | "POST" | "PUT" | "HEAD" | "DELETE";
/**
* Build and returns a API fetch request.
* @example buildRequest("v1/user/profile", "GET");
* @example buildRequest("v1/login", "POST", { email: email, password: password, name: name,});
*/
function apiRequest(route: string, method: Method = "GET", body: any = null) {
return fetch(`${API_URL}/${route.replace(/^\//, "").trim()}`, buildRequestOptions(method, body));
}
The buildRequestOptions utility function builds and returns a fetch options object, learn more about the Fetch API.
type Method = "GET" | "POST" | "PUT" | "HEAD" | "DELETE";
function buildRequestOptions(method: Method = "GET", body: any = null): RequestInit {
const options: RequestInit = {
method: method,
headers: buildHeaders(),
credentials: "include",
};
if (body) {
options.body = JSON.stringify(body);
}
return options;
}
The buildHeaders utility function builds and returns a new Headers object, learn more about Headers.
function buildHeaders(): Headers {
return new Headers({
"Content-Type": "application/json",
Accept: "application/json",
});
}
The buildResponseCore utility function builds and returns a ResponseCore object.
interface ResponseCore {
Success: boolean;
StatusCode: number;
Error: string;
}
function buildResponseCore(success: boolean, statusCode: number, error: string = null): ResponseCore {
return {
Success: success,
StatusCode: statusCode,
Error: error,
};
}
All responses should build upon the ResponseCore interface. New response types should be declared in the Client/Scripts/types.d.ts file.
// types.d.ts
interface ExampleResponse extends ResponseCore {
Example: any;
}
// account.ts
async function GetExampleData(): Promise<ExampleResponse> {
const request = await apiRequest("/v1/example");
const fetchResponse: FetchReponse = await request.json();
const response: Partial<ExampleResponse> = buildResponseCore(fetchResponse.success, request.status, fetchResponse.error);
if (response.Success) {
response.Example = fetchResponse.data;
}
return response as ExampleResponse;
}