Farfetched and Atomic Router
Integration is distributed as a separate package, you have to install it and its peer dependencies before usage:
pnpm install atomic-router @farfetched/atomic-router
yarn add atomic-router @farfetched/atomic-router
npm install atomic-router @farfetched/atomic-router
API
WARNING
Atomic Router is still in development, so the API is not stable yet. This integration is tested with atomic-router@0.9.1
, but it should work with any version of atomic-router
.
Integration provides the way to use any Query in chainRoute
operator. It has two options to transform Query to the shape that chainRoute
expects:
freshChain
After opening a route with freshChain
, .refresh
Event would be executed. So, Query will be executed only if it is already .$stale
.
import { createJsonQuery } from '@farfetched/core';
import { freshChain } from '@farfetched/atomic-router';
import { chainRoute, createRoute } from 'atomic-router';
const postRoute = createRoute<{ postId: string }>();
const postQuery = createJsonQuery({
/* ... */
});
const postLoadedRoute = chainRoute({
route: postRoute,
...freshChain(postQuery),
});
startChain
After opening a route with startChain
, .start
Event would be executed. So, Query will be executed unconditionally.
import { createJsonQuery } from '@farfetched/core';
import { startChain } from '@farfetched/atomic-router';
import { chainRoute, createRoute } from 'atomic-router';
const postRoute = createRoute<{ postId: string }>();
const postQuery = createJsonQuery({
/* ... */
});
const postLoadedRoute = chainRoute({
route: postRoute,
...startChain(postQuery),
});
barrierChain
since v0.12.0
After opening a route with barrierChain
, Barrier .$active
status will be checked. Route will be opened only after Barrier deactivation. If Barrier is not active, route will be opened immediately.
import { createBarrier } from '@farfetched/core';
import { barrierChain } from '@farfetched/atomic-router';
import { chainRoute, createRoute } from 'atmoic-router';
const anyRoute = createRoute();
const authBarrier = createBarrier({
/* ... */
});
const authOnlyRoute = chainRoute({
route: anyRoute,
...barrierChain(authBarrier),
});