https://github.com/mintsweet/mst-advanced
⚙️ advanced model for mst
https://github.com/mintsweet/mst-advanced
Last synced: 5 months ago
JSON representation
⚙️ advanced model for mst
- Host: GitHub
- URL: https://github.com/mintsweet/mst-advanced
- Owner: mintsweet
- License: mit
- Created: 2022-03-30T08:35:28.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-02T12:38:22.000Z (about 3 years ago)
- Last Synced: 2025-02-10T23:36:10.874Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.32 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# mst-advanced
> advanced model for mst
## Installation
```
$ yarn add react react-dom mobx mobx-state-tree lodash
$ yarn add mst-advanced
```
## Usage
### Create Query Model
```javascript
import { types } from 'mobx-state-tree';
import { createQueryModel } from 'mst-advanced';
export const Store = createQueryModel({
Model: types.model({
name: types.maybeNull(types.string);
}),
onQuery: (signal) => apiCall('/xxx/xxx', { signal }),
onResult: (t, res) => {
t.data = res;
},
});
```
### Create List Model
```javascript
import { types } from 'mobx-state-tree';
import { createListModel } from 'mst-advanced';
const Item = types.model({
name: types.string;
});
export const Store = createListModel({
Item,
onQuery: (signal, params) => apiCall('/xxx/xxx', { signal, params }),
onResult: (i:) => ({
name: i.name,
}),
});
```
### Use in react page
```javascript
import { observer } from 'mobx-react-lite';
import { useQuery } from 'mst-advanced';
import { Store } from '../models'; // query model or list model
export default function Page() {
const { loading, error, data } = useQuery(Model1Store, { page: 1, pageSize: 10 });
if (loading) {
return
Loading...;
}
if (error) {
return
Something Error.;
}
return
page;
}
```
## License
MIT