effector-refetchData fetching that flows

Install ​

pnpm add effector-refetch effector

npm install effector-refetch effector

yarn add effector-refetch effector

Framework bindings are optional peers — add the ones you use: effector-react + react, effector-vue + vue, or effector-solid + solid-js. Full walkthrough in Getting started.

A 30-second taste ​

import { createEffect } from 'effector';
import { createQuery, createMutation, invalidate } from 'effector-refetch';

const fetchTodosFx = createEffect(() => fetch('/api/todos').then((r) => r.json()));
const addTodoFx = createEffect((text: string) =>
  fetch('/api/todos', { method: 'POST', body: JSON.stringify({ text }) }).then((r) => r.json()),
);

export const todos = createQuery({ effect: fetchTodosFx, cache: true, retry: 2 });
export const addTodo = createMutation({ effect: addTodoFx });

// when a todo is added, refresh the list
invalidate({ on: addTodo, refetch: todos });

todos.start();
addTodo.mutate('Buy milk'); // → todos refetches automatically

In a component, read it with one hook:

const { data, pending } = useUnit(todos); // React / Vue / Solid

Why not just use effects directly? ​

You can — and you still are. effector-refetch doesn't replace your effects; it wires the boring, fiddly parts around them: loading/error status, retries, caching, request cancellation, deduplication, validation. Your effect stays a first-class effector unit you can see in devtools and test with fork().

If you've felt the pain of hand-rolling "is it loading, did it fail, is this response stale, did the user click twice, which request won the race" — that's the part this library owns, declaratively.

When it fits — and when it doesn't ​

Reach for it when you have real async with races, caching needs, or many endpoints, and you want it testable without a renderer.

Skip it for a tiny app with a couple of useState calls, or a throwaway prototype — plain effects (or even fetch) are honest there. We'd rather you under-use this than cargo-cult it. See the honest comparison with farfetched.