Axios Adapter

Read the API Reference »

Hyper Fetch's axios adapter is a simple integration that allows you to use the popular axios HTTP client for making requests, while still benefiting from all of Hyper Fetch's features like caching, persistence, and request management.

Using the axios adapter gives you the best of both worlds.

---

Purpose

1. Leverage axios: Use familiar axios options, headers, and error handling.
2. Seamless Integration: Combines axios with Hyper Fetch's caching, queuing, and persistence.
3. Track Progress: Get detailed upload and download progress events.
4. Full Control: Access axios response details and error objects when needed.

---

Getting Started

To use the axios adapter:

1. Install the package:

npm

npm install @hyper-fetch/axios

yarn

yarn add @hyper-fetch/axios

pnpm

pnpm add @hyper-fetch/axios

2. Import it and set it on your Client instance:

Import

import { AxiosAdapter } from "@hyper-fetch/axios"

import { Client } from "@hyper-fetch/core";
import { axiosAdapter } from "@hyper-fetch/axios";

const client = new Client({ url: "base-url" }).setAdapter(axiosAdapter);

3. ...and voila! It's done. Now you can set axios options on your requests.

---

Usage

You can pass any valid axios request configuration options to your Hyper Fetch requests. These options can be set when you create a request or when you send it.

Here's an example of how to use some common axios options:

import { client } from "./client";

// Create a request with axios-specific options
const getUsers = client.createRequest()({
  endpoint: "/users",
  options: {
    // Set a 5-second timeout for the request
    timeout: 5000,
    // Add authentication credentials
    auth: {
      username: "your-username",
      password: "your-password",
    },
  },
});

Or use the setOptions method:

import { client } from "./client";

const getUsers = client
  .createRequest()({
    endpoint: "/users",
  })
  .setOptions({
    // Set a 5-second timeout for the request
    timeout: 5000,
    // Add authentication credentials
    auth: {
      username: "your-username",
      password: "your-password",
    },
  });

---

See More

For a full list of available axios request configuration options, please refer to the official axios documentation.

Key Differences

While you can use most axios options, some are managed by Hyper Fetch to ensure proper integration. You should not pass the following options, as they will be overwritten by the adapter:

• url
• baseURL
• method
• data (use payload in send method instead)
• onUploadProgress (use onUploadProgress in send method instead)
• onDownloadProgress (use onDownloadProgress in send method instead)
• signal (managed by Hyper Fetch for cancellation)