Async data

A resource wraps asynchronous data — a fetch, a query, anything that returns a promise — in a value that tracks its loading and error state:

import { signal, resource } from '@fluixi/reactive/signal';

const userId = signal(1);

const user = resource(userId, async (id) => {
  const res = await fetch(`/api/users/${id}`);
  return res.json();
});

user();      // the value — suspends under <Suspense>
user.loading;    // boolean
user.latest;     // last settled value, kept across a refetch
user.refetch();

$resource is the same without the import.

The first argument is a reactive source; whenever it changes, the fetcher re-runs with the new value. Omit it to fetch once.

Loading & error

A resource carries its state, so your UI can react to it:

user.loading; // true while fetching
user.error;   // the thrown error, if any
user();   // the resolved value (suspends while pending)

Server-side rendering

On the server, Fluixi awaits resources before serializing the HTML, then seeds the resolved value into the page so the client hydrates without refetching — no loading flash, no waterfall.

// the same code renders on the server (awaited) and the client (streamed):
const posts = $resource(fetchPosts);

That is the end of the reactivity guide for v1. Explore it live in the Playground.

The tuple form

createResource returns the same resource as [resource, actions]:

import { createResource } from '@fluixi/reactive/signal';

const [user, { refetch, mutate }] = createResource(userId, fetchUser);

user();        // the value
user.loading;
refetch();

resource is that pair folded together — get is the accessor createResource returned, so suspending, tracking and SSR seeding are unchanged.