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
:
import { createFetchClient } from "@zayne-labs/callapi";
const callBackendApi = createFetchClient({
baseURL: "https://api.example.com",
});
const { data } = await callBackendApi("/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
, passingparams: { 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
, passingparams: ['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.
import { callApi } from "@zayne-labs/callapi";
const { data } = await callApi("https://api.example.com/users/:userId/posts/:postId", {
params: {
userId: 123,
postId: 456,
},
});
const { data: userData } = await callApi("https://api.example.com/users/:userId/posts/:postId", {
params: [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:
import { callApi } from "@zayne-labs/callapi";
const { data } = await callApi("https://api.example.com/users/123/posts", {
query: {
page: 1,
limit: 10,
sort: "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
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
):
- The method (e.g.,
get
,post
,put
, etc.) is extracted from the URL - The extracted method is automatically set as the request method
- 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
Prop | Type | Default |
---|---|---|
baseURL? | string | - |
fullURL? | string | - |
initURL? | string | - |
initURLNormalized? | string | - |
params? | Record<string, string | number | boolean> | (string | number | boolean)[] | - |
query? | Record<string, string | number | boolean> | - |