Installation

Package Managers

CallApi is available on npm and can be installed using any modern package manager.

npm install @zayne-labs/callapi

Package Information

Package Name

@zayne-labs/callapi

Bundle Size

Under 6KB gzipped

Dependencies

Zero dependencies

License

MIT License

CDN Usage

For quick prototyping or simple projects, you can use CallApi directly from a CDN:

ESM.run
unpkg
jsDelivr

<script type="module">
  import { callApi, createFetchClient } from "https://esm.run/@zayne-labs/callapi";
  
  const { data } = await callApi("/api/users");
  console.log(data);
</script>

<script type="module">
  import { callApi, createFetchClient } from "https://unpkg.com/@zayne-labs/callapi";
  
  const { data } = await callApi("/api/users");
  console.log(data);
</script>

<script type="module">
  import { callApi, createFetchClient } from "https://cdn.jsdelivr.net/npm/@zayne-labs/callapi";
  
  const { data } = await callApi("/api/users");
  console.log(data);
</script>

CDN usage is great for prototyping but not recommended for production. Use a package manager for better performance and reliability.

Runtime Requirements

CallApi requires a JavaScript runtime with native Fetch API support:

Browsers

All modern browsers support the Fetch API:

Chrome 42+
Firefox 39+
Safari 10.1+
Edge 14+

Internet Explorer is not supported. Use a polyfill if you need to support older browsers.

Node.js

Node.js 18.0.0 or higher is required:

node --version
# v18.0.0 or higher

Node.js 18+ includes native fetch support. For older versions, consider upgrading or using a polyfill like node-fetch.

Deno

Deno has native fetch support:

import { callApi } from "npm:@zayne-labs/callapi";

const { data } = await callApi("/api/users");

Bun

Bun has native fetch support:

bun add @zayne-labs/callapi

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

const { data } = await callApi("/api/users");

Edge Runtimes

CallApi works in all edge runtimes:

Cloudflare Workers
Vercel Edge Functions
Deno Deploy
Netlify Edge Functions
And any other environment with native fetch

Imports

CallApi provides multiple entry points for tree-shaking optimization:

Main Package

The primary exports for making requests:

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

Utils

Helper functions for defining schemas, plugins, and configs:

import {
  defineSchema,
  defineSchemaRoutes,
  defineMainSchema,
  defineSchemaConfig,
  definePlugin,
  defineBaseConfig,
  defineInstanceConfig,
  HTTPError,
  ValidationError,
} from "@zayne-labs/callapi/utils";

Constants

Useful constants for configuration:

import {
  HTTP_METHODS,
  STATUS_CODES,
  RETRY_STATUS_CODES,
} from "@zayne-labs/callapi/constants";

Using specific imports instead of wildcard imports helps with tree-shaking and reduces your bundle size.

TypeScript Support

CallApi is written in TypeScript and includes full type definitions out of the box. No need to install @types packages.

import { callApi, type CallApiResult } from "@zayne-labs/callapi";

interface User {
  id: number;
  name: string;
  email: string;
}

const result: CallApiResult<User> = await callApi<User>("/api/users/1");

if (result.data) {
  // data is typed as User
  console.log(result.data.name);
}

TypeScript Version

CallApi requires TypeScript 5.0 or higher for optimal type inference. Earlier versions may work but are not officially supported.

{
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

Verification

Verify your installation:

Check Installation

Create a test file to verify CallApi is installed correctly:

test.js

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

const { data, error } = await callApi("https://jsonplaceholder.typicode.com/users/1");

if (error) {
  console.error("Error:", error.message);
} else {
  console.log("Success! User:", data);
}

Run the Test

node test.js

You should see the user data printed to the console.

If you’re using CommonJS (require), CallApi is ESM-only. You’ll need to use dynamic imports or migrate to ESM.

Framework Integration

CallApi works seamlessly with all modern JavaScript frameworks:

React
Vue
Svelte
Next.js

import { createFetchClient } from "@zayne-labs/callapi";
import { useState, useEffect } from "react";

// Create client outside component for reuse
const api = createFetchClient({
  baseURL: "https://api.example.com",
});

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      const { data, error } = await api("/users");
      if (data) setUsers(data);
      setLoading(false);
    };

    fetchUsers();
  }, []);

  if (loading) return <div>Loading...</div>;
  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
}

<script setup>
import { createFetchClient } from "@zayne-labs/callapi";
import { ref, onMounted } from "vue";

const api = createFetchClient({
  baseURL: "https://api.example.com",
});

const users = ref([]);
const loading = ref(true);

onMounted(async () => {
  const { data } = await api("/users");
  if (data) users.value = data;
  loading.value = false;
});
</script>

<template>
  <div v-if="loading">Loading...</div>
  <ul v-else>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script>
import { createFetchClient } from "@zayne-labs/callapi";
import { onMount } from "svelte";

const api = createFetchClient({
  baseURL: "https://api.example.com",
});

let users = [];
let loading = true;

onMount(async () => {
  const { data } = await api("/users");
  if (data) users = data;
  loading = false;
});
</script>

{#if loading}
  <div>Loading...</div>
{:else}
  <ul>
    {#each users as user (user.id)}
      <li>{user.name}</li>
    {/each}
  </ul>
{/if}

app/api/client.js

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

export const api = createFetchClient({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});

app/users/page.js

import { api } from "../api/client";

export default async function UsersPage() {
  const { data: users } = await api("/users");
  
  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

Build Tools

CallApi works with all modern build tools:

Vite
Webpack
Rollup
esbuild

No configuration needed! CallApi works out of the box with Vite:

vite.config.js

import { defineConfig } from "vite";

export default defineConfig({
  // No special config needed for CallApi
});

CallApi works with Webpack 5+ without additional configuration:

webpack.config.js

module.exports = {
  // No special config needed for CallApi
};

Use with @rollup/plugin-node-resolve:

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";

export default {
  plugins: [resolve()],
};

CallApi works directly with esbuild:

esbuild src/index.js --bundle --outfile=dist/bundle.js

Optional: Validation Libraries

To use schema validation, install one of these libraries:

Zod
Valibot
Yup

npm

npm install zod

import { z } from "zod";
import { createFetchClient } from "@zayne-labs/callapi";
import { defineSchema } from "@zayne-labs/callapi/utils";

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
});

const api = createFetchClient({
  schema: defineSchema({
    "/users/:id": { data: userSchema },
  }),
});

npm

npm install valibot

import * as v from "valibot";
import { createFetchClient } from "@zayne-labs/callapi";
import { defineSchema } from "@zayne-labs/callapi/utils";

const userSchema = v.object({
  id: v.number(),
  name: v.string(),
});

const api = createFetchClient({
  schema: defineSchema({
    "/users/:id": { data: userSchema },
  }),
});

npm

npm install yup

import * as yup from "yup";
import { createFetchClient } from "@zayne-labs/callapi";
import { defineSchema } from "@zayne-labs/callapi/utils";

const userSchema = yup.object({
  id: yup.number().required(),
  name: yup.string().required(),
});

const api = createFetchClient({
  schema: defineSchema({
    "/users/:id": { data: userSchema },
  }),
});

CallApi supports any validation library that implements the Standard Schema specification.

Troubleshooting

Module not found error

If you see Cannot find module '@zayne-labs/callapi', make sure:

You’ve installed the package: npm install @zayne-labs/callapi
Your node_modules folder exists
You’re using the correct import path

Try reinstalling:

rm -rf node_modules package-lock.json
npm install

TypeScript errors

If you’re seeing TypeScript errors:

Ensure you’re using TypeScript 5.0+
Check your tsconfig.json has "moduleResolution": "bundler" or "node16"
Make sure "esModuleInterop": true is set

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "esModuleInterop": true,
    "target": "ES2022"
  }
}

CommonJS / require() errors

CallApi is ESM-only. If you need to use it with CommonJS:

Use dynamic imports:

const { callApi } = await import("@zayne-labs/callapi");

Or migrate your project to ESM by adding "type": "module" to your package.json:

package.json

{
  "type": "module"
}

fetch is not defined (Node.js)

If you see fetch is not defined, you’re using Node.js version < 18.Solution:

Upgrade to Node.js 18+ (recommended)
Or use a polyfill like node-fetch:

import fetch from "node-fetch";
globalThis.fetch = fetch;

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

Next Steps

Quick Start

Make your first request in 5 minutes

API Reference

Explore all configuration options

Core Features

Discover CallApi’s powerful features

Advanced

Learn about type safety features

Getting Started

Core Features

Advanced

Integrations

Resources

Package Managers

Package Information

Package Name

Bundle Size

Dependencies

License

CDN Usage

Runtime Requirements

Imports

Main Package

Utils

Constants

TypeScript Support

TypeScript Version

Verification

Framework Integration

Build Tools

Optional: Validation Libraries

Troubleshooting

Next Steps

Quick Start

API Reference

Core Features

Advanced

Build docs developers (and LLMs) love

Getting Started

Core Features

Advanced

Integrations

Resources

​Package Managers

​Package Information

Package Name

Bundle Size

Dependencies

License

​CDN Usage

​Runtime Requirements

​Imports

​Main Package

​Utils

​Constants

​TypeScript Support

​TypeScript Version

​Verification

​Framework Integration

​Build Tools

​Optional: Validation Libraries

​Troubleshooting

​Next Steps

Quick Start

API Reference

Core Features

Advanced

Build docs developers (and LLMs) love

Package Managers

Package Information

CDN Usage

Runtime Requirements

Imports

Main Package

Utils

Constants

TypeScript Support

TypeScript Version

Verification

Framework Integration

Build Tools

Optional: Validation Libraries

Troubleshooting

Next Steps