# mobx-cache

> An observable data cache with MobX

Latest version **0.0.6** (published 2016-09-13) · 0 weekly downloads

## Install

```sh
npm install mobx-cache
pnpm add mobx-cache
yarn add mobx-cache
bun add mobx-cache
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2016-09-13 |
| First published | 2016-09-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 26 |
| Author | Mouad Debbar |
| Maintainers | mdebbar |

## Links

- npm: https://www.npmjs.com/package/mobx-cache
- Repository: https://github.com/mdebbar/mobx-cache
- Homepage: https://github.com/mdebbar/mobx-cache#readme
- Issues: https://github.com/mdebbar/mobx-cache/issues
- npm.io page: https://npm.io/package/mobx-cache

## Dependencies (1)

- [mobx](https://npm.io/package/mobx.md) ^2.2.0

## Recent versions

- 0.0.6 (latest) — 2016-09-13
- 0.0.5 — 2016-09-10
- 0.0.4 — 2016-09-10
- 0.0.3 — 2016-09-10
- 0.0.2 — 2016-09-09
- 0.0.1 — 2016-09-09

## README

# MobxCache
_An observable data cache with [MobX](https://mobxjs.github.io/mobx/)._

[![Build Status](https://travis-ci.org/mdebbar/mobx-cache.svg?branch=master)](https://travis-ci.org/mdebbar/mobx-cache)
[![Coverage Status](https://coveralls.io/repos/github/mdebbar/mobx-cache/badge.svg?branch=master)](https://coveralls.io/github/mdebbar/mobx-cache?branch=master)
[![Downloads](https://img.shields.io/npm/dt/mobx-cache.svg)](https://www.npmjs.com/package/mobx-cache)


## Installation

If using npm to manage your dependencies, you can easily do:
```
npm install --save mobx-cache
```
Also, make sure `mobx` is installed since this library relies on it.

## Example 1: Simple hello world

```javascript
import React from "react"
import MobxCache from "mobx-cache"
import { observer } from "mobx-react"

var helloMessages = new MobxCache((name) => `Hello, ${name}`)

const HelloWorldApp = observer(function HelloWorldApp(props) {
  return (
    <div>
      <h1>{helloMessages.get(props.name).value}</h1>
    </div>
  )
})

React.render(<HelloWorldApp name="John Doe" />, document.body)

// The next line will update the cache and cause `HelloWorldApp` to re-render
// with the new message:
helloMessages.populate('John Doe', 'Hello again, John!')
```

The above example is for demonstration purposes only. It may not be useful in real life. This library is especially useful when used for data fetching as the next example shows.

## Example 2: User profile

```javascript
import React from "react"
import MobxCache from "mobx-cache"
import { observer } from "mobx-react"

var usersCache = new MobxCache((id) => fetch(`/users/${id}`))

const UserProfile = observer(function HelloWorldApp(props) {
  const entry = usersCache.get(props.id)
  if (entry.status !== 'success') {
    return <div>Loading...</div>
  }

  const user = entry.value
  return (
    <div>
      <img src={user.image} />
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  )
})

// Rendering with the id 199 will cause the fetching of user 199.
React.render(<UserProfile id={199} />, document.body)

// When we render with a different id, the new user will be fetched and rendered.
React.render(<UserProfile id={299} />, document.body)
```
The `fetch` function can be any function that sends a request to the given url and returns a promise. The promise will automatically be handlded by MobxCache.

---
_Source: https://npm.io/package/mobx-cache · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._