mobx-request

Manage async requests with no-effort

• ⚡ Efficient UI updates with MobX observables
• 🔎 Make requests, refresh, track loading, progress, cancelation and etc.
• 🧪 Well tested
• 🤸‍♂️ TypeScript
• ⚛ Designed for React and MobX

Usage

Make request

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

1const store = new RequestStore(async () => {
2  return service.fetchUserProfile()
3})
4
5export const ProfileView = observer(() => {
6  useEffect(() => {
7    void store.fetch()
8  }, [])
9
10  return (
11    <>
12      {store.isLoading ? 'Loading Profile...' : 'Profile'}
13      {`Name: ${store.value.name}`}
14    </>
15  )
16})

Refresh request

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

1const store = new RequestStore(async (name: string, { isRefreshing }) => {
2  return service.fetchUserDetails(name, isRefreshing) // <-- receive here as isRefreshing
3})
4
5const onRefresh = () => {
6  store.fetch('whalemare', {
7    isRefresh: true, // <-- pass true
8  })
9}

Track progress

For fire and forget requests, you can use isLoading variable for display loader as described in Make Request

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

1const store = new RequestStore(async (uri: string, { onProgress }) => {
2  return service.downloadVideo(uri, onProgress)
3})
4
5const GalleryView = observer(() => {
6  const percent = `${store.progress * 100}%`
7
8  useEffect(() => {
9    void store.fetch('file:///video.mp4')
10  }, [])
11
12  return <>Downloaded {percent}</>
13})
14

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

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

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

1const store = new RequestStore(async (uri: string, { signal }) => {
2  return downloadCancelableVideo(uri, signal)
3})
4
5const GalleryView = observer(() => {
6  useEffect(() => {
7    void store.fetch('file:///video.mp4')
8  }, [])
9
10  const onPressCancel = () => {
11    store.cancel()
12  }
13
14  return (
15    <>
16      <button onClick={onPressCancel} />
17    </>
18  )
19})
20
21const downloadCancelableVideo = async (uri: string, signal: AbortSignal) => {
22  for (let index = 0; index < 1000; index++) {
23    await delay(1)
24    if (signal.aborted) {
25      throw new Error(`Unable to download ${uri}, because request was be cancelled`)
26    }
27  }
28  return uri
29}

Examples

Cancel request with axios

1import axios from 'axios'
2import { RequestStore } from 'mobx-request'
3
4new RequestStore(async (url: string, { signal }) => {
5  return axios.get(url, {
6    signal
7  })
8})

Track progress with axios

1import axios from 'axios'
2import { RequestStore } from 'mobx-request'
3
4new RequestStore(async (url: string, { onProgress }) => {
5  return axios.get(url, {
6    onDownloadProgress: onProgress,
7    // or
8    onUploadProgress: onProgress,
9  })
10})