Integrations

CallApi is designed to be flexible and can be easily integrated with various JavaScript libraries and frameworks. Since it's built on top of the native Fetch API, it works well with any library that expects a Promise-based HTTP client.

Choose an integration guide from the sidebar to learn more about its specific details and best practices.

Common Integration Pattern

Most integrations follow a similar pattern:

Create a CallApi instance with your base configuration
Use the instance in your data fetching hooks or functions
Handle errors appropriately using CallApi's error handling utilities

Here's a comprehensive example showing the common integration pattern:

example.ts

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

const callMainApi = createFetchClient({
	baseURL: "https://api.example.com",
	resultMode: "onlyData", // Return just data, not { data, error, response }
	throwOnError: true, // Libraries like React Query expect thrown errors
});

export default function App() {
	// React Query
	const queryResult = useQuery({
		queryKey: ["user", userId],
		queryFn: () => callMainApi(`/users/${userId}`),
	});

	// SWR
	const swrResult = useSWR(`/users/${userId}`, () => callMainApi(`/users/${userId}`));

	return (
		<div>
			<p>{queryResult.data.name}</p>
			<p>{swrResult.data.name}</p>
		</div>
	);
}

Common Integration Pattern

On this page