Integrations

CallApi works seamlessly with any library that expects a Promise-based HTTP client, since it's built on the native Fetch API.

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

Common Integration Pattern

Most integrations follow this pattern:

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

Example:

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