Gathering detailed insights and metrics for mobx-fog-of-war
Gathering detailed insights and metrics for mobx-fog-of-war
Gathering detailed insights and metrics for mobx-fog-of-war
Gathering detailed insights and metrics for mobx-fog-of-war
npm install mobx-fog-of-war
Typescript
Module System
Min. Node Version
Node Version
NPM Version
72.3
Supply Chain
98.2
Quality
80
Maintenance
100
Vulnerability
99.6
License
TypeScript (85.04%)
JavaScript (12.03%)
CSS (2.49%)
HTML (0.32%)
Dockerfile (0.11%)
Love this project? Help keep it running — sponsor us today! 🚀
Total Downloads
17,312
Last Day
1
Last Week
18
Last Month
124
Last Year
1,625
MIT License
2 Stars
147 Commits
1 Forks
1 Watchers
8 Branches
1 Contributors
Updated on Nov 07, 2022
Minified
Minified + Gzipped
Latest Version
0.10.0
Package Id
mobx-fog-of-war@0.10.0
Unpacked Size
232.94 kB
Size
56.44 kB
File Count
35
NPM Version
lerna/3.13.0/node@v10.15.3+x64 (darwin)
Node Version
10.15.3
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
-33.3%
18
Compared to previous week
Last Month
5.1%
124
Compared to previous month
Last Year
-67.1%
1,625
Compared to previous year
36
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.
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.
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.
1yarn add react mobx mobx-react mobx-fog-of-war 2// or 3npm install --save react mobx mobx-react mobx-fog-of-war
Store
+ asyncRequest
< 2.1KB gzipped, entire library < 3KB gzipped1// requesters 2 3const getUser = async (id: UserArgs): Promise<User> => { 4 const response = await fetch(`http://example.com/user/${id}`) 5 return new User(await response.json()); 6}; 7 8const getPet = async (id: PetArgs): Promise<Pet> => { 9 const response = await fetch(`http://example.com/pet/${id}`) 10 return new Pet(await response.json()); 11}; 12 13// stores 14 15import {Store, asyncRequest} from 'mobx-fog-of-war'; 16 17const userStore = new Store<string,User,Error>({ 18 name: 'User Store', 19 staleTime: 60, // after 60 seconds, the item is eligible to be requested again 20 request: asyncRequest(getUser) 21}); 22 23const petStore = new Store<string,Pet,Error>({ 24 name: 'Pet Store', 25 staleTime: 60, 26 request: asyncRequest(getPet) 27});
1import {observer} from 'mobx-react'; 2 3// render a user, it'll go get the required data 4 5const UserView = observer(props => { 6 const userFromStore = userStore.useGet(props.userId); 7 8 return <Loader storeItem={userFromStore}> 9 {user => <div> 10 Name: {user.name} 11 Pets: {user.petIds.map(petId => <PetView key={petId} petId={petId} />)} 12 </div>} 13 </Loader>; 14}); 15 16// render some pets, they'll go get the required data 17 18const PetView = observer(props => { 19 const petFromStore = petStore.useGet(props.petId); 20 21 return <Loader storeItem={petFromStore}> 22 {pet => <div> 23 Pet name: {pet.name} 24 </div>} 25 </Loader>; 26}); 27 28// handle request state as you like 29// for example, a component using render props 30// or use the in-built <Load> component 31 32const Loader = observer(props => { 33 let {storeItem, children} = props; 34 if(storeItem.loading) return <div>Loading</div>; 35 if(storeItem.hasError) return <div>Error: {storeItem.error.message}</div>; 36 if(!storeItem.hasData) return null; 37 return children(storeItem.data); 38});
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. 🎉
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 1/17 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
158 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-02-10
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More