# mobx-request

> Manage async requests with no-effort

Latest version **0.2.6** (published 2025-10-16) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.6 |
| Published | 2025-10-16 |
| First published | 2022-01-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 1 |
| Unpacked size | 48.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | whalemare |
| Keywords | mobx, mobx-request, promise, async, request, RequestStore, mobx-fog-of-war, mobx-utils |

## Links

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

## Dependencies (1)

- [real-cancellable-promise](https://npm.io/package/real-cancellable-promise.md) 1.1.1

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 0.2.6 (latest) — 2025-10-16
- 0.2.5 — 2024-09-12
- 0.2.4 — 2023-01-13
- 0.2.3 — 2022-05-30
- 0.2.2 — 2022-05-30
- 0.2.1 — 2022-05-27
- 0.2.0 — 2022-05-27
- 0.1.5 — 2022-04-27
- 0.1.4 — 2022-04-14
- 0.1.3 — 2022-01-04
- 0.1.2 — 2022-01-02
- 0.1.1 — 2022-01-02
- 0.1.0 — 2022-01-02
- 0.0.1 — 2022-01-02

## README

# mobx-request

Manage async requests with no-effort

- ⚡ Efficient UI updates with MobX observables
- 🔎 [Make requests](https://github.com/whalemare/mobx-request#make-request), [refresh](https://github.com/whalemare/mobx-request#refresh-request), [track loading](https://github.com/whalemare/mobx-request#make-request), [progress](https://github.com/whalemare/mobx-request#track-progress), [cancelation](https://github.com/whalemare/mobx-request#cancel-request) and etc.
- 🧪 Well [tested](https://github.com/whalemare/mobx-request/tree/master/tests)
- 🤸‍♂️ TypeScript
- ⚛ Designed for React and MobX

## Usage

#### Make request


In simple case, you can make request with `.fetch`, display fetched `.value` and `.isLoading` state 🎉

```tsx
const store = new RequestStore(async () => {
  return service.fetchUserProfile()
})

export const ProfileView = observer(() => {
  useEffect(() => {
    void store.fetch()
  }, [])

  return (
    <>
      {store.isLoading ? 'Loading Profile...' : 'Profile'}
      {`Name: ${store.value.name}`}
    </>
  )
})
```


#### Refresh request


When user want to fetch newest available data, you allow to pass `isRefresh: true` for receive it in request

```tsx
const store = new RequestStore(async (name: string, { isRefreshing }) => {
  return service.fetchUserDetails(name, isRefreshing) // <-- receive here as isRefreshing
})

const onRefresh = () => {
  store.fetch('whalemare', {
    isRefresh: true, // <-- pass true
  })
}
```


#### Track progress


For `fire and forget` requests, you can use `isLoading` variable for display loader as described in [Make Request](https://github.com/whalemare/mobx-request#make-request)

But, when you need granular progress state tracking, you can use `progress` numeric variable

```tsx
const store = new RequestStore(async (uri: string, { onProgress }) => {
  return service.downloadVideo(uri, onProgress)
})

const GalleryView = observer(() => {
  const percent = `${store.progress * 100}%`

  useEffect(() => {
    void store.fetch('file:///video.mp4')
  }, [])

  return <>Downloaded {percent}</>
})

```


In RequestStore you receive `onProgress` callback, that should be called with `total` and `current` values

```tsx
downloadVideo = async (uri: string, onProgress: (event: ProgressEvent) => void) => {
  for (let index = 0; index < 1000; index++) {
    await delay(1)
    onProgress({ total: 1000, current: index }) // emulate progress
  }
  return uri
}
```


If you don’t invoke `onProgress` it just will be `0` when request not started and `1` when request finished

#### Cancel request


You can cancel request at any time, when it in progress, not started or already finished by usign [AbortController](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)

```tsx
const store = new RequestStore(async (uri: string, { signal }) => {
  return downloadCancelableVideo(uri, signal)
})

const GalleryView = observer(() => {
  useEffect(() => {
    void store.fetch('file:///video.mp4')
  }, [])

  const onPressCancel = () => {
    store.cancel()
  }

  return (
    <>
      <button onClick={onPressCancel} />
    </>
  )
})

const downloadCancelableVideo = async (uri: string, signal: AbortSignal) => {
  for (let index = 0; index < 1000; index++) {
    await delay(1)
    if (signal.aborted) {
      throw new Error(`Unable to download ${uri}, because request was be cancelled`)
    }
  }
  return uri
}
```

## Examples

#### Cancel request with axios

```tsx
import axios from 'axios'
import { RequestStore } from 'mobx-request'

new RequestStore(async (url: string, { signal }) => {
  return axios.get(url, {
    signal
  })
})
```

#### Track progress with axios

```tsx
import axios from 'axios'
import { RequestStore } from 'mobx-request'

new RequestStore(async (url: string, { onProgress }) => {
  return axios.get(url, {
    onDownloadProgress: onProgress,
    // or
    onUploadProgress: onProgress,
  })
})
```

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