Hooks

import { createFetchClient } from "@zayne-labs/callapi";

const client = createFetchClient({
	onRequestStream: ({ event }) => {
		// Access stream progress information
		console.log(`Upload progress: ${event.progress}%`);
		console.log(`Bytes transferred: ${event.transferredBytes}`);
		console.log(`Total bytes: ${event.totalBytes}`);

		// Access the current chunk being streamed
		// event.chunk is a Uint8Array
	},
});

// Example: Uploading a large file
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput?.files?.[0];

if (file) {
	await client("/api/upload", {
		method: "POST",
		body: file,
		onRequestStream: ({ event }) => {
			updateUploadProgress(event.progress);
		},
	});
}

import { createFetchClient } from "@zayne-labs/callapi";

const client = createFetchClient({
	onResponseStream: ({ event }) => {
		// Access stream progress information
		console.log(`Download progress: ${event.progress}%`);
		console.log(`Bytes received: ${event.transferredBytes}`);
		console.log(`Total bytes: ${event.totalBytes}`);

		// Process the current chunk
		// event.chunk is a Uint8Array
	},
});

// Example: Downloading a large file
const { data } = await client("/api/download-video", {
	responseType: "stream",
	onResponseStream: ({ event }) => {
		updateDownloadProgress(event.progress);
	},
});

const client = createFetchClient({
	onResponseError: async ({ response, options }) => {
		if (response.status === 401) {
			// Refresh session logic
			const newToken = await refreshToken();

			localStorage.setItem("token", newToken);

			// Retry request with new token
			options.refetch();
		}
	},
});

import { createFetchClient } from "@zayne-labs/callapi";

const callApi = createFetchClient({
	onRequest: [
		(ctx) => addAuthHeader(ctx.request),
		(ctx) => addTrackingHeader(ctx.request),
		(ctx) => addVersionHeader(ctx.request),
	],
});

const result = await callApi("/api/data", {
	onRequest: (ctx) => {},
});

import { createFetchClient } from "@zayne-labs/callapi";
import { definePlugin } from "@zayne-labs/callapi/utils";

// Plugin hooks execute first
const loggingPlugin = definePlugin({
	id: "logger",
	name: "Logger Plugin",
	hooks: {
		onRequest: () => console.log("1. Plugin onRequest"),
		onResponse: () => console.log("1. Plugin onResponse"),
	},
});

// Base client hooks execute second
const callMainApi = createFetchClient({
	plugins: [loggingPlugin],
	onRequest: () => console.log("2. Base onRequest"),
	onResponse: () => console.log("2. Base onResponse"),
});

// Instance hooks execute last
await callMainApi("/api/data", {
	onRequest: () => console.log("3. Instance onRequest"),
	onResponse: () => console.log("3. Instance onResponse"),
});

// With parallel execution (default), all hooks at each level run simultaneously
// With sequential execution, they run in order: 1 → 2 → 3

import { createFetchClient } from "@zayne-labs/callapi";

// Parallel execution (default) - all hooks run simultaneously
const parallelClient = createFetchClient({
	hooksExecutionMode: "parallel", // Default
	onRequest: [
		async (ctx) => await addAuthToken(ctx.request), // Runs in parallel
		async (ctx) => await logRequest(ctx.request), // Runs in parallel
		async (ctx) => await addTrackingId(ctx.request), // Runs in parallel
	],
});

// Sequential execution - hooks run one after another
const sequentialClient = createFetchClient({
	hooksExecutionMode: "sequential",
	onRequest: [
		async (ctx) => await validateAuth(ctx.request), // Runs first
		async (ctx) => await transformRequest(ctx.request), // Runs second
		async (ctx) => await logRequest(ctx.request), // Runs third
	],
});

// Use case: Hooks have dependencies and must run in order
const dependentClient = createFetchClient({
	hooksExecutionMode: "sequential",
	onError: [
		(ctx) => logError(ctx.error), // Log first
		(ctx) => reportError(ctx.error), // Then report
		(ctx) => cleanupResources(ctx), // Finally cleanup
	],
});

import { createFetchClient } from "@zayne-labs/callapi";
import { definePlugin } from "@zayne-labs/callapi/utils";

// 1. Plugin Hook (Runs first)
const examplePlugin = definePlugin({
	id: "example-plugin",
	name: "ExamplePlugin",
	hooks: {
		onRequest: (ctx) => console.log("1.1 Plugin onRequest -- (cannot be overridden)"),
		onResponse: (ctx) => console.log("1.2 Plugin onResponse -- (cannot be overridden)"),
	},
});

// 2. Base Client Hooks (Runs second)
const callBackendApi = createFetchClient({
	plugins: [examplePlugin],
	// Single base hook - will be overridden by instance hook
	onRequest: (ctx) =>
		console.log("2.1 Base onRequest -- (will be overridden by instance onRequest hook (3.1))"),

	// Array base hook - instance hook will be merged
	onResponse: [
		(ctx) => console.log("2.2 Base onResponse (part of array)"),
		(ctx) => console.log("2.3 Base onResponse (part of array)"),
	],
});

// 3. Instance Hooks (Runs last, overrides or merges)
const result = await callBackendApi("/data", {
	// Overrides the single base onRequest hook
	onRequest: (ctx) => console.log("3.1 Instance onRequest (overrides base onRequest (2.1))"),

	// Merges with the base onResponse array
	onResponse: (ctx) => console.log("3.2 Instance onResponse (merged with base onResponse (2.2, 2.3))"),
});

onRequest: async ({ request }) => {
	const token = await getAuthToken();
	request.headers.Authorization = `Bearer ${token}`;
};