Manual #

You have full control over how data is stored in your app, however, the cost is managing it.

For anything beyond the simplest of apps, actively managing your state is going to promote a more robust and managable codebase. When you are performing CRUD operations and want to store those records in a database table that is strongly typed, you probably want manually managed.

The good news this is really easy in starfx because we can leverage schemas to do most of the heavy lifting.

Automatic #

This one is simpler to setup, easy for it to "just work" and is more like react-query.

When using an endpoint, this method simply stores whatever is put inside ctx.json. Then you can access that data via useCache.

 1import { createApi } from "starfx";
 2import { useCache } from "starfx/react";
 3
 4const api = createApi();
 5const fetchUsers = api.get("/users", api.cache());
 6
 7function App() {
 8  const { data = [] } = useCache(fetchUsers());
 9  return <div>{data.map((user) => <div>{user.name}</div>)}</div>;
10}

api.cache() opts into automatic caching. This is really just an alias for:

1function*(ctx, next) {
2  ctx.cache = true;
3  yield* next();
4}

The state slice for cache is simple, every thunk action has special properties of which one is a key field that is a hash of the entire user-defined action payload:

1{
2  [action.payload.key]: {},
3}

`timer` supervisor #

This supervisor can help us with how often we refetch data. This will help us call the same endpoint many times but only fetching the data on an interval.

Caching

Manual #

Automatic #

timer supervisor #

`timer` supervisor #