Getting started

This page gets you from zero to a working query in a couple of minutes. For the why, read the Introduction first.

effector-refetch is a small, friendly query layer for effector, built on real effects. The unit of work is your own Effect<Params, Result, Error> (including attach-built factory effects) — the query is just a thin reactive shell.

Prerequisites

You'll want a basic feel for effector (createEffect, stores, sample). If you're new, skim the effector docs — everything here is just plain effector units composed for you.

Install

The package is published on npm as effector-refetch (effector is a peer dependency):

pnpm

pnpm add effector-refetch effector

npm

npm install effector-refetch effector

yarn

yarn add effector-refetch effector

Framework bindings are optional peer-scoped subpaths — install the peers you use:

React

pnpm add effector-react react   # enables effector-refetch/react + /devtools

Vue

pnpm add effector-vue vue       # enables effector-refetch/vue

Your first query

Hover the identifiers below — these snippets are type-checked with Twoslash against the real types:

import { createEffect } from 'effector';
import { createQuery } from 'effector-refetch';

interface User {
  id: number;
  name: string;
}

// your effect — fetch / axios / ofetch, anything returning a Promise
const fetchUserFx = createEffect(async (id: number): Promise<User> => {
  return { id, name: 'Ada' };
});

const userQuery = createQuery({
  effect: fetchUserFx,
  retry: 2,
  cache: true,
  concurrency: 'TAKE_LATEST',
});

userQuery.start(1);
// hover userQuery.$data → Store<User | null>, $status, $pending, … all typed

Connecting queries

connectQuery({
  source: characterQuery,
  fn: ({ result: character }) => ({ params: { url: character.origin.url } }),
  target: originQuery,
});

When characterQuery resolves, originQuery starts automatically with the derived params.

Next

• Core concepts — the effect-first model and lifecycle.
• Queries API — every option.
• vs. farfetched — how this compares.