Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

mobx-fog-of-war ☁️ ⚔️ 🤯

npm Master build Coverage 100% Size: <2.5KB Maturity: Early Days Coolness Moderate


A simple, lazy front-end request coordinator and cache for React and mobx. Load your data by simply trying to view it, and build up a picture of your server's data over time.

Look here for documentation and examples

You're not required to think about "requesting" data in advance. Just try to access it using store.get() or the store.useGet() React hook, and if the corresponding data in your cache is missing or stale it'll prompt your request function to go and load the data. This makes it easy to do your data joins on the front-end, right in your components, keeping your data-joining-logic as minimal as possible.

  • Efficient UI updates with mobx observables.
  • Connects to rxjs easily for buffering and batching requests.
  • Control your cache directly.
  • No normalisation or schemas.

When used with buffering and batching, it could be thought of as "dataloader but for React".

If your server is performing data joins (as many graphql APIs tend to do) then mobx-fog-of-war may not be right for you. In this case check out enty for normalised state management.


yarn add react mobx mobx-react mobx-fog-of-war
// or
npm install --save react mobx mobx-react mobx-fog-of-war

Nice things

Example with React

1. Set up your application's stores

// requesters

const getUser = async (id: UserArgs): Promise<User> => {
    const response = await fetch(`${id}`)
    return new User(await response.json());

const getPet = async (id: PetArgs): Promise<Pet> => {
    const response = await fetch(`${id}`)
    return new Pet(await response.json());

// stores

import {Store, asyncRequest} from 'mobx-fog-of-war';

const userStore = new Store<string,User,Error>({
    name: 'User Store',
    staleTime: 60, // after 60 seconds, the item is eligible to be requested again
    request: asyncRequest(getUser)

const petStore = new Store<string,Pet,Error>({
    name: 'Pet Store',
    staleTime: 60,
    request: asyncRequest(getPet)

2. Components can request data

import {observer} from 'mobx-react';

// render a user, it'll go get the required data

const UserView = observer(props => {
    const userFromStore = userStore.useGet(props.userId);

    return <Loader storeItem={userFromStore}>
        {user => <div>
            Name: {}
            Pets: { => <PetView key={petId} petId={petId} />)}

// render some pets, they'll go get the required data

const PetView = observer(props => {
    const petFromStore = petStore.useGet(props.petId);

    return <Loader storeItem={petFromStore}>
        {pet => <div>
            Pet name: {}

// handle request state as you like
// for example, a component using render props
// or use the in-built <Load> component

const Loader = observer(props => {
    let {storeItem, children} = props;
    if(storeItem.loading) return <div>Loading</div>;
    if(storeItem.hasError) return <div>Error: {storeItem.error.message}</div>;
    if(!storeItem.hasData) return null;
    return children(;


This library is written and maintained by Damien Clarke, with feedback from others at 92green. It was built to meet the data-requesting and caching needs of products at Blueflag. All online library discussion happens over on Github.

I hope this library helps solve some data requesting problems for you. 🎉


A simple, lazy front-end request coordinator and cache for React and mobx. Load your data by simply trying to view it, and build up a picture of your server's data over time.








No packages published