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

Some Node.js tips about the upstream mobx-restful you should know: https://github.com/idea2app/MobX-RESTful?tab=readme-ov-file#usage

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>
        );
    }
}