URL helpers

Learn about various convenient ways to build request URLs in CallApi

Base URL

You can also set a base URL for requests using the baseURL option on createFetchClient:

api.ts
import {  } from "@zayne-labs/callapi";

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

const {  } = await ("/users/123/posts");

The resolved URL will be: "https://api.example.com/users/123/posts"

Dynamic Parameters

Many URLs contain parts that represent specific resources, like an ID. For example, /users/123 fetches the user with ID 123, and /posts/456 fetches the post with ID 456. The 123 and 456 parts are dynamic.

Instead of manually building strings like "/users/" + userId, CallApi allows you to use dynamic parameter placeholders in your URL string with a : prefix. For example, /users/:userId.

Then, you provide the actual values for these placeholders using the params option in your request options. CallApi will automatically replace the placeholders with the provided values.

The params option can be either an object or an array:

  • Object: The keys should match the parameter names (without the :). For example, if your URL is /users/:userId/posts/:postId, passing params: { userId: 123, postId: 456 } will result in /users/123/posts/456.
  • Array: The values replace the parameters in the order they appear in the URL. For example, if your URL is /users/:userId/posts/:postId, passing params: ['123', '456'] will result in /users/123/posts/456.

Using an object is generally recommended as it's clearer which value goes with which parameter.

api.ts
import {  } from "@zayne-labs/callapi";

const {  } = await ("https://api.example.com/users/:userId/posts/:postId", {
	: {
		: 123,
		: 456,
	},
});

const { :  } = await ("https://api.example.com/users/:userId/posts/:postId", {
	: [123, 456],
});

The resolved URL for both cases will be: "https://api.example.com/users/123/posts/456"

Query Parameters

In addition to dynamic parameters, you can also include query parameters to the URL using the query option:

api.ts
import {  } from "@zayne-labs/callapi";

const {  } = await ("https://api.example.com/users/123/posts", {
	: {
		: 1,
		: 10,
		: "latest",
	},
});

The resolved URL will be: "https://api.example.com/users/123/posts?page=1&limit=10&sort=latest"

Method Prefixes

CallApi provides a convenient way to specify HTTP methods directly in the URL using the @method/ prefix. This feature allows you to:

  • Write more concise API calls by embedding the HTTP method in the URL
  • Make your code more readable by keeping the HTTP method close to the endpoint

Usage

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

// Using method prefix
const result = await callApi("@delete/users/123");

// Equivalent to:
const result2 = await callApi("users/123", {
	method: "DELETE",
});

How It Works

When you prefix a URL with @method/ (e.g., @get/users):

  1. The method (e.g., get, post, put, etc.) is extracted from the URL
  2. The extracted method is automatically set as the request method
  3. The remaining part of the URL is used as the endpoint

Supported Methods

CallApi supports the following HTTP methods via URL prefixes:

  • @get/ → GET requests
  • @post/ → POST requests
  • @put/ → PUT requests
  • @delete/ → DELETE requests
  • @patch/ → PATCH requests

Any other method prefix (like @head/, @options/, @trace/) will be ignored and the URL will fall back to the default GET method.

  • Always include a forward slash after the method prefix (e.g., @get/ not @get)
  • If both a method prefix and explicit method option are provided, the explicit method will be used

Types

PropTypeDefault
baseURL?
string
-
fullURL?
string
-
initURL?
string
-
initURLNormalized?
string
-
params?
Record<string, string | number | boolean> | (string | number | boolean)[]
-
query?
Record<string, string | number | boolean>
-