mobx-strapi v0.4.5

MobX-Strapi

MobX SDK for Strapi headless CMS

Version

Usage

npm i mobx-restful mobx-strapi koajax

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 { WebCell, component, observer, createCell } from 'web-cell';

import articleStore from '../../model/Article';

@component({
    tagName: 'article-page'
})
@observer
export class ArticlePage extends WebCell() {
    connectedCallback() {
        articleStore.getList();
    }

    disconnectedCallback() {
        articleStore.clear();
    }

    render() {
        const { currentPage } = articleStore;

        return (
            <ul>
                {currentPage.map(({ id, title, summary }) => (
                    <li>
                        <a href={`#/article/${id}`}>{title}</a>
                        <p>{summary}</p>
                    </li>
                ))}
            </ul>
        );
    }
}