0.6.0 • Published 5 months ago
mobx-strapi v0.6.0
MobX-Strapi
MobX SDK for Strapi headless CMS
Version
SemVer | branch | status | ES decorator | MobX | Strapi |
---|---|---|---|---|---|
>=0.5 | main | ✅developing | stage-3 | >=6.11 | v4 |
>=0.3 <0.5 | main | ❌deprecated | stage-2 | >=4 <6.11 | v4 |
<0.3 | master | ❌deprecated | stage-2 | >=4 <6 | v3 |
Usage
Installation
npm i mobx-strapi koajax
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"experimentalDecorators": false,
"jsx": "react-jsx"
}
}
model/service.ts
import { HTTPClient } from 'koajax';
export const strapiClient = new HTTPClient({
baseURI: 'http://your.production.domain/path/optional',
responseType: 'json'
});
model/Article.ts
import { StrapiListModel } from 'mobx-strapi';
import { strapiClient } from './service';
export type Article = Record<'id' | 'title' | 'summary', string>;
export class ArticleModel extends StrapiListModel<Article> {
client = strapiClient;
baseURI = 'articles';
}
export default new ArticleModel();
page/Article/index.tsx
Use WebCell as an Example
import { component, observer } from 'web-cell';
import articleStore from '../../model/Article';
@component({ tagName: 'article-page' })
@observer
export class ArticlePage extends HTMLElement {
connectedCallback() {
articleStore.getList();
}
disconnectedCallback() {
articleStore.clear();
}
render() {
const { currentPage } = articleStore;
return (
<ul>
{currentPage.map(({ id, title, summary }) => (
<li key={id}>
<a href={`#/article/${id}`}>{title}</a>
<p>{summary}</p>
</li>
))}
</ul>
);
}
}
0.6.0
5 months ago
0.5.3
8 months ago
0.5.2
10 months ago
0.5.1
1 year ago
0.5.0
1 year ago
0.4.5
2 years ago
0.4.3
2 years ago
0.4.2
2 years ago
0.4.1
2 years ago
0.4.0
2 years ago
0.4.0-rc.6
3 years ago
0.4.0-rc.5
3 years ago
0.4.0-rc.4
3 years ago
0.4.0-rc.2
3 years ago
0.4.0-rc.0
3 years ago
0.3.0-alpha.0
4 years ago
0.2.4
4 years ago
0.2.3
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago