2 posts tagged with "comparison"

Choosing a data-fetching library usually starts with "which cache is better". That question skips the part that actually bites later: where do your requests run?

If every call lives in the browser and you're on React, react-query is a mature, well-trodden pick. But the moment you need the same request logic on a phone that isn't React Native, or inside a BFF that calls downstream services, the map changes. alova puts those cases on the same API. This post is a straight comparison, including where alova is the weaker choice.

Where react-query is clearly ahead​

Be honest first:

• React fit. react-query is built around React's render model. Hooks like useQuery slot into components naturally, and its devtools and query window are the most polished in the space.
• Caching maturity. Its cache, dedup, background refetch, and stale-while-revalidate behavior are battle-tested across a huge number of production apps.
• Community and answers. Years of Stack Overflow threads, blog posts, and copied snippets mean most problems already have a solution online.

If your app is React, in the browser, and you're happy with that world, react-query is the safer default. Saying otherwise would be dishonest.

Where alova goes further​

alova is a request strategy layer too, but it isn't tied to one framework or one runtime:

• One API across runtimes. The same useRequest and usePagination calls run on the web, in mobile apps (React Native / Expo), and on the server (Node BFF). You write the request logic once.
• Server-side hooks. alova/server adds retry and createRateLimiter for your BFF's outbound calls, the layer react-query doesn't touch because it lives in the browser.
• Framework choice. React, Vue, Svelte, and Solid all get first-class hooks, so a mixed-stack team isn't forced into React.
• Sits on your existing adapter. alova doesn't send requests itself. It runs on top of a fetch or axios adapter, so axios stays in the picture if you already use it.

Side by side​

On the last row: neither library replaces axios. Both sit above a request adapter, so if your team already depends on axios, it keeps doing the sending.

When react-query is the better call​

• Your frontend is React and browser-only, and you want the deepest React caching ecosystem available.
• You don't run a BFF that needs outbound retry/rate-limit logic.
• Your team already knows react-query and ships fast with it.

When alova fits better​

• You maintain the same request logic across web, a non-React-Native app, and a Node BFF.

• Your BFF needs retry with backoff and a client-side rate limit for downstream calls (see the BFF retry post).

• You're on Vue, Svelte, or Solid, or a mixed stack, and want one strategy layer.

• alova vs other libraries

• Server retry strategy

Short answer: they are layers, not rivals. axios is an HTTP client — it sends requests. alova is a request strategy layer — it decides how requests run: pagination, caching, retry, deduplication, token refresh. alova can use axios as its request adapter (@alova/adapter-axios), so choosing alova never means throwing axios away.

alova in one line: one set of request APIs that runs on the web, in apps (uni-app / Taro / mini-programs), and on the server (BFF).

Division of work​

Where axios is genuinely stronger​

An honest comparison cuts both ways:

• Ecosystem and familiarity. axios has one of the largest communities in the JavaScript world. Nearly every edge case has a Stack Overflow answer; nearly every developer has used it. alova's community is far smaller.
• Zero learning curve for your team. Everyone already knows axios.get(). alova introduces a Method abstraction and strategy hooks — a real (if small) mental shift.
• If you only send a handful of requests, axios alone is simply enough. A strategy layer earns its keep only when you keep rewriting the same request logic.

What using both looks like​

Keep your axios instance — including its interceptors and baseURL — and let alova drive it:

import axios from 'axios';
import { createAlova } from 'alova';
import { axiosRequestAdapter } from '@alova/adapter-axios';
import VueHook from 'alova/vue';

// your existing axios instance, untouched
const customAxios = axios.create({ baseURL: '/api', timeout: 10000 });

const alovaInst = createAlova({
  statesHook: VueHook,
  requestAdapter: axiosRequestAdapter({ axios: customAxios })
});

Before / after for a plain request in Vue 3:

// axios only: hand-written states
const loading = ref(false);
const data = ref({});
const error = ref(null);
const load = async () => {
  try {
    loading.value = true;
    data.value = await customAxios.get('/todos');
  } catch (e) {
    error.value = e;
  }
  loading.value = false;
};
onMounted(load);

// axios + alova: states managed for you
const { loading, data, error } = useRequest(alovaInst.Get('/todos'));

Everything you configured for axios still applies: method config accepts all axios request options, and interceptor order is predictable — alova's beforeRequest fires before axios request interceptors, and alova's responded fires after axios response interceptors.

When you don't need alova​

• Your project fires only a few requests with no repeated pagination/caching/retry patterns — plain axios is the right call.
• You are React-only, web-only, and already invested in React Query — switching buys you little unless you need cross-platform or server-side strategies.
• You want a zero-abstraction stack — alova's Method + hooks model is one more concept, and that cost is real.

Next steps​

• Migrate from axios — gradual, one endpoint at a time; your instance and interceptors stay.
• axios request adapter — full adapter options.
• Compare with other libraries — react-query / swr / alova side by side.