FarfetchedFarfetched 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-routeryarn add atomic-router @farfetched/atomic-routernpm install atomic-router @farfetched/atomic-routerAPI
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),
});